常见的vue技术栈组件库

● 移动端（Vant, Cube-UI, NutUI ）
● PC端 （ element-ui, Ant Design of Vue, iView）
● 小程序: uniapp

组件库的基本使用流程

  1. 根据项目的实际情况，进行技术选型： 用什么技术栈，用什么组件库
  2. 去对应的官方上查文档
  3. 遇到困难时：
    a. 在官网上找 常见问题(一般在网页的最底部)
    b. 在社区/搜索引擎 找答案
    c. 去提issue ，面对面直接向组件的作者提问
    d. 改源码

小结

● vue技术栈有很多的组件库（一般大厂才会维护组件库）
● 组件库要分移动端和PC端
● 学习组件库的基本方法是查文档，遇到困难时提 issue

创建项目并引入element组件库

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官方地址：https://element.eleme.cn/#/zh-CN

ElementPlus(适配Vue3.0的版本)官方地址： https://element-plus.org/#/zh-CN

步骤

  • 用vue create 命令创建项目
  • 根据elementUI官网中的说明来安装和使用组件

用vue-cli创建vue项目

vue create 文件夹名

找一个合适的文件夹，打开cmd窗口，用vue create 创建项目

vue create element-demo
-------------------------------
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features
注意：
  1. vue create 命令会自动创建文件夹，这样就不需要我们手动创建了
  2. 选择Manually select features配置
  3. 如果vue create 命令不能正常运行，要先安装脚手架工具， 对应的命令是： npm i -g @vue/cli

cd 项目名再启动

上一步的命令做了两件事：创建文件夹，把示例项目的代码下载到这个文件夹中，为了运行项目，我们还需要进入项目目录下，并运行命令。 对应的命令是：

cd element-demo # 进入项目目录
npm run serve # 运行命令

把ElementUI添加到项目中

按全局引入的方式，一共分成两步：

  1. 安装 elementUI
  2. 在项目的main.js中引入使用
在项目中安装elementUI
npm i element-ui -S

-S: 是–save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。
-S: 是可以省略不写的。
如果要安装开发依赖，则要加 -D。

main.js中引入并注册
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

小结

  1. elementui是做PC项目的首选
  2. 组件库一般都会有配套使用教程，基本套路是：
    a. npm i 安装
    b. 在main.js中导入，并使用

table组件-基础使用

<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  }
}
</script>

在这里插入图片描述

学习组件的使用

数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

  1. 行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。
  2. 列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握
    ○ label：决定当前列显示出的标题
    ○ prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名
    prop=“date”。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。
    ○ width: 用来设置列的宽度。如果不设置，它会自适应。

小结

在el-table使用data属性
在el-table-item上使用prop属性

table组件-自定义列-插槽

我们需要在对应的列中，使用template标签包裹我们自定义渲染的内容，其实用的就是插槽的机制

// 省略其它....
<el-table-column label="操作" width="100">
    <template>
      <el-button size="small" type="danger">删除</el-button>
    </template>
</el-table-column>

小结

要自定义内容：

  1. 删除prop属性
  2. 用插槽

table组件-自定义列-作用域插槽

用作用域插槽拿到数据，再使用函数做转换输出即可
要求 : 后端返回的数据中，只有一个指代性别的编码，为了方便用户查看，需要我们把1转换成男，0转换成女。

<el-table-column label="性别">
  <!-- 
	1. slot-scope是固定写法
  2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
  传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
  3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
  -->
    <template slot-scope="scope">
      {{ transGender(scope.row.gender) }}
    </template>
</el-table-column>

<script>
  export default {
	  tableData: [{
	       date: '2016-05-02',
	       name: '王小虎',
	       address: '上海市普陀区金沙江路 1518 弄',
	  		 gender: 0
	      }, {
	        date: '2016-05-04',
	        name: '王小虎',
	        address: '上海市普陀区金沙江路 1517 弄',
	        gender: 1
	      }, {
	        date: '2016-05-01',
	        name: '王小虎',
	        address: '上海市普陀区金沙江路 1519 弄',
	        gender: 1
	      }],
      methods: {
        transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: '男',
            0: '女'
          }
          return genderList[genderCode]
        }
      }
  }
</script>

<el-table-column label="性别">
  <!-- 
	1. slot-scope是固定写法
  2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
  传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
  3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
  -->
    <template slot-scope="scope">
      {{ scope.row.gender === 1 ?  '女' : '男'}}
    </template>
</el-table-column>

<script>
  export default {
	  tableData: [{
	       date: '2016-05-02',
	       name: '王小虎',
	       address: '上海市普陀区金沙江路 1518 弄',
	  		 gender: 0
	      }, {
	        date: '2016-05-04',
	        name: '王小虎',
	        address: '上海市普陀区金沙江路 1517 弄',
	        gender: 1
	      }, {
	        date: '2016-05-01',
	        name: '王小虎',
	        address: '上海市普陀区金沙江路 1519 弄',
	        gender: 1
	      }]
      }
  }
</script>

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

小结

  1. 场景：直接使用prop只能渲染文本，通过prop不能直接渲染的时，我们需要自定义内容渲染
  2. 机制：作用域插槽
    在这里插入图片描述
  3. 如何拿当前行的完整对象数据？ scope.row

pagination-翻页组件

<template>
    <!-- 
      layout： 决定整体的布局，关键字有自己的特殊含义
      total: 一共几条数据
      page-size: 一页几条
     -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next,jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[1, 3, 7, 100]"
      :page-size="50"
      :total="551">
    </el-pagination>
</template>

<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  data() {
    return {
      currentPage4: 6
    };
  }
}
</script>

<style scoped>
/deep/ .el-pager li.active{
  background-color: red !important;
}
</style>

● layout中的关键字有自己的含义；
● total用来设置数据的总条数
● :page-size="50"默认每页50条数据

翻页事件

当用户点击页面进行翻页时就会触发current-change 事件

<template>
  <div>
    <h1>Pagination</h1>
    <el-pagination
      layout="prev, pager, next"
      :total="1000"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    // 把当前点击的页数给传进来
    pageChange(page) {
      console.log(page)
    }
  }
}
</script>

注意：

  1. 事件名不是驼峰命名法，而是采用kebab-case(昵称：烤串命名法)
  2. 它会自动接收页码

小结

  1. 翻页按钮的结构 ：layout 按照我们传入的结构顺序依次渲染
  2. 分页逻辑：总页数 = 总条数（:total） / 每页的条数(:page-size)
  3. 事件： @current-change
  4. 翻页组件一般和表格一起使用，但是，它并不决定表格的数据来源。

Form表单组件-基本使用

用户登录表单-数据双向绑定

<template>
  <div class="form-container">
    <el-form label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
  .form-container{
    width: 600px;
  }
</style>

Form表单组件-表单验证

基本步骤-共三步

  1. 定义验证规则。data()中按格式定义规则
  2. 在模板上做属性配置来应用规则（三个配置）
    给表单设置 rules 属性传入验证规则
    给表单设置model属性传入表单数据
    给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
  3. 手动兜底验证

步骤1-定义表单验证规则

在 data 中,补充定义规则。

格式：

data() {
  return {
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
		}
  }
}

示例


  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }

实操代码

data () {
    return {
      // 表单验证规则，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规则
      
      rules: {
        // 字段名：mobile就表示要验证的 属性
        // 值: 是一个数组。数组中的每一项表示一条规则。
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },

注意：

● rules中的属性名与表单数据项中的属性名必须是一致的。

步骤2-模板中的配置

内容：

  1. 给 el-form 组件绑定 model 为表单数据对象
  2. 给 el-form 组件绑定 rules 属性配置验证规则 :model="form" :rules="rules"
  3. 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称prop="mobile"
<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

步骤3-手动兜底验证

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
		 // 验证失败
	}
})

说明：

● validate 方法是表单组件自带的，用来对表单内容进行检验。
● 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

代码-模板

<el-form label-width="80px" 
   ref="form"
   :model="form"
   :rules="rules">

添加ref来引用el-form组件。

代码

在做提交时进行手动兜底验证，如果通过了验证

doLogin () {
  alert('我可以做登录了')
},
submit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })
}

小结

步骤

  1. 定义验证规则(按element-ui的要求来)
  2. 配置模板，应用规则
    给表单设置 rules 属性传入验证规
    给表单设置model属性传入表单数据
    给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
  3. 手动兜底验证

注意

下面三个地方的属性名必须一致
在这里插入图片描述

Form表单组件-表单验证-自定义检验规则

rules:{
    属性名1: [
      
      { 
        // 注意参数顺序
        validator: function (rule, value, callback) {
      		// rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        	//         例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }
    ]
}

rules: {
  name: [{required: true, message:'必须要填入', triggle: 'blur'}],
  code: [
      {
        validator:(rule, value, callback)=>{
          console.log(rule, value, callback)
          if(value === '123456') {
            callback(new Error('密码不能为123456'))
          } else {
            callback()
          }
      	},
        triggle: 'blur'
      },
      {min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
      {required: true, message:'必须要填入', triggle: 'blur'},
  ]
}

小结

● 自定义规则可以让校验逻辑更加灵活，它的格式是固定的
● callback必须调用

Form表单组件-重置表单清理校验痕迹

校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。

this.$refs.form组件的引用.resetFields()

这个方法可以

  1. 清理校验痕迹
  2. 恢复表单默认数据

Tree树形组件

什么是树形数据

有一些业务场景在描述主体关系的时候必须使用树形数据，比如：我们常见的家庭成员关系图，公司里的组织架构等，要描述这样的业务场景，与之对应的，我们就得给出树形结构的数据
在这里插入图片描述

Tree组件基础使用

<template>
  <el-tree :data="data"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }]
    }
  }
}
</script>

在这里插入图片描述
上面我们就完成了一个基础树形组件的渲染，依赖一个data属性即可，data属性传入的就是树状结构

注意：

● 数据项中label和children是关键字，不可随意改动。tree组件用它们来显示内容

配置自定义渲染字段

tree组件渲染节点title默认使用的是数据中的label属性，识别子节点默认使用的是children属性，我们尝试把data里的属性名换一下，例如：label换成name，children换成childList，就会发现渲染失败了。

如果你非要去自定义这个两个关键字：label和children的话，就需要用到props属性了。

如下：

<el-tree :data="data" :props="defaultProps"></el-tree>

defaultProps:{
    label:'name',
    children:'childList'
}

获取特定树形节点数据

当我们点击某个树形子节点的时候，如何获取到当前点击这项节点对应的数据？

监听时间：@node-click="handleNodeClick"

<template>
  <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
</template>

<script>
  export default {
     methods:{
       // 共三个参数，
       // 依次为：
       //   - 传递给 data 属性的数组中该节点所对应的对象
       //   - 节点对应的 Node
       //   - 节点组件本身
        handleNodeClick(a,b,c){
          console.log(a,b,c)
        }
      }
  }
</script>

数组转化成树(难点)

方法一:安装插件
npm install array-to-tree -save
import arrayToTree from "array-to-tree";
data中的自定义数组 = arrayToTree(获取请求的数组, { parentProperty: '父级id', customID: '二级id'});
引用的外部JSON数据：

{"list": 
  [
    {"id":1,"label": "中学","parent_id":0},
    {"id":2,"label": "初一","parent_id":1},
    {"id":3,"label": "初二","parent_id":1},
    {"id":4,"label": "小学","parent_id":0}
]}

文件中使用的部分：

<template>
    <div id="app">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
</template>
<script>
import axios from "axios";
import arrayToTree from "array-to-tree";
export default {
    data() {
        return {
            data: [],
            defaultProps: {
                id: "id",
                label: "label",
                children: "children",
            },
        };
    },
    created() {
        this.getOptions();
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
        },
        getOptions() {
            const url = "/api/goodsList";
            axios
                .get(url)
                .then(res => {
                    this.data = res.data.data;
                    console.log(res.data);
                    const treedata = arrayToTree(this.data, {
                        parentProperty: "parent_id",
                        customID: "id"
                    });
                    this.data = treedata;
                    console.log(treedata);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
};
</script>

方法二:第一种:递归实现数组转为树形结构

第一步:
// 递归: 封装一个函数:将列表list数据转换成数据树形数据=>递归
// 遍历树形 有一个重点 要先找一个头
function transListDataToTreeData(list, root) {
  const arr = []
  // 1.遍历
  list.forEach((item) => {
    // 2.首次传入空字符串  判断list的pid是否为空 如果为空就是一级节点
    if (item.pid === root) {
      // 找到之后就要去找item下面有没有子节点  以 item.id 作为 父 id, 接着往下找
      const children = transListDataToTreeData(list, item.id)
      if (children.length > 0) {
        // 如果children的长度大于0,说明找到了子节点
        item.children = children
      }
      // 将item项, 追加到arr数组中
      arr.push(item)
    }
  })
  return arr
}
 
//第二步:
// 调用转化方法，转化树形结构 赋值给data中定义的数组
this.departs = transListDataToTreeData(data.depts, '')
 
//第三步: 渲染到页面
<!-- 树形控件el-tree :data:指定数据  props:属性成员配置项 default-expand-all 控制是否默认展开-->
<!-- el-tree组件 里面内容是插槽内容 有多少个节点循环多少次 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
 </el-tree>

在这里插入图片描述

Dialog弹框组件

弹框组件基础使用

● 基本交互
● 使用默认插槽来自定义内容

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      }
    }
  }
</script>

监听open和close事件

弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件
@close 弹框关闭 : dialogVisible从true变成false
@open 弹框打开 : dialogVisible从false变成true

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      @close="dialogClose"
      @open="dialogOpen"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    dialogClose() {
      console.log('弹框要关闭了')
    },
    dialogOpen(){
      console.log('弹框打开咯')
    }
  }
}
</script>

取消两种关闭的方式

<el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"

小结

  1. 弹框组件一共俩种状态 打开和关闭 :visible.sync=“布尔值”
  2. open和close俩个自定义事件要关注
  3. 取消两种关闭的方式(点击遮罩，esc)

MessageBox

openMessage () {
      this.$message({
        type: 'success ',
        message: `月薪15K`
      })
    },
    open () {
      this.$alert('你真的要走吗？', '系统提示', {
        confirmButtonText: '确认',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          })
        }
      })
    }

Select

<template>
  <el-select v-model="value" placeholder="请选择">

    <!-- label: 显示的内容
    value: 选中之后要保存的内容---值 -->
    <el-option
      v-for="item in options"
      :key="item.value"

      :label="item.label"
      :value="item.value">
    </el-option>

  </el-select>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: '1',
        label: '黄金糕'
      }, {
        value: '2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  }
}
</script>

多个的select联动

selecct: @change, ajax

BUG修复

描述：

选中其他的菜单，刷新页面，发现默认选中的菜单不对！

解决

:default-active="$route.path"

# elementui # vue.js # 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

口才教育：如何提升沟通技巧与表达能力

avatar ViewDesign
cover

C 嵌入式系统设计模式 28：通道模式

avatar ViewDesign
cover

java面向智慧城市的智慧农业管理系统(ssm)

avatar ViewDesign