vue + mintui + picker elastic block selector

Preface:

        App implemented using the end of Mint-popup + UI + Picker , playing box plus selection effect

Achieve renderings:

Implementation steps:

First, install mint-ui  details View

Second, to see steps

1, Template section

 <div id="peopleChorseT" @click="openQuestionType"></div>
 <input type="text" v-model="questionType" placeholder="请输入问题类型">

<!-- 问题类型 -->
     <mt-popup v-model="popupVisible" popup-transition="popup-fade" closeOnClickModal="true" position="bottom">
        <mt-picker :slots="popupSlots" @change="onValuesChange"  showToolbar>
          <div class="picker-toolbar-title">
            <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
            <div class="">请选择问题类型</div>
            <div class="usi-btn-sure" @click="popupOk()">确定</div>
          </div>
        </mt-picker>
    </mt-popup>

2, Data portion

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

3, Methods section

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

. 4, CSS style part ( 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;
  }
}