Vue移动端UI库之vant安装使用教程

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开关
Switch官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/switch
3.Dialog弹出框
Dialog官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/dialog
4.Area省市区选择
Area官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/area
省市区三级联动选择，通常与弹出层组件配合使用。
弹出层官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/popup
首先需要下载省市区的数据源，下载地址：https://github.com/youzan/vant/blob/dev/src/area/demo/area.js

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

<!-- 开关 -->
 <van-switch 
			 v-model="isOpin" 
				 size="60px"
 				 active-color="red" 
 			 inactive-color="blue"  >

开关

</van-switch>

定义开关的相关状态

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

1. title：对话框标题，默认值为 ''。
2. message：对话框内容，可以是字符串或 HTML。
3. theme：按钮主题，可选值为 default 或 round-button。
4. showCancelButton：是否显示取消按钮，默认值为 false。
5. showConfirmButton：是否显示确认按钮，默认值为 true。
6. confirmButtonText：确认按钮的文本，默认值为 '确认'。
7. cancelButtonText：取消按钮的文本，默认值为 '取消'。

1. className：自定义类名，用于添加额外的样式。
2. overlayClass：遮罩层的自定义类名。
3. overlayStyle：遮罩层的自定义样式。

1. beforeClose：在关闭对话框之前触发的回调函数，可以用于阻止关闭。
2. onOpened：对话框完全打开时触发的回调函数。
3. onClosed：对话框完全关闭时触发的回调函数。

Dialog.open({
  title: '自定义内容',
  message: '<div>这里是自定义的 HTML 内容</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(); // 关闭对话框
    } else {
      // 取消操作
      console.log('取消操作');
      done(); // 关闭对话框
    }
  },
  onOpened() {
    console.log('对话框已完全打开');
  },
  onClosed() {
    console.log('对话框已完全关闭');
  }
});

<template>
  <div>
    <div>
      请选择地区：<span @click="isPopup=true">{{area ? area : "请选择"}}</span>
    </div>

    <van-popup v-model="isPopup">
    
      <van-area
        title="选择地区1："
        :area-list="areaList"
        @cancel="isPopup=false"
        @confirm="vantSelectArea"
      />
      
    </van-popup>
  </div>
</template>

1. title="选择地区1："：设置标题。

2. :area-list="areaList"：绑定地区数据，areaList 是一个包含省市区数据的对象。
3. @cancel="isPopup=false"：点击取消按钮时，关闭弹出层。

4. @confirm="vantSelectArea"：点击确认按钮时，触发 vantSelectArea 方法。

data() {
  return {
    area: "", // 当前选择的地区
    areaList: AreaList, // 地区数据
    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; // 关闭弹出层
    }
  }
}

1. vals：用户选择的地区信息数组。

2. if (vals.length > 0)：确保用户有选择的地区信息。

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

4. for (let i = 0; i < vals.length; i++)：遍历 vals 数组，将每个地区的名称拼接到 this.area 中。

5. this.area += "" + vals[i].name：将每个地区的名称拼接起来。这里使用了 "" + 来确保拼接的是字符串。

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

7. console.log(this.area)：在控制台打印最终选择的地区名称。

8. this.isPopup = false：关闭弹出层。

methods: {
  vantSelectArea(vals) {
    if (vals.length > 0) {
      this.area = vals.map(val => val.name).join(" "); // 使用 map 和 join 拼接字符串
      console.log(this.area);
      this.isPopup = false; // 关闭弹出层
    }
  }
}