mint-ui Picker单个的使用方式

以前词不达意,现在言不由衷

 <div v-if="backPopupVisible" @click="backPopupVisible = false"  class="picBox">
    <mt-picker style="width: 100%" :slots="backSlots" value-key="text" showToolbar ref="picker" @change="backPopuphandleConfim">
        <span>取消</span>
        <span @click="backPickerSubBtn">确认</span>
    </mt-picker>
</div>

data() {
            return {
                value: '',
                checklist: [' '],
                backSlots: [ { flex: 1,
                        defaultIndex: '',
                        values: [],
                        className: "slot1",
                        textAlign: "center"
                    },
                ],
                backPopupVisible: false,
                list: list,
                backval: [{value: '', text: ''}],
                back: null,

            }
        },

methods: {
           
            // 银行名称
            backPopuphandleConfim(picker, values) {
                this.backval = values;
            },
            // 银行名称picker 确认
            backPickerSubBtn() {
                this.back = this.backval[0].text;
                for (var i = 0, len =  this.list; i < len.length; i++) {
                    if (len[i].text == this.back) {
                        this.backSlots[0].defaultIndex = i;
                    }
                }
            },
           

这样就可以了

<template>
    <div class="bindingBank">
        <div v-if="backPopupVisible" @click="backPopupVisible = false"  class="picBox">
            <mt-picker style="width: 100%" :slots="backSlots" value-key="text" showToolbar ref="picker" @change="backPopuphandleConfim">
                <span>取消</span>
                <span @click="backPickerSubBtn">确认</span>
            </mt-picker>
        </div>
    </div>
</template>

<script>
    import list from '../../api/name'
    import cityData from '../../api/city'
    import { Checklist } from 'mint-ui';
    export default {
        data() {
            return {
                value: '',
                checklist: [' '],
                backSlots: [ { flex: 1,
                        defaultIndex: '',
                        values: [],
                        className: "slot1",
                        textAlign: "center"
                    },
                ],
                backPopupVisible: false,
                list: list,
                backval: [{value: '', text: ''}],
                back: null,

                cityPopupVisible: false,
                citySlots: [ { flex: 1, values: [], className: 'slot1', textAlign: 'right' },
                    { divider: true, content: '-', className: 'slot2' }, 
                    { flex: 1, values: [], className: 'slot3', textAlign: 'left' } ],
                city: null,

                num: 1,
                chooseMonth: null,
                chooseDate: null,
            }
        },
        mounted() {
            this.backSlots[0].values = this.list;
            this.citySlots[0].values = cityData.provList;
            this.citySlots[2].values = cityData.cityMap["北京"]
            this.chooseMonth = cityData.provList[0].text;
            this.chooseDate = cityData.cityMap["北京"][0].text;
            
        },
        methods: {
            cityBox() {
                this.cityPopupVisible = true;
            },
            // 银行名称
            backPopuphandleConfim(picker, values) {
                this.backval = values;
            },
            // 银行名称picker 确认
            backPickerSubBtn() {
                this.back = this.backval[0].text;
                for (var i = 0, len =  this.list; i < len.length; i++) {
                    if (len[i].text == this.back) {
                        this.backSlots[0].defaultIndex = i;
                    }
                }
            },
        },
    }
</script>

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

在最后附上我的QQ: 2489757828 有问题的话可以找我一同探讨

我的私人博客: 李大玄