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

第一步：

使用 Vant 时，可以通过 npm 进行安装：
npm i vant@latest-v2 -S

第二步：

按需引入你所需要的组件安装babel插件
npm i babel-plugin-import -D

第三步配置按需引入，在babel.config.js文件中加入下面代码

1.Toast轻提示

引入Toast组件

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

Toast(“请输入手机号”)
效果演示

Toast.success(“请输入手机号”)
效果演示

vantToast.fail(“请输入手机号”)
效果演示

2.Switch开关

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

开关

</van-switch>

定义开关的相关状态

3.Dialog弹出框

1. Vant UI 的 Dialog 组件简介

Dialog 是一个弹出框组件，用于在页面上显示提示信息、确认操作等。它支持多种类型（如普通对话框、确认框、自定义内容等），并且可以通过 Promise 的方式处理用户操作（如点击确认或取消按钮）。

2. 基本用法
引入 Dialog 组件
在 Vue 项目中，可以通过以下方式引入 Dialog 组件：

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

1. Dialog.alert方法使用

2. Dialog.confirm方法使用

3. 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：对话框完全关闭时触发的回调函数。

4. 自定义内容

如果需要显示更复杂的内容（如表单、图片等），可以使用 Dialog.open 方法，并传入一个 Vue 组件作为内容。

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('对话框已完全关闭');
  }
});

样式覆盖：可以通过 className 或 overlayClass 添加自定义样式，也可以通过全局样式覆盖默认样式。

4.Area省市区选择

van-area 组件简介：
van-area 是一个级联选择器，专门用于选择省市区（或省市区县）信息。它支持多级联动选择，并且可以通过事件回调获取用户选择的结果。

<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>

<span @click=“isPopup=true”>：点击时将 isPopup 设置为 true，从而触发弹出层显示。

{{area ? area : “请选择”}}：显示当前选择的地区信息，如果没有选择则显示“请选择”。

< van-popup v-model=“isPopup”>：弹出层组件，v-model 绑定的 isPopup 控制弹出层的显示与隐藏。

< van-area>：省市区选择组件。

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; // 关闭弹出层
    }
  }
}

vantSelectArea(vals)：这是 van-area 组件的 @confirm 事件的回调函数，当用户点击确认按钮时触发。

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; // 关闭弹出层
    }
  }
}