mint ui------------Picker与Popup的实际运用

最近小生一直在做关于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和确定。两种用法都熟练运用那更好。欢迎提出你宝贵的意见！