Vue + Mint-ui 封装滚轮选择器

1,792 阅读3分钟

Mint-ui 是个非常不错的 UI 框架,提供了很多组件。

但在项目中实际使用的时候,还需要将几个组件组合起来使用。

比如要实现 App 中常见的滚轮选择器,需要将 PopupPicker 组合起来,并根据项目的 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. slots 传递的值与 mint-ui 中 picker 定义的 slots 一致,详情见 mint-ui.github.io/docs/#/zh-c…

    备选值即 values 字段的值要统一转换成 {id: 'xxx', name: 'xxx'} 的格式,方便取 id 和显示。

  2. :visible="" 要传一个对象,因为 vue 规定在子组件中不能更改 props 的值,这里取个巧,传对象的话引用不变,但值可以改,不会报错。当然也可以用 vuex 来实现,哪个顺手用哪个吧。

  3. @values 接收的是选中的值的数组。不管滑动滚轮了没有,点击确定按钮时都会将当前滚轮选中的值传递过来。