Vant是有贊開源的一套基于Vue 2.0的移動端的組件庫。
官方地址：https://develop365.gitlab.io/vant/zh-CN/home/

1.Toast輕提示
Toast官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/toast
2.Switch開關(guān)
Switch官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/switch
3.Dialog彈出框
Dialog官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/dialog
4.Area省市區(qū)選擇
Area官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/area
省市區(qū)三級聯(lián)動選擇，通常與彈出層組件配合使用。
彈出層官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/popup
首先需要下載省市區(qū)的數(shù)據(jù)源，下載地址：https://github.com/youzan/vant/blob/dev/src/area/demo/area.js

import { Toast } from 'vant';
Vue.use(Toast);

<!-- 開關(guān) -->
 <van-switch 
			 v-model="isOpin" 
				 size="60px"
 				 active-color="red" 
 			 inactive-color="blue"  >

開關(guān)

</van-switch>

定義開關(guān)的相關(guān)狀態(tài)

import { Dialog } from 'vant';
Vue.use(Dialog);

1. title：對話框標題，默認值為 ''。
2. message：對話框內(nèi)容，可以是字符串或 HTML。
3. theme：按鈕主題，可選值為 default 或 round-button。
4. showCancelButton：是否顯示取消按鈕，默認值為 false。
5. showConfirmButton：是否顯示確認按鈕，默認值為 true。
6. confirmButtonText：確認按鈕的文本，默認值為 '確認'。
7. cancelButtonText：取消按鈕的文本，默認值為 '取消'。

1. className：自定義類名，用于添加額外的樣式。
2. overlayClass：遮罩層的自定義類名。
3. overlayStyle：遮罩層的自定義樣式。

1. beforeClose：在關(guān)閉對話框之前觸發(fā)的回調(diào)函數(shù)，可以用于阻止關(guān)閉。
2. onOpened：對話框完全打開時觸發(fā)的回調(diào)函數(shù)。
3. onClosed：對話框完全關(guān)閉時觸發(fā)的回調(diào)函數(shù)。

Dialog.open({
  title: '自定義內(nèi)容',
  message: '<div>這里是自定義的 HTML 內(nèi)容</div>',
  theme: 'round-button',
  showConfirmButton: true,
  showCancelButton: true,
  confirmButtonText: '確定',
  cancelButtonText: '取消',
  confirmButtonColor: '#007aff',
  cancelButtonColor: '#999',
  className: 'custom-dialog',
  overlayClass: 'custom-overlay',
  overlayStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  beforeClose(action, done) {
    if (action === 'confirm') {
      // 確認操作
      console.log('確認操作');
      done(); // 關(guān)閉對話框
    } else {
      // 取消操作
      console.log('取消操作');
      done(); // 關(guān)閉對話框
    }
  },
  onOpened() {
    console.log('對話框已完全打開');
  },
  onClosed() {
    console.log('對話框已完全關(guān)閉');
  }
});

<template>
  <div>
    <div>
      請選擇地區(qū)：<span @click="isPopup=true">{{area ? area : "請選擇"}}</span>
    </div>

    <van-popup v-model="isPopup">
    
      <van-area
        title="選擇地區(qū)1："
        :area-list="areaList"
        @cancel="isPopup=false"
        @confirm="vantSelectArea"
      />
      
    </van-popup>
  </div>
</template>

1. title="選擇地區(qū)1："：設(shè)置標題。

2. :area-list="areaList"：綁定地區(qū)數(shù)據(jù)，areaList 是一個包含省市區(qū)數(shù)據(jù)的對象。
3. @cancel="isPopup=false"：點擊取消按鈕時，關(guān)閉彈出層。

4. @confirm="vantSelectArea"：點擊確認按鈕時，觸發(fā) vantSelectArea 方法。

data() {
  return {
    area: "", // 當前選擇的地區(qū)
    areaList: AreaList, // 地區(qū)數(shù)據(jù)
    isPopup: false // 控制彈出層的顯示與隱藏
  };
},

methods: {
  vantSelectArea(vals) {
    console.log(vals);
    if (vals.length > 0) {
      this.area = "";
      for (let i = 0; i < vals.length; i++) {
        this.area += "" + vals[i].name;
      }
      this.area = this.area.slice(1); // 去掉第一個字符（多余的空格）
      console.log(this.area);
      this.isPopup = false; // 關(guān)閉彈出層
    }
  }
}

1. vals：用戶選擇的地區(qū)信息數(shù)組。

2. if (vals.length > 0)：確保用戶有選擇的地區(qū)信息。

3. this.area = ""：初始化 area，清空之前的值。

4. for (let i = 0; i < vals.length; i++)：遍歷 vals 數(shù)組，將每個地區(qū)的名稱拼接到 this.area 中。

5. this.area += "" + vals[i].name：將每個地區(qū)的名稱拼接起來。這里使用了 "" + 來確保拼接的是字符串。

6. this.area = this.area.slice(1)：去掉第一個字符（多余的空格）。因為拼接時會多出一個空格，所以需要去掉。

7. console.log(this.area)：在控制臺打印最終選擇的地區(qū)名稱。

8. this.isPopup = false：關(guān)閉彈出層。

methods: {
  vantSelectArea(vals) {
    if (vals.length > 0) {
      this.area = vals.map(val => val.name).join(" "); // 使用 map 和 join 拼接字符串
      console.log(this.area);
      this.isPopup = false; // 關(guān)閉彈出層
    }
  }
}