自定义pickerView

淡淡的烟草味﹌ 2022-12-16 13:18 95阅读 0赞

<template>
    	<uni-popup ref="msPicker" type="bottom">
    		<picker-view style="width: 100%;height: 300rpx;background-color: #FFFFFF;" @change="valueRangeChange">
    			<picker-view-column>
    				<view style="text-align: center;" v-for="item in valueRangeList">{
       {item.name}}</view>
    			</picker-view-column>
    		</picker-view>
    		<view>
    			<view class="btn cancel" :style="{ 'color': cancelTextColor}" @click="handleCancel">{
       {cancelText}}</view>
    			<view class="btn confirm" :style="{ 'color': confirmTextColor}" @click="handleConfirm">{
       {confirmText}}</view>
    		</view>
    	</uni-popup>
    </template>
    
    <script> export default { props: { // 取消按钮文字 cancelText: { type: String, default: '取消' }, // 确定按钮文字 confirmText: { type: String, default: '确定' }, // 取消按钮文字颜色 cancelTextColor: { type: String, default: '#666' }, // 确定按钮文字颜色 confirmTextColor: { type: String, default: '#5999FF' }, valueRangeList: { type: Array, default: [] } }, data() { return { value: this.valueRangeList[0] } }, methods: { valueRangeChange(e) { this.value = this.valueRangeList[e.detail.value].value; console.log("===valueRangeChange===="+this.value) }, showModal() { this.$refs['msPicker'].open(); }, handleCancel() { this.$refs['msPicker'].close(); this.$emit('onClickCancel', 'cancel') }, handleConfirm() { this.$refs['msPicker'].close(); this.$emit('onClickConfirm', this.value) } } } </script>
    
    <style scoped> .btn { width: 50%; height: 90rpx; text-align: center; line-height: 90rpx; font-size: 32rpx; float: left; background-color: #FFFFFF; border-top: 1rpx solid #ddd; } </style>

this.$refs['msPicker'].showModal();

pickConfirm(value) { 
    	console.log('===value==' + value);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

相关 PickerView简单的省市布局

代码如下： - (void)viewDidLoad { [super viewDidLoad]; //先创建

逃离我推掉我的手/ 2023年10月17日 03:54/ 0 赞/ 19 阅读

相关键盘弹起日期PickerView

代码如下： - (void)viewDidLoad { [super viewDidLoad]; //设置日期选择器的样式

心已赠人/ 2023年10月17日 03:53/ 0 赞/ 15 阅读

相关 PickerView的简单介绍

PickerView现在在大多数App都有使用到，例如设置时间的时候，或者选择地区的时候，使用PickerView来实现很实用，在底部弹出个对话框，接着进行选择就可以了，而且O

Dear 丶/ 2023年07月11日 15:07/ 0 赞/ 1 阅读

相关仿iOS的PickerView控件

介绍这是一款仿iOS的PickerView控件，有时间选择器和选项选择器，新版本的详细特性如下： ——TimePickerView 时间选择器，支持年月日时分，年月日

逃离我推掉我的手/ 2023年01月23日 15:00/ 0 赞/ 14 阅读

相关自定义_自定义探针

LabVIEW：2015 -------------------- 想必探针这个调试工具大家都是用过的，用来监测系统当前状态下某条连线(数据流)的值，不仅简单而且实用

àì夳堔傛蜴生んèń/ 2023年01月06日 12:57/ 0 赞/ 216 阅读

相关自定义pickerView

<template> <uni-popup ref="msPicker" type="bottom"> <picker-view style="w

淡淡的烟草味﹌/ 2022年12月16日 13:18/ 0 赞/ 96 阅读

相关 PickerView居中,循环显示一系列

<table style="border-collapse:collapse; border-spacing:0px; word-break:break-word; margi

刺骨的言语ヽ痛彻心扉/ 2022年07月21日 11:20/ 0 赞/ 165 阅读

相关 iOS pickerView（所有类型一网打尽）

概述关于PickView的所有类型都在这里详细代码下载：[http://www.demodashi.com/demo/11017.html][http_w

小鱼儿/ 2022年05月31日 11:17/ 0 赞/ 141 阅读

相关 Android之时间选择器 PickerView使用

一.介绍这是一款仿iOS的PickerView控件，有时间选择器和选项选择器，新版本的详细特性如下： TimePickerView 时间选择器，支持年月日时分，

蔚落/ 2022年02月24日 09:18/ 0 赞/ 1070 阅读

相关自定义初学4——自定义属性

前面只是简单说了自定义View，接下来我们再来个增强版——自定义View的属性 1、自定义View的属性，首先在res/values/ 下建立一个attrs.xml ，在

不念不忘少年蓝@/ 2021年09月22日 04:56/ 0 赞/ 586 阅读