<div @click="getpopupVisible">产品选择</div>
<mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom">
<div class="picker-toolbar-title">
<div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
<div class="">产品选择</div>
<div class="usi-btn-sure" @click="addrConfirm">确定</div>
</div>
<mt-picker ref='picker' :slots="slots" value-key='name' @change="onValuesChange"></mt-picker>
</mt-popup>
在data里面声明slots数组:
slots: [{
values: [{
id: 0,
name: "阳光虞美人女性保险"
},
{
id: 1,
name: "阳光贝贝"
},
{
id: 2,
name: "畅行天下"
},
{
id: 3,
name: "安心成长"
},
{
id: 4,
name: "阳光商旅"
}
],
}],
popupVisible: false,
methods:
getpopupVisible() {
this.popupVisible = true
},
onValuesChange(picker, values) {
this.product = values[0].name;
},
addrConfirm() {
console.log(this.product)
this.popupVisible = false;
},
css:
.mint-header {
background: #fff;
color: #666;
font-size: 16px;
}
.mint-popup {
width: 100%;
}
.picker-toolbar-title {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 40px;
line-height: 40px;
font-size: 16px;
background: #f5f5f5;
}
.usi-btn-cancel,
.usi-btn-sure {
color: #108EE9;
}