mint-ui 写一个下拉滑动选择,mt-popup和mt-picker结合使用

效果图如下

<div @click="getpopupVisible">产品选择div>
                <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom">
              <div class="picker-toolbar-title">
                <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消div>
                <div class="">产品选择div>
                <div class="usi-btn-sure" @click="addrConfirm">确定div>
              div>
              <mt-picker ref='picker' :slots="slots" value-key='name' @change="onValuesChange">mt-picker>
            mt-popup>

在data里面声明slots数组:

      slots: [{
        values: [{
            id: 0,
            name: "阳光虞美人女性保险"
          },
          {
            id: 1,
            name: "阳光贝贝"
          },
          {
            id: 2,
            name: "畅行天下"
          },
          {
            id: 3,
            name: "安心成长"
          },
          {
            id: 4,
            name: "阳光商旅"
          }
        ],
      }],
      popupVisible: false,

methods:

      getpopupVisible() {
        this.popupVisible = true
      },
      onValuesChange(picker, values) {
        this.product = values[0].name;
      },
      addrConfirm() {
        console.log(this.product)
        this.popupVisible = false;
      },

css:

.mint-header {
  background: #fff;
  color: #666;
  font-size: 16px;
}
 
.mint-popup {
  width: 100%;
}
 
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  background: #f5f5f5;
}
 
.usi-btn-cancel,
.usi-btn-sure {
  color: #108EE9;
}