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

solocoder

发布于 2022-04-06 12:57:19

1.1K0

发布于 2022-04-06 12:57:19

文章被收录于专栏：大前端客栈

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: {
  <span class="hljs-comment">//滚轮变化回调</span>
  onChange(picker, values) {
    <span class="hljs-comment">// console.log(values)</span>
  },

  <span class="hljs-comment">//取消按钮</span>
  cancel() {
    <span class="hljs-keyword">this</span>.visible.show = <span class="hljs-literal">false</span>
  },

  <span class="hljs-comment">//确定按钮</span>
  confirm() {
    <span class="hljs-keyword">this</span>.visible.show = <span class="hljs-literal">false</span>;
    <span class="hljs-keyword">let</span> values = <span class="hljs-keyword">this</span>.$refs.picker.getValues();
    <span class="hljs-comment">//给父组件传值</span>
    <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">"values"</span>, 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>

使用

使用组件需要三步

去除无关代码，只保留跟本文相关的代码如下

<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>

使用须知

slots 传递的值与 mint-ui 中 picker 定义的 slots 一致，详情见 https://mint-ui.github.io/docs/#/zh-cn2/picker 。备选值即 values 字段的值要统一转换成 {id: 'xxx', name: 'xxx'} 的格式，方便取 id 和显示。
:visible="" 要传一个对象，因为 vue 规定在子组件中不能更改 props 的值，这里取个巧，传对象的话引用不变，但值可以改，不会报错。当然也可以用 vuex 来实现，哪个顺手用哪个吧。
@values 接收的是选中的值的数组。不管滑动滚轮了没有，点击确定按钮时都会将当前滚轮选中的值传递过来。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/09/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法