最近在开发项目，由于项目是使用模板开发的，而不是用前后端分离开发的。但是就目前来说，很少有一款能够在移动端体验比较好的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>
打完收工！
标签：index,console,log,Vantui,value,---,HTML,false,name From： https://www.cnblogs.com/e0yu/p/17402229.html