<template><div id="feedback"><div @click="getpopupVisible">產(chǎn)品選擇</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="">產(chǎn)品選擇</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> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的mint-ui 写一个下拉滑动选择,mt-popup和mt-picker结合使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。