vue使用vant组件库中的picker选择器经行地点选择

最新推荐文章于 2024-04-16 11:02:06 发布

不知道起个什么名字好

最新推荐文章于 2024-04-16 11:02:06 发布

阅读量443

点赞数

文章标签： vue.js javascript 前端 html

本文链接：https://blog.csdn.net/qq_45098695/article/details/125043377

版权

使用vant组件库中的picker选择器经行地点选择
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>

<head>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <meta charset="utf-8">

    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <title></title>
</head>

<body>
    <div id="app">
        <van-cell-group>
            <van-field v-model="value" readonly label="地点" placeholder="选择地点"></van-field>
        </van-cell-group>
        <van-button type="primary" @click="click01" >选择地点</van-button>
        <van-popup v-model="show" position="bottom">
            <van-picker title="请选择城市" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel">
            </van-picker>
        </van-popup>


    </div>

</body>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                value: '',
                show: false,
                columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            }
        },
        methods: {
            click01() {
                this.show = true;
            },
            onConfirm(index) {
                this.value=index
                this.show = false;
            },
            onCancel() {
                vant.Toast('取消');
                this.show = false;
            },
        },
    })
</script>

</html>

不知道起个什么名字好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue使用vant组件库中的picker选择器经行地点选择

使用vant组件库中的picker选择器经行地点选择代码实现<!DOCTYPE html><html><head>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />  <s
复制链接

扫一扫