popup 弹窗 picker-view 滚动选择器

组件链接: ext.dcloud.net.cn/plugin?id=7…

<m-picker mode="bottom" :show.sync="show" :range="list" @confirm="confirm" />

一、自定义popup类型的picker-view滚动选择器

组件是基于uniapp开发的，过度动画使用了uniapp的<uni-transition></uni-transition>组件

Mark 遮罩层

<uni-transition v-if="mark" ref="aniMark" custom-class="transition" mode-class="fade" :styles="stylesMark" :show="show" @click="clickMark" />

popup内容

<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show"><view class="m-picker"><view class="m-picker__case" :style="{background: bgColor,borderTopLeftRadius: radius[0] + 'rpx',borderTopRightRadius: radius[1] + 'rpx',borderBottomLeftRadius: radius[2] + 'rpx',borderBottomRightRadius: radius[3] + 'rpx',paddingBottom: model == 'bottom' ? 'calc(constant(safe-area-inset-bottom) + 30rpx)' : '30rpx',paddingBottom: model == 'bottom' ? 'calc(env(safe-area-inset-bottom) + 30rpx)' : '30rpx'}"><!-- 确认/取消 按钮 --><slot v-if="model == 'bottom'" name="handle"><view class="handle"><view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view><view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view></view></slot><!-- 内容 --><slot></slot><!-- 确认/取消 按钮 --><slot v-if="model != 'bottom'" name="handle"><view class="handle"><view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view><view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view></view></slot></view></view>
</uni-transition>

picker-view 组件

<view class="content" :style="{height: `${height}rpx`}"><picker-view class="picker-view" :indicator-class="indicatorClass" :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange" @pickstart="pickstart" @pickend="pickend"><picker-view-column v-for="(rangeItem, rangeIndex) in range" :key="rangeIndex"><view class="picker-view__item" v-for="(item, index) in rangeItem" :key="index">{{ item[rangeKey] }}</view></picker-view-column></picker-view>
</view>

props.js

const props = {// 是否显示遮罩mark: {type: Boolean,default() {return true}},// 点击遮罩是否关闭markClose: {type: Boolean,default() {return true}},// 点击按钮是否关闭btnClose: {type: Boolean,default() {return true}},// 是否显示弹窗show: {type: Boolean,default() {return false}},// 数据range: {type: Array,default: []},// picker-item显示内容的keyrangeKey: {type: String,default: 'label'},// 设置选择器中间选中框的样式indicatorStyle: {type: String,default: 'height: 50px;'},// 设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/indicatorClass: {type: String,default: ''},// cancel文字cancelText: {type: String,default: '取消'},// confirm文字confirmText: {type: String,default: '确定'},// cancel样式stylecancelStyle: {type: Object,default: {}},// confirm样式styleconfirmStyle: {type: Object,default: {}},// 内容高度 rpxheight: {type: Number,default: 500},// 圆角 rpxborderRadius: {type: Number,default: 16},// 背景颜色bgColor: {type: String,default: '#FFFFFF'},// mark 背景颜色markBgColor: {type: String,default: '#00000080'},// 方向 top/bottom/centermode: {type: String,default: 'bottom'}
}export default props

接收样式参数

import props from './props.js'
export default {name:"m-picker",props,computed: {model() {if (this.mode == 'top') return 'top';else if (this.mode == 'bottom') return 'bottom';else if (this.mode == 'center') return 'center';else return 'bottom';},stylesMark() {return {position: 'fixed',top: 0,left: 0,right: 0,bottom: 0,zIndex: 99,backgroundColor: this.markBgColor,}},styles() {const top = {position: 'fixed',left: 0,right: 0,top: 0,zIndex: 100}const bottom = {position: 'fixed',left: 0,right: 0,bottom: 0,zIndex: 100}const center = {position: 'fixed',left: '50%',top: '50%',width: '90vw',transform: 'translate(-50%, -50%)',zIndex: 100}if (this.model == 'top') return top;else if (this.model == 'bottom') return bottom;else if (this.model == 'center') return center;else return bottom;},radius() {const borderRadius = this.borderRadius;if (this.model == 'top') return [0, 0, borderRadius, borderRadius];else if (this.model == 'bottom') return [borderRadius, borderRadius, 0, 0];else if (this.model == 'center') return [borderRadius, borderRadius, borderRadius, borderRadius];else return [0, 0, 0, 0];},modeClass() {if (this.model == 'top') return ['fade', 'slide-top'];else if (this.model == 'bottom') return ['fade', 'slide-bottom'];else if (this.model == 'center') return 'fade';else return ['fade', 'slide-bottom'];}},
}

二、组件说明

Methods

方法称名	说明	参数
confirm	点击右侧按钮	[]
cancel	点击左侧按钮

字段

字段	类型	默认值	说明
mark	Boolean	true	是否显示遮罩
markClose	Boolean	true	点击遮罩是否关闭
btnClose	Boolean	true	点击按钮是否关闭
show	Boolean	fale	是否显示弹窗
range	Array	[]	数据
rangeKey	String	‘label’	picker-item显示内容的key
indicatorStyle	String	‘height: 50px;’	设置选择器中间选中框的样式
indicatorClass	String	’ ’	设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
cancelText	String	取消	cancel文字
confirmText	String	确定	confirm文字
cancelStyle	Object	{}	cancel样式style
confirmlStyle	Object	{}	confirm样式style
height	Number	500	内容高度 rpx
borderRadius	Number	16	圆角 rpx
bgColor	String	‘#FFFFFF’	背景颜色
mode	String	bottom	方向 top/bottom/center

Slots

称名	说明
default	会覆盖默认的picker-view
handle	按钮部分

三、图片演示

bottom

top

center

四、完整代码

<template><view class="pricke"><uni-transition v-if="mark" ref="aniMark" custom-class="transition" mode-class="fade" :styles="stylesMark" :show="show" @click="clickMark"></uni-transition><uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show"><view class="m-picker"><view class="m-picker__case" :style="{background: bgColor,borderTopLeftRadius: radius[0] + 'rpx',borderTopRightRadius: radius[1] + 'rpx',borderBottomLeftRadius: radius[2] + 'rpx',borderBottomRightRadius: radius[3] + 'rpx',paddingBottom: model == 'bottom' ? 'calc(constant(safe-area-inset-bottom) + 30rpx)' : '30rpx',paddingBottom: model == 'bottom' ? 'calc(env(safe-area-inset-bottom) + 30rpx)' : '30rpx'}"><slot v-if="model == 'bottom'" name="handle"><view class="handle"><view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view><view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view></view></slot><slot><view class="content" :style="{height: `${height}rpx`}"><picker-view class="picker-view" :indicator-class="indicatorClass" :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange" @pickstart="pickstart" @pickend="pickend"><picker-view-column v-for="(rangeItem, rangeIndex) in range" :key="rangeIndex"><view class="picker-view__item" v-for="(item, index) in rangeItem" :key="index">{{ item[rangeKey] }}</view></picker-view-column></picker-view></view></slot><slot v-if="model != 'bottom'" name="handle"><view class="handle"><view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view><view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view></view></slot></view></view></uni-transition></view>
</template><script> import props from './props.js'export default {name:"m-picker",props,data() {return {pickerValue: [],pickMove: false,};},computed: {model() {if (this.mode == 'top') return 'top';else if (this.mode == 'bottom') return 'bottom';else if (this.mode == 'center') return 'center';else return 'bottom';},stylesMark() {return {position: 'fixed',top: 0,left: 0,right: 0,bottom: 0,zIndex: 99,backgroundColor: this.markBgColor,}},styles() {const top = {position: 'fixed',left: 0,right: 0,top: 0,zIndex: 100}const bottom = {position: 'fixed',left: 0,right: 0,bottom: 0,zIndex: 100}const center = {position: 'fixed',left: '50%',top: '50%',width: '90vw',transform: 'translate(-50%, -50%)',zIndex: 100}if (this.model == 'top') return top;else if (this.model == 'bottom') return bottom;else if (this.model == 'center') return center;else return bottom;},radius() {const borderRadius = this.borderRadius;if (this.model == 'top') return [0, 0, borderRadius, borderRadius];else if (this.model == 'bottom') return [borderRadius, borderRadius, 0, 0];else if (this.model == 'center') return [borderRadius, borderRadius, borderRadius, borderRadius];else return [0, 0, 0, 0];},modeClass() {if (this.model == 'top') return ['fade', 'slide-top'];else if (this.model == 'bottom') return ['fade', 'slide-bottom'];else if (this.model == 'center') return 'fade';else return ['fade', 'slide-bottom'];}},watch: {range(val) {if (val.length) {let arr = []for (let index in this.range) {arr.push(0);}this.pickerValue = arr;}}},created() {if (this.range && this.range.length) {this.pickerValue = [];for (let index in this.range) {this.pickerValue.push(0)}}},methods: {// 关闭close() {if (!this.pickMove) this.$emit('update:show', false)},// 取消cancel() {this.$emit('cancel')if (this.btnClose) this.close()},// 确定confirm() {this.$emit('confirm', this.pickerValue);if (this.btnClose) this.close()},// 点击遮罩clickMark() {if (this.markClose) this.close()},bindChange (e) {const val = e.detail.value;this.pickerValue = val;},pickstart() {this.pickMove = true;},pickend() {this.pickMove = false;}}} </script><style lang="scss"> .m-picker {width: 100%;height: 100%;&__case {padding-left: 56rpx;padding-right: 56rpx;padding-top: 30rpx;padding-bottom: 30rpx;.handle {width: 100%;display: flex;align-items: center;justify-content: space-between;.button {font-size: 48rpx;font-family: PingFang SC;font-weight: 500;color: #000000;&.cancel {}&.confirm {color: #FF8833;}}}.content {width: 100%;height: 400rpx;}}
}.picker-view {width: 100%;height: 100%;&__item {display: flex;align-items: center;justify-content: center;font-size: 48rpx;}
} </style>

popup 弹窗 picker-view 滚动选择器相关推荐

微信小程序开发笔记（1.1）滚动选择器picker的使用
微信小程序开发笔记(1.1)滚动选择器picker的使用前言滚动选择器picker 普通选择器多列选择器时间选择器日期选择器省市区选择器前言最近被拉来做小程序,因为时间比较赶,其他方面 ...
android 自定义含有滚动选择器的对话框
最近在写一个项目,需要用到滚动选择器,本人的想法是弹出一个对话框,中间包含滚动选择器,其中滚动选择器的源码参考的这篇文章http://blog.csdn.net/zhongkejingwang/art ...
uni-app使用picker的多种选择器（多列，时间，地区）
picker底部滚动选择器 <template><view><view><picker :range="years" @change=&q ...
android自定义滚轴选择器_Android自定义控件实战—滚动选择器PickerView
手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器,前几天用手机刷了MIUI,发现自带的那个时间选择器效果挺好看的,于是就自己仿写了一个,权当练手.先来看效果: 效果还行吧?实现思路就是自定 ...
Android自定义控件实战——滚动选择器PickerView
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38513301 手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器, ...
uni-app使用picker底部弹起的滚动选择器（日期选择器）
picker从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. html部分: <view cl ...
range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
【微信小程序】picker 滚动选择器
选择性别参考:picker | 微信开放文档 <view style="display: flex; align-items: center;">选择性别:<p ...
vanpopup 高度_解决VantUI popup 弹窗不弹出或无蒙层的问题
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件: popup1show: true 即弹窗显示 :title="popupTitle.popup ...

popup 弹窗 picker-view 滚动选择器

popup 弹窗 picker-view 滚动选择器

一、自定义popup类型的picker-view滚动选择器

Mark 遮罩层

popup内容

picker-view 组件

props.js

接收样式参数

二、组件说明

Methods

字段

Slots

三、图片演示

bottom

top

center

四、完整代码

popup 弹窗 picker-view 滚动选择器相关推荐

最新文章

热门文章

popup 弹窗 picker-view 滚动选择器

popup 弹窗 picker-view 滚动选择器

一、自定义popup类型的picker-view滚动选择器

Mark 遮罩层

popup内容

picker-view 组件

props.js

接收样式参数

二、组件说明

Methods

字段

Slots

三、 图片演示

bottom

top

center

四、完整代码

popup 弹窗 picker-view 滚动选择器相关推荐

最新文章

热门文章

三、图片演示