The UI framework uses VantUI. Vant does not provide a drop-down selector like ElementUI, so it is necessary to use Vant’s Cell, popup, and picker components to encapsulate a selector component.

encapsulation

<template>
    <div class="ss-picker">
        <van-cell
            :title="label"
            :value="value"
            is-link
            @click="open"
        />
        <van-popup
            v-model="show"
            :close-on-click-overlay="false"
            position="bottom"
        >
            <van-picker
                :columns="columns"
                :value-key="valueKey"
                show-toolbar
                @cancel="cancel"
                @confirm="confirm"
            />
        </van-popup>
    </div>
</template>

<script>
export default {
    name: "ssPicker".model: {
        prop: "selectValue".event: "select"
    },
    props: {
        selectValue: {
            type: Object,},show: {
            type: Boolean.default: false
        },
        label: {
            type: String,},value: {
            type: String,},columns: {
            type: Array,},valueKey: {
            type: String.default: "text"}},methods: {
        open() {
            this.$emit("open")},close() {
            this.$emit("update:show".false)},/ / confirm
        confirm(val) {
            this.$emit("select", val)
            this.close()
        },
        / / cancel
        cancel() {
            this.close()
        },
    }
}
</script>
Copy the code

Global registration

Register this component globally in main.js, so you don’t have to import it on every page and use it directly on the page where it is needed.

import ssPicker from "@/components/ssPicker/index.vue"
Vue.component("ssPicker", ssPicker)
Copy the code

Using document

Props

parameter instructions type The default value
show Van – popup displays Boolean false
label Van-cell left title String There is no
value Van-cell Data on the right String There is no
columns Van-picker’s list of data Array There is no
valueKey The key name corresponding to the van-picker option text String text

Events

The event name instructions The callback parameter
open Open the van – the popup There is no
select Click van-Picker to select the data Currently selected row data

Method of use

If you are simply selecting post-binding data, you can use v-Model binding directly.

If you need to do something more complicated, you can use the @select binding method, which returns what the picker selected.

In the following demo, both v-model and @select work the same way. Assign the selected value to this.picker.active, and you can keep v-model without using @select.

Demo

<ssPicker
    v-model="picker.active"
    :columns="picker.list"
    :show.sync="picker.show"
    :value="picker.active.text? Picker.active. text:' Please select test content '"
    valueKey="text"
    label="Test content"
    @open="picker.show=true"
    @select="selectPicker"
>
</ssPicker>
Copy the code
export default {
    data() {
        return {
            / / selector
            picker: {
                show: false.active: {},
                list: []},}},methods: {
        selectPicker(val){
            this.picker.active = val
        }
    }
}
Copy the code

conclusion

The packaging time of this component is relatively short, and there are still a lot of unfinished areas. Let’s find some time to optimize it later. If you have any questions, please contact us.