u-select uniapp 选择使用
具体配置参考u-view官方,此处只使用,方便自己项目复用<template><view class="leave_cont"><view class="subNav"><view class="subNav-icon icon"><image src="../static/img/home/pickera-icon.png" mode=""&
·
具体配置参考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>
更多推荐
已为社区贡献7条内容
所有评论(0)