最近在開發項目，由於項目是使用模板開發的，而不是用前後端分離開發的。但是就目前來說，很少有一款能夠在移動端體驗比較好的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>
打完收工！