mint-ui 写一个下拉滑动选择,mt-popup和mt-picker结合使用

在这里插入图片描述

<template><div id="feedback"><div @click="getpopupVisible">产品选择</div><mt-popupv-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-pickerref="picker":slots="slots"value-key="name"@change="onValuesChange"></mt-picker></mt-popup></div>
</template>
<script>
export default {data() {return {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;},},
};
</script><style lang="scss">
#feedback {width: 100%;height: auto;.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;}
}
</style>