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

        
                
                    

                        

取消

                        

请选择代理区域

                        

确定

                    

                
           

position:center  or bottom or top 看个人业务需求

showToobar 为头部 看个人需要不，按平时所见都是需要 取消 确定 中间加一个标题头 所以这里我就全部写出来 

4.需要一个事件来触发同样是写在template

          

代理区域:
 

说明 因为我写的是手机端 所以用了rem 来适配 

5.js:

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和确定。两种用法都熟练运用那更好。欢迎提出你宝贵的意见！