vue+mintui+picker弹框选择器

前言：

        实现app端使用mint-ui+popup+picker，弹框加选择效果

实现效果图：

实现步骤：

一、安装mint-ui  详情查看

二、查看具体步骤

1、template部分

 

 


     
        
          

            
取消
            
请选择问题类型
            
确定
          
        
    

2、data部分

      questionType:'',//当前问题类型
      questionTypeVal:'',//当前问题类型-改变后的
      popupVisible:false,//问题类型弹框
      popupSlots:[//问题类型弹框数据
        {
          values:[
            '安全帽','手环','头盔','pad'
          ]
        }
      ],

3、methods部分

    /**
     * 打开问题类型的弹框
     */
    openQuestionType(){
      this.popupVisible = true;
    },
    // 问题类型弹框点击确认
    popupOk(){
      this.questionType = this.questionTypeVal;
      this.popupVisible = false;
    },
    //问题类型的弹框picker值发生改变
    onValuesChange(picker, values){
      this.questionTypeVal = values[0];
    }

4、css样式部分（less）

/**用div遮盖住input可以让他实现点击input出来弹框效果 */
#peopleChorseT{
  position: absolute;
  width: 100%;
  top:1.17rem;
  height: 0.6rem;
}
/**问题类型弹框样式 */
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  .usi-btn-cancel,.usi-btn-sure{
      color:#26a2ff;
      font-size: 16px;
  }
}