vue結(jié)合vant實(shí)現(xiàn)聯(lián)動(dòng)效果
更新時(shí)間：2022年01月21日 12:41:21 作者：~小仙女~
這篇文章主要為大家詳細(xì)介紹了vue結(jié)合vant實(shí)現(xiàn)聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
vant中提供的選擇器結(jié)合彈出框來(lái)實(shí)現(xiàn)聯(lián)動(dòng)效果，供大家參考，具體內(nèi)容如下
1、用到的組件：Picker、Popup
2、引入：在main.js也好、頁(yè)面中也好全局也好，正確的引入；此處在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)一個(gè)不太好的地方，antd介紹一個(gè)組件會(huì)把他涉及的組件都寫入進(jìn)來(lái)，而vant只是引入該目錄要介紹的組件，不是很方便
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用，所以組件間的相互通信是非常重要的，這篇文章主要介紹了vue中組件間通信的6種方式,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue3中的ref和reactive定義數(shù)組方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了VUE安裝和使用vant組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，本文通過(guò)實(shí)例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
前端在el-dialog中嵌套多個(gè)el-dialog代碼實(shí)現(xiàn)
最近使用vue+elementUI做項(xiàng)目,使用過(guò)程中很多地方會(huì)用到dialog這個(gè)組件,有好幾個(gè)地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個(gè)el-dialog代碼實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要為大家介紹了Vue 的router路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue-cli實(shí)現(xiàn)多頁(yè)面多路由的示例代碼
本篇文章主要介紹了vue-cli實(shí)現(xiàn)多頁(yè)面多路由的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了Vue基于NUXT的SSR詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了詳解vue掛載到dom上會(huì)發(fā)生什么，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01