vue移动端项目实现弹框选择器功能
实现该功能主要用到mintUI中的Picker与Popup组件1、引入组件import { MessageBox, Toast, Picker, Popup, Header} from "mint-ui";2、写弹框选择器的结构样式<mt-popup v-model="popupVisible1" popup-transition="popup-fade"...
·
实现该功能主要用到mintUI中的Picker与Popup组件
1、引入组件
import { MessageBox, Toast, Picker, Popup, Header } from "mint-ui";
2、写弹框选择器的结构样式
<mt-popup v-model="popupVisible1" popup-transition="popup-fade" closeOnClickModal="true" position="bottom">
<mt-picker :slots="slots1" @change="onValuesChange1" showToolbar>
<div class="picker-toolbar-title">
<div class="usi-btn-cancel" @click="popupVisible1 = !popupVisible1">取消</div>
<div class="">请选择售后类型</div>
<div class="usi-btn-sure" @click="sure1()">确定</div>
</div>
</mt-picker>
</mt-popup>
.picker-toolbar-title {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 100%;
line-height: 100%;
font-size: .7rem;
.usi-btn-cancel,.usi-btn-sure{
color:#FF6600;
}
}
3、在method中写选中值的方法
methods: {
onValuesChange1(picker, values) {
this.message = values[0];
},
sure1(){
this.saleType = this.message
this.popupVisible1 = false;
},
},
4、大功告成,最后的效果图如下
更多推荐
已为社区贡献10条内容
所有评论(0)