Vue——移动端UI库之cube-ui

cube-ui是由滴滴内部组件库精简提炼而来，
基于Vue.js 实现的精致移动端组件库。

cube-ui官方地址：https://didi.github.io/cube-ui

在命令符提示窗口中输入以下命令：
npm install cube-ui -S

安装完成后，需要进行webpack的配置，
这一点与之前的UI库不太一样，比较繁琐一些，配置的官方文档：
https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start

选择“普通编译”模式，注意官方文档的配置方案是针对Vue脚手架小于3版本，
我们使用的是Vue脚手架3以上版本，配置的内容是一样的，
只是配置的文件位置不太一样，

首先安装webpack-transform-modules-plugin插件，
在命令提示符窗口中输入以下命令：
npm install webpack-transform-modules-plugin -D




1.Toast轻提示组件
Toast组件官方文档：https://didi.github.io/cube-ui/#/zh-CN/docs/toast

2.Switch滑动开关
Switch组件官方文档：https://didi.github.io/cube-ui/#/zh-CN/docs/switch

3.ActionSheet操作列表
ActionSheet文档：https://didi.github.io/cube-ui/#/zh-CN/docs/action-sheet

4.CascadePicker组件
CascadePicker文档：https://didi.github.io/cube-ui/#/zh-CN/docs/cascade-picker
CascadePicker组件是级联选择器，用于实现多列选择之间的级联变化。
最常用的就是选择省、市、区。

此安装部分只针对于 vue-cli < 3 的情况

步骤1. NPM安装

$ npm install cube-ui --save

步骤2. 修改 package.json 并安装依赖

{
	  // webpack-transform-modules-plugin 依赖 transformModules
	  "transformModules": {
	    "cube-ui": {
	      "transform": "cube-ui/lib/${member}",
	      "kebabCase": true,
	      "style": {
	        "ignore": ["create-api", "better-scroll", "locale"]
	      }
	    }
	  },

	
	  "devDependencies": {
	    "webpack-transform-modules-plugin": "^0.4.3"
	  }


}

步骤3. 修改 webpack 配置 或 vue.config.js配置

1. 移动端UI库之cube-ui的Toast轻提示组件

1. 什么是 Toast？

Toast 是一种轻量级的提示组件，通常用于向用户展示简短的信息（如操作成功或失败的提示）。它会自动消失，不会阻塞用户的操作。

（1）引入 Toast 组件

注意事项：
如果你只在某个页面中使用 Toast，可以直接通过 this.$createToast 调用，而无需注册为全局组件。

2. 基本用法

以下是 Cube-UI 中 Toast 的基本用法：

Cube-UI 中 Toast 的参数说明：

1. txt ：提示内容，可以是字符串或 HTML 片段。
2. time ：提示框显示的时间（单位：毫秒），默认为 2000 毫秒。如果设置为 0，则不会自动关闭。
3. type ：提示框的类型（可选值：txt、loading、correct、forbidden 等）。
4. $events ：事件监听器，支持绑定自定义事件（如 timeout）。

3. 在 submit 方法中使用 Toast

methods: {
  submit() {
    if (this.ruleForm.cellphone.trim() === "") {
    
 <!-----------------Toast组件----------------------------->   
      this.$createToast({
        txt: "请输入手机号", // 提示内容
        time: 2000, // 显示时长
        type: "txt", // 提示类型
        $events: {
          timeout: () => {
            console.log("提示已超时");
          },
        },
      }).show();
 <!-----------------Toast组件----------------------------->   
 

      return;
    }
    if (this.ruleForm.password.trim() === "") {
    
  <!-----------------Toast组件----------------------------->     
      this.$createToast({
        txt: "请输入密码", // 提示内容
        time: 2000, // 显示时长
        type: "txt", // 提示类型
        $events: {
          timeout: () => {
            console.log("提示已超时");
          },
        },
      }).show();
 <!-----------------Toast组件-----------------------------> 
 
      return;
    }

    // 如果表单验证通过，执行其他逻辑
    console.log("表单提交成功！");
  },
}

使用说明：

1. 当用户未输入手机号或密码时，通过 this.$createToast 显示提示信息。

2. time 设置为 2000 毫秒（即 2 秒），提示信息会在 2 秒后自动消失。

3. $events.timeout 用于监听提示框超时事件。
当 Toast 的显示时间（time）结束时，会触发 timeout 事件。
在 timeout 回调函数中，你可以执行任何需要的操作，比如记录日志或更新状态。

1. $events 是可选的：如果你只需要简单的提示功能，可以直接使用 txt 和 time 配置项，而无需关心 $events。

2. $events 的作用：通过 $events，你可以监听 Toast 的生命周期事件（如 timeout），并在事件触发时执行自定义逻辑。

使用场景：当需要对 Toast 的显示和隐藏进行更精细的控制时，可以使用 $events。

4 不同类型的 Toast

Cube-UI 的 Toast 支持多种类型，可以通过 type 属性指定。

// 文本提示
this.$createToast({
  txt: "这是一个文本提示",
  type: "txt",
  time: 2000,
}).show();

// 加载提示
this.$createToast({
  txt: "加载中...",
  type: "loading",
  time: 0, // 不自动关闭
}).show();

// 成功提示
this.$createToast({
  txt: "操作成功",
  type: "correct",
  time: 2000,
}).show();

// 错误提示
this.$createToast({
  txt: "操作失败",
  type: "forbidden",
  time: 2000,
}).show();

5. 常用属性

以下是 Cube-UI 的 Toast 组件的常用属性及其作用：

==================================================

2. 移动端UI库之cube-ui的Switch滑动开关

1. 什么是 Switch？

Switch 是一种开关组件，通常用于在两种状态之间切换（如开启或关闭某种功能）。它的特点是操作直观，用户只需点击即可完成状态切换。
（1）引入 Switch 组件

注意事项：
如果你只在某个页面中使用 Switch，可以直接通过 标签使用，而无需注册为全局组件。

2. 基本用法

以下是 Cube-UI 中 Switch 的基本用法：

参数说明：

1. v-model ：绑定一个布尔值（true 或 false），表示开关的状态。
2. 内容：Switch 组件本身没有默认的文字内容，
如果需要显示文字，可以在标签内添加自定义文本

==================================================

3. 移动端UI库之cube-ui的ActionSheet操作列表

<div>
  <span @click="showCubeActionSheet">{{gender?gender:"请选择"}}</span>
</div>

<script>
import Vue from 'vue';

import {ActionSheet } from 'cube-ui';//移动端UI库之cube-ui
Vue.use(ActionSheet )

export default{
  name:'name-reg',
  data(){
    return{
         gender:"",
        
    }
  },

methods:{

 showCubeActionSheet(){
      this.$createActionSheet({
        title: '请选择性别',
        data: [ { content: '男'},{content: '女'} ],
        onSelect: (item, index) => {
          console.log(item,index)
          this.gender=item.content
        }
      }).show()
    }

}
   

  
}
</script>

​​创建 ActionSheet​​:

使用 this.$createActionSheet(options) 创建 ActionSheet
这个方法返回一个 ActionSheet 实例，需要调用 show() 方法才会显示

​​配置项（options）​​:

1. title (String): 操作列表顶部的标题

2. data (Array): 操作列表的数据源，每个元素是对象，包含：
				content (String): 显示的文本内容	其他可选属性（如 disabled, style 等）
				
3. onSelect (Function): 选择选项时的回调函数，参数：
			item (Object): 当前选中的选项对象
			index (Number): 当前选中项的索引

​​显示方法​​:

必须调用 .show() 方法才会显示操作列表

4. 移动端UI库之cube-ui的CascadePicker组件

1. 模板部分（Template）

<template>
  <div>
   
      选择地区
      <span @click="selectArea">{{ area ? area : "请选择" }}</span>
   
  </div>
</template>
在页面上展示一个文本“选择地区”，后面跟一个span元素，
用于显示已选择的地区或提示“请选择”。

当用户点击这个span时，触发selectArea方法，弹出地区选择器。

2. 脚本部分（Script）

导入依赖
import Vue from "vue"
import { CascadePicker } from "cube-ui"
Vue.use(CascadePicker)
import { provinceList, cityList, areaList } from
 '../../assets/js/data/cube-data/area'
 
导入Vue、Cube-UI的CascadePicker组件，并在Vue中使用该组件。

从本地文件导入省市区数据
（三个数组：省列表provinceList、城市字典cityList、区域字典areaList）。

整合数据为级联结构
const addressData = provinceList
addressData.forEach(province => {
  province.children = cityList[province.value]
  province.children.forEach(city => {
    city.children = areaList[city.value]
  })
})
console.log(addressData);

将省列表作为顶级数据addressData。

遍历每个省，根据省的value从cityList中取出该省对应的城市数组，
作为省的children。

再遍历每个城市，根据城市的value从areaList中取出该城市对应的区域数组，
作为城市的children。

这样，我们就构建了一个三级的树形结构：省 -> 市 -> 区。

组件定义
export default {
  name: "area-list",
  data() {
    return {
      area: "", // 存储选中的地区字符串（例如“广东省 广州市 天河区”）
      areaIndex: [0, 0, 0] // 记录当前选中的索引，用于设置级联选择器的默认选中项
    }
  },
  methods: {
    selectArea() {
      this.$createCascadePicker({
        title: '请选择地区', // 标题
        data: addressData, // 上面整合好的级联数据
        selectedIndex: this.areaIndex, // 设置默认选中项
        onSelect: (selectedVal, selectedIndex, selectedText) => {
          // 当用户选择后的回调
          // selectedVal: 每一级选中的值（value）组成的数组
          // selectedIndex: 每一级选中的索引组成的数组
          // selectedText: 每一级选中的文本（text）组成的数组
          console.log(selectedVal, selectedIndex, selectedText)
          // 将选择的文本数组用空格连接，赋值给area
          this.area = selectedText.join(" ")
          // 保存索引，以便下次打开时保持上一次的选中位置
          this.areaIndex = selectedIndex;
        },
        onCancel: () => { console.log("取消") } // 取消选择的回调
      }).show() // 显示选择器
    }
  }
}

3. 工作原理

​​(1) 数据整合​​：我们首先将分开的省、市、区数据**组合成一个三级联动的数据结构。**每个省对象添加children属性，其值为该省下的城市数组；每个城市对象再添加children属性，其值为该城市下的区域数组。这样就形成了一个嵌套的树形结构。

(2)打开选择器​​：当用户点击span时，调用selectArea方法，使用this.$createCascadePicker创建并显示级联选择器。

​​(3)设置默认选中​​：通过selectedIndex属性设置选择器的默认选中项，初始为[0,0,0]（即第一级的第一个、第二级的第一个、第三级的第一个）。当用户选择后，我们会保存选中的索引，下次打开时就会定位到上次选中的位置。

(4)​​选择完成​​：用户滑动选择每一级，点击确定后触发onSelect回调。在回调中，我们将选中的文本数组（如[‘广东省’,‘广州市’,‘天河区’]）用空格连接成字符串（“广东省 广州市 天河区”）并保存。同时保存选中的索引（areaIndex）。

(5)​​取消选择​​：用户点击取消时，触发onCancel回调，这里只打印了日志。

4. 注意事项

数据整合是关键：必须确保省市区数据的正确关联。cityList是一个以省的值（province.value）为键的对象，每个键对应的值是城市数组。areaList同理，以城市的值（city.value）为键。

索引（areaIndex）的保存是为了记住用户的上一次选择，这样下次打开选择器时可以直接定位到上次选中的位置。

selectedText是用户看到的文本数组，而selectedVal是实际的值（value）数组。在这个例子中，我们只需要显示文本，所以用了selectedText。