vue結(jié)合vant實現(xiàn)聯(lián)動效果
更新時間：2022年01月21日 12:41:21 作者：~小仙女~
這篇文章主要為大家詳細(xì)介紹了vue結(jié)合vant實現(xiàn)聯(lián)動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vant中提供的選擇器結(jié)合彈出框來實現(xiàn)聯(lián)動效果，供大家參考，具體內(nèi)容如下
1、用到的組件：Picker、Popup
2、引入：在main.js也好、頁面中也好全局也好，正確的引入；此處在main.js中按需引入；
main.js
import { Picker,Popup ?} from 'vant';
Vue.use(Picker).use(Popup )test.vue
<template>
? ? <div class='login'>
? ? ? ? <van-field?
?? ? ? ? ? ?readonly?
?? ? ? ? ? ?clickable?
?? ? ? ? ? ?label="城市"?
?? ? ? ? ? ?:value="value"?
?? ? ? ? ? ?placeholder="選擇城市"?
?? ? ? ? ? ?@click="showPicker = true"?
?? ? ? ? ?/>
? ? ? ? <van-popup v-model="showPicker" position="bottom">
? ? ? ? ? ? <van-picker?
?? ? ? ? ? ? ? ?show-toolbar?
?? ? ? ? ? ? ? ?:columns="columns"?
?? ? ? ? ? ? ? ?@cancel="showPicker = false"?
?? ? ? ? ? ? ? ?@confirm="onConfirm"
? ? ? ? ? ? ? ? @change="onChange" />
? ? ? ? </van-popup>
? ? </div>
</template>
<script>
? ? const citys = {
? ? ? ? '浙江': ['杭州', '寧波', '溫州', '嘉興', '湖州'],
? ? ? ? '福建': ['福州', '廈門', '莆田', '三明', '泉州']
? ? };
? ? export default {
? ? ? ? name: 'login',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? value:'',
? ? ? ? ? ? ? ? showPicker:false,
? ? ? ? ? ? ? ? columns: [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? values: Object.keys(citys),
? ? ? ? ? ? ? ? ? ? ? ? className: 'column1'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? values: citys['浙江'],
? ? ? ? ? ? ? ? ? ? ? ? className: 'column2',
? ? ? ? ? ? ? ? ? ? ? ? defaultIndex: 2
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? };
? ? ? ? },
? ? ? ? //方法集合
? ? ? ? methods: {
? ? ? ? ? ? onConfirm(value) {
? ? ? ? ? ? ? ? this.value = value[0]+'-'+value[1];
? ? ? ? ? ? ? ? this.showPicker = false;
? ? ? ? ? ? },
? ? ? ? ? ? onChange(picker, values) {
? ? ? ? ? ? ? ? picker.setColumnValues(1, citys[values[0]]);
? ? ? ? ? ? }
? ? ? ? },
? ? }
</script>之前使用antd，開始用vant之后發(fā)現(xiàn)一個不太好的地方，antd介紹一個組件會把他涉及的組件都寫入進(jìn)來，而vant只是引入該目錄要介紹的組件，不是很方便
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue2和vue3如何定義響應(yīng)式數(shù)據(jù)
這篇文章主要是來和大家一起討論一下vue2和vue3是如何定義響應(yīng)式數(shù)據(jù)的,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue3中響應(yīng)式的一些特殊處理，文中的示例代碼講解詳細(xì)，對我們深入了解Vue3有一定的幫助，需要的可以參考一下2023-04-04
vue.config.js?是一個可選的配置文件，如果項目的?(和?package.json?同級的)?根目錄中存在這個文件，那么它會被?@vue/cli-service?自動加載，本文重點介紹VUE前端vue.config.js簡介，感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考下2023-11-11
element-plus一個vue3.xUI框架(element-ui的3.x 版初體驗)
這篇文章主要介紹了element-plus一個vue3.xUI框架(element-ui的3.x 版初體驗),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
實現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue Router history模式的配置方法及其原理,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇vue.js循環(huán)radio的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue2.5通過json文件讀取數(shù)據(jù)的方法
本文通過實例代碼給大家詳細(xì)介紹了Vue2.5通過json文件讀取數(shù)據(jù)的方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-02-02