u-select uniapp 选择使用

Love The Way You Lie 2021-09-07 06:17 839阅读 0赞

![u-select使用][u-select]  
具体配置参考u-view官方,此处只使用，方便自己项目复用

<template>
    	<view class="leave_cont">
    		<view class="subNav">
    			<view class="subNav-icon icon">
    				<image src="../static/img/home/pickera-icon.png" mode=""></image>
    			</view>
    
    			<view class="subNav-tit">
    				<u-select @click="show = true" :default-value="defaultValue" :mode="mode" v-model="show" :list="list" @confirm="confirm" @cancel="cancel"></u-select>
    				<view class="u-demo-result-line">电力类别：{
       { result }}</view>
    			</view>
    			
    			 <view class="subNav-icon icon2" @click="show = true">
    				<image src="../static/img/admin/right.png" mode=""></image>
    			</view>
    
    		</view>
    	</view>
    </template>

<script>
    	export default { 
    		data() { 
    			return { 
    				show: false,
    				result: '尚未选择',
    				defaultValue: [0],//默认选项
    				mode: 'single-column', // single-column, mutil-column, mutil-column-auto
    				list: [{ 
    						value: '1',
    						label: '有功功率'
    					},
    					{ 
    						value: '2',
    						label: '电流'
    					},
    					{ 
    						value: '3',
    						label: '相电压'
    					},
    					{ 
    						value: '4',
    						label: '线电压'
    					},
    					{ 
    						value: '5',
    						label: '频率'
    					},
    					{ 
    						value: '6',
    						label: '无功功率'
    					},
    					{ 
    						value: '7',
    						label: '视在功率'
    					}
    				]
    			};
    		},
    	
    		methods: { 
    			confirm(e) { 
    				this.result = '';
    				e.map((val, index) => { 
    					// this.result += this.result == '' ? val.label : '-' + val.label;
    					let result = val.label
    					this.result += result;
    				})
    			},
    			cancel(e) { 
    				console.log(e);
    			}
    		}
    	}
    </script>

[u-select]: /images/20210827/b2bff847636046428522612991d5b45f.png

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp-手写三级地区选择实现

文章目录 0.演示 1.插件代码 2.使用 3.完整引用 0.演示 ![在这里插入图片描述][2020091

青旅半醒/ 2022年12月07日 15:26/ 0 赞/ 214 阅读

相关 uniapp颜色选择器插件

颜色选择器地址 https://ext.dcloud.net.cn/plugin?id=403 导入 / 颜色选择器 / im

谁借莪１个温暖的怀抱￠/ 2022年12月01日 05:19/ 0 赞/ 592 阅读

相关 uniapp中使用vantweapp实现省市区三级联动选择

先看代码，复制使用即可，本文介绍了如何在uniapp中使用vant组件实现省市区三级联动选择。在复制使用之前您要先配置使用以下两个vantweapp组件 "v

àì夳堔傛蜴生んèń/ 2022年12月01日 03:42/ 0 赞/ 300 阅读

相关 uniapp滚动选择器 picker

从底部弹起的滚动选择器 picker > 支持五种选择器, 通过mode来区分, 分别是普通选择器(selector), 多列选择器(multiSelector), 时间

小鱼儿/ 2022年11月27日 02:00/ 0 赞/ 723 阅读

相关 uniapp滑动选择器 slider

滑动选择器 slider 属性说明 1. min: 最小值 2. max: 最大值 3. step: 步长, 取值必须大于0, 并且可被(max - min)整除

水深无声/ 2022年11月27日 01:59/ 0 赞/ 551 阅读

相关 uniapp-城市选择插件

下载地址https://ext.dcloud.net.cn/plugin?id=115 使用： 1.将这5个文件夹放入component目录下 ![在这里插入图片描

电玩女神/ 2022年02月14日 01:54/ 0 赞/ 923 阅读

相关 u-select uniapp 选择使用

![u-select使用][u-select] 具体配置参考u-view官方,此处只使用，方便自己项目复用 <template> <view class

Love The Way You Lie/ 2021年09月07日 06:17/ 0 赞/ 840 阅读

相关 uniapp - uniapp 中的样式使用

uniapp 中的样式使用一. 尺寸单位二. 样式导入三. 内联样式四. 选择器五. 全局样式与局部样式 > 在 uni-app

╰+哭是因爲堅強的太久メ/ 2021年07月26日 02:42/ 0 赞/ 930 阅读

相关 uniapp中的picker选择器

目录一、普通选择器二、多列选择器三、时间选择器四、日期选择器 -------------------- 一、普通选择器 ![2021030621

心已赠人/ 2021年07月25日 15:56/ 0 赞/ 3983 阅读

相关 uniapp 三级地区选择组件 selectAddress pick-xxx的使用

三级地区选择 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

阳光穿透心脏的1/2处/ 2021年07月25日 11:58/ 0 赞/ 366 阅读