最近小生一直在做关于vant 与 mint ui 的小列子,也写了关于他们两种的插件的运用与方法。
这次讲mint ui之Picker与Popup的实际运用:
1.首先我们需要装mint ui 插件
npm install mint-ui --save
//淘宝镜像 cnpm install mint-ui --save
2.在main.js在引入
import Mint from 'mint-ui'
Vue.use(Mint);import 'mint-ui/lib/style.css'
import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);
import { Popup } from 'mint-ui';Vue.component(Popup.name, Popup);
需注意如果引入了vant 下的picker 和popup两种会冲突 报错;
3.在template
<mt-popup v-model="popupVisible" popup-transition="popup-fade" closeOnClickModal="true" position="bottom">
<mt-picker :slots="slots" @change="onValuesChange" style="width: 7.5rem;" showToolbar>
<div class="picker-toolbar-title">
<div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
<div class="">请选择代理区域</div>
<div class="usi-btn-sure" @click="popupVisible = !popupVisible">确定</div>
</div>
</mt-picker>
</mt-popup>position:center or bottom or top 看个人业务需求
showToobar 为头部 看个人需要不,按平时所见都是需要 取消 确定 中间加一个标题头 所以这里我就全部写出来
4.需要一个事件来触发同样是写在template
<div class="my-content-list" @click="ShouPup">
<div><span style="margin-right: 0.6rem;">代理区域:</span><input class="text-hui" v-model="message" /</div>
</div>说明 因为我写的是手机端 所以用了rem 来适配
5.js:
<script> export default { name: '', data() { return { showToolbar: true, message: "请选择代理区域", slots: [{ values: ['城市选择', '苏州', '常州', '杭州', '湖州', '上海', '南京'], }], popupVisible: false, } }, methods: { ShouPup() { this.popupVisible = true }, onValuesChange(picker, values) { this.message = values; if(values[0] > values[1]) { picker.setSlotValue(1, values[0]); } }, }, mounted() { }, } </script>
6.我定义了一些css样式
.picker-toolbar-title {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.usi-btn-cancel,
.usi-btn-sure {
color: #FF6600
}7.效果图:
我上面没有做联动,如果业务有需求你可以做联动
个人觉得 mint ui 和vant下的 popup 和picker合用 都不错,vant 下的popup 和picker合用少了中间自己写 和定义取消和title和确定。两种用法都熟练运用那更好。欢迎提出你宝贵的意见!