Vant 中 底部弹窗(picker)选择数据

Vant 中 底部弹窗(picker)选择数据

{bookId: "01", text: "论语"}, 数据中必须有 text 属性

<template>
    <div>
        <van-cell is-link @click="getBook">Vant 展示弹出层(fei)</van-cell>
        <van-popup v-model="bookShowPicker" position="bottom">
            <van-picker title="图书分类"
                        show-toolbar
                        :columns="bookList"
                        @cancel="bookShowPicker = false"
                        @confirm="confirmBook">
            </van-picker>
        </van-popup>
    </div>
</template>

<script>

    /* 这是 vant */
    import Vue from 'vue';
    import Vant, { Dialog } from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);
    /* 这是 vant */
    
    export default {
        name: "mobile-study01",
        data() {
            return {
                bookShowPicker: false,
                bookList: []
            }
        },
        methods: {
            getBook() {
                this.bookShowPicker = true;
                this.bookList = [
                    {bookId: "01", text: "论语"},
                    {bookId: "02", text: "史记"},
                    {bookId: "03", text: "左传"},
                    {bookId: "04", text: "汉书"},
                    {bookId: "05", text: "战国策"},
                ];
            },
            confirmBook(val) {
                console.log(val.bookId, val.text, arguments);
                this.bookShowPicker = false;
            }
        },
    }
</script>