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

<template>
  <div id="feedback">
    <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>
  </div>
</template>
<script>
export default {
  data() {
    return {
      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;
    },
  },
};
</script>

<style lang="scss">
#feedback {
  width: 100%;
  height: auto;
  .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;
  }
}
</style>