Vantui---在HTML中引入使用

最近在开发项目，由于项目是使用模板开发的，而不是用前后端分离开发的。但是就目前来说，很少有一款能够在移动端体验比较好的JS框架，特别是在移动端的下拉选择，以及三级联动的处理。

想来想去，想到了有赞的UI框架，看是否支持html引入使用，经过测试是可行的：

文档地址：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/popup

代码地址：

https://gitee.com/meiyouzhanghao/vantui

 示例： 

具体使用代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VantUI</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="vant.min.css">
</head>
<body>

<div id="app">
    <van-button type="primary" size="small" @click="handleShowPicker">显示Picker</van-button>
    <van-button type="primary" size="small" @click="handleShowSheet">显示Sheet</van-button>
    <van-popup v-model="showPicker" position="bottom">
        <van-picker title="标题" show-toolbar :columns="columns" @confirm="handleConfirm" @cancel="handleCancel" @change="handleChange"/>
    </van-popup>
    <van-action-sheet v-model="showSheet" :actions="actions" cancel-text="取消" close-on-click-action @select="handleSelect" />
</div>

<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript" src="vant.min.js"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    data:{
        showPicker: false,
        showSheet: false,
        columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
        actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]
    },
    created:function(){},
    mounted(){},
    methods:{
        handleShowPicker(){
            this.showPicker = true;
        },
        handleShowSheet(){
            this.showSheet = true;
        },
        handleConfirm(value,index){
            console.log(`当前值：${value}, 当前索引：${index}`);
            console.log(value);
        },
        handleCancel(){
            console.log('选择了取消');
            this.showPicker = false;
        },
        handleChange(picker, value, index){
            // console.log(`当前值：${value}, 当前索引：${index}`);
        },
        handleSelect(item){
            console.log(item);
        },
        showToast(msg){
            vant.Toast(msg);
        },
    }
});
</script>
</body>
</html>

打完收工！

posted @ 2023-05-15 16:10  帅到要去报警  阅读(544)  评论(0)  编辑  收藏  举报