Mint-ui 是個非常不錯的 UI 框架，提供了很多元件。

但在專案中實際使用的時候，還需要將幾個元件組合起來使用。

比如要實現 App 中常見的滾輪選擇器，需要將 Popup 和 Picker 組合起來，並根據專案的 UI 效果做一定的定製。

下面將用 Popup + Picker 定製一個帶確定取消按鈕的滾輪選擇器。

封裝

佈局很簡單，外層套一個 <mt-popup>，上面是兩個按鈕，下面是 <mt-picker>。

這兩個元件的具體用法請查閱 官方文件

先貼出程式碼

<template>
  <mt-popup
      class="mt-popup"
      v-model="visible.show"
      :closeOnClickModal="false"
      position="bottom">
    <div class="popup-container">
      <div class="title">
        <div class="text" @click="cancel()">取消</div>
        <div class="text confirm" @click="confirm()">確定</div>
      </div>
      <mt-picker ref="picker" class="mt-picker" value-key="name" :slots="slots" @change="onChange"></mt-picker>
    </div>
  </mt-popup>
</template>

<script>
  export default {
    components: {},
    props: {
      slots: {
        type: Array,
        required: true
      },
      visible: {
        // type: Object,
        required: true
      }
    },
    methods: {

      //滾輪變化回撥
      onChange(picker, values) {
        // console.log(values)
      },

      //取消按鈕
      cancel() {
        this.visible.show = false
      },

      //確定按鈕
      confirm() {
        this.visible.show = false;
        let values = this.$refs.picker.getValues();
        //給父元件傳值
        this.$emit("values", values);
      }
    }
  }
</script>

<style scoped lang="scss">

  @import "../../public/css/index";
  .mt-popup {
    width: 100%;
    height: 45%;
    .popup-container {
      width: 100%;
      height: 100%;
      background-color: white;
      .title {
        display: flex;
        justify-content: space-between;
        .text {
          font-size: $font-size-large;
          padding: 10px;
          color: $text-normal;
          &.confirm {
            color: $color-primary;
          }
        }
      }
      .mt-picker {
      }
    }
  }
</style>
 

使用

使用元件需要三步

1. 引入（路徑需根據實際情況更改）

   import SyPicker from '../components/SyPicker'
   

2. 在 components 裡註冊

   components: {
   	'sy-picker': SyPicker
   }
   

3. 佈局中使用

   <sy-picker :slots="slots" :visible="yearTermShow" @values="onReceiveYearTermValues"></sy-picker>
   

去除無關程式碼，只保留跟本文相關的程式碼如下

<template>
  <div class="select-picker">
    <div @click="showYearTermPopup">彈出選擇器</div>
    <sy-picker :slots="slots" :visible="yearTermShow" @values="onReceiveYearTermValues"></sy-picker>
  </div>
</template>

<script>
  import SyPicker from '../components/SyPicker'

  export default {
    components: {
      'sy-picker': SyPicker
    },
    created() {},
    data() {
      return {
        yearTermShow: {show: false},
        slots: [
          {
            flex: 1,
            values: [{id: '2017-2018', name: '2017-2018'},{id: '2018-2019', name: '2018-2019'}],
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [{id: '1', name: '第一學期'}, {id: '2', name: '第三學期'}],
            className: 'slot3',
            textAlign: 'center'
          }
        ]
      }
    },
    computed: {},
    methods: {
      //顯示滾輪選擇器
      showYearTermPopup() {
        this.yearTermShow.show = true;
      },

	  //點選確定之後接收選擇的值
      onReceiveYearTermValues(values) {
        console.log("receive", values);
        this.selectYear = values[0];
        this.selectTerm = values[1];
      }
    }
  }
</script>

<style scoped lang="scss">
</style>

 

使用須知

1. 備選值即 values 欄位的值要統一轉換成 {id: 'xxx', name: 'xxx'} 的格式，方便取 id 和顯示。

2. :visible="" 要傳一個物件，因為 vue 規定在子元件中不能更改 props 的值，這裡取個巧，傳物件的話引用不變，但值可以改，不會報錯。當然也可以用 vuex 來實現，哪個順手用哪個吧。

3. @values 接收的是選中的值的陣列。不管滑動滾輪了沒有，點選確定按鈕時都會將當前滾輪選中的值傳遞過來。