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é)合彈出框來實(shí)現(xiàn)聯(lián)動(dòng)效果，供大家參考，具體內(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)一個(gè)不太好的地方，antd介紹一個(gè)組件會(huì)把他涉及的組件都寫入進(jìn)來，而vant只是引入該目錄要介紹的組件，不是很方便
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue2和vue3如何定義響應(yīng)式數(shù)據(jù)
這篇文章主要是來和大家一起討論一下vue2和vue3是如何定義響應(yīng)式數(shù)據(jù)的,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue3中響應(yīng)式的一些特殊處理，文中的示例代碼講解詳細(xì)，對(duì)我們深入了解Vue3有一定的幫助，需要的可以參考一下2023-04-04
vue.config.js?是一個(gè)可選的配置文件，如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件，那么它會(huì)被?@vue/cli-service?自動(dòng)加載，本文重點(diǎn)介紹VUE前端vue.config.js簡(jiǎn)介，感興趣的朋友跟隨小編一起看看吧2023-01-01
Vue3+Elementplus實(shí)現(xiàn)面包屑功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-11-11
element-plus一個(gè)vue3.xUI框架(element-ui的3.x 版初體驗(yàn))
這篇文章主要介紹了element-plus一個(gè)vue3.xUI框架(element-ui的3.x 版初體驗(yàn)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue Router history模式的配置方法及其原理,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇vue.js循環(huán)radio的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue2.5通過json文件讀取數(shù)據(jù)的方法
本文通過實(shí)例代碼給大家詳細(xì)介紹了Vue2.5通過json文件讀取數(shù)據(jù)的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-02-02