Mint-ui is a great UI framework that provides many components.

But when you actually use it in a project, you need to combine several components.

For example, to implement a common wheel Picker in an App, you need to combine Popup and Picker, and make some customization based on the UI effect of the project.

The next step is to customize a wheel selector with an ok cancel button using Popup + Picker.

encapsulation

The layout is simple, with a < Mt-popup > on top of two buttons and a < Mt-picker > on the bottom.

See the official documentation for details on how to use these two components

Post the code first

<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()">cancel</div>
        <div class="text confirm" @click="confirm()">determine</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: {

      // Rollwheel change callback
      onChange(picker, values) {
        // console.log(values)
      },

      // Cancel button
      cancel() {
        this.visible.show = false
      },

      // Confirm button
      confirm() {
        this.visible.show = false;
        let values = this.$refs.picker.getValues();
        // Pass the value to the parent component
        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>
Copy the code

use

There are three steps to using components

  1. Import (The path needs to be changed based on site requirements)

    import SyPicker from '.. /components/SyPicker'
Copy the code

  2. Sign up at Components

    components: {
	'sy-picker': SyPicker
}
Copy the code

  3. Use in layout

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

Remove the extraneous code, leaving only the code relevant to this article as follows

<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: 'Divider '}, {divider: true, content: '-', className: 'slot2'}, {flex: 1, values: [{id: '1', name:' 1st semester '}, {id: '2', name: 'third semester '}], className: 'slot3', textAlign: 'center'}]}}, computed: {}, methods: ShowYearTermPopup () {this.yeartermshow.show = true; }, // Click OK to receive the selected value onReceiveYearTermValues(values) {console.log("receive", values); this.selectYear = values[0]; this.selectTerm = values[1]; } } } </script> <style scoped lang="scss"> </style>Copy the code

Use the information

  1. IO /docs/#/zh-c… .

    Alternate values, that is, the values of the values field should be converted to {id: ‘XXX ‘, name:’ XXX ‘} format for easy id and display.

  2. :visible=”” To pass an object, because Vue rules that you cannot change the value of props in a child component. Of course, you can also use Vuex to implement, whichever is comfortable to use whichever.

  3. @values receives an array of selected values. Clicking ok will pass the value of the current scroll selected, regardless of whether the scroll wheel is slid or not.