vue之element框架的使用

vue常见的框架

• 封装了大量的组件，以供我们使用！
• elementUI => PC端 移动端
• vantUI => 有赞 => 电商项目 移动端
• iView => 腾讯 => PC端
• ant-design => 阿里

elementUI 饿了么 常用

• 官网：
  https://element.eleme.cn/#/zh-CN/component/quickstart

• 安装：
  npm i element-ui -S

• 引入：在main.js 入口文件中引入
  import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

• 使用：在main.js 入口文件中引入
  Vue.use(ElementUI);

使用组件

使用组件之layout布局 实现头部

<el-row :gutter="20">
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>

使用组件之小图标

• 官网：https://element.eleme.cn/#/zh-CN/component/icon

// 在普通标签使用小图标
<i class="el-icon-edit"></i> 
//在组件内使用小图标
<el-button type="primary" icon="el-icon-search">搜索</el-button>  

使用组件之链接

• 官网：https://element.eleme.cn/#/zh-CN/component/link

 <el-link type="primary">主要链接</el-link>

使用组件之侧边栏

• 官网：https://element.eleme.cn/#/zh-CN/component/menu

• NavMenu导航菜单之配置属性

  • Menu Attribute (主菜单 ) 之常见配置属性

    • mode => 模式 => horizontal / vertical => 默认是垂直的
    • background-color => 菜单背景色 => 默认值 #ffffff
    • text-color => 菜单的文本颜色 => 默认值 #303133
    • active-text-color => 当前菜单处于活跃的item中的文本颜色 => 默认值 #409EFF
    • default-active => 当前激活菜单的index(一般而言,在data之中定义一个变量，设置默认的index显示，这边的index其实就是当前的 path 路径) => 可以给添加点击事件，然后切换对应的路由path
    • default-openeds => 当前打开的 sub-menu 的 index 的数组(显示当前的子项目打开) => 数组的形式
    • router => 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 => 默认为false
      • 而这个index是在子组件之中绑定的，一般使用 :index=“item.path” 的方式！

  • Menu Events (主菜单之事件)

    • select => 菜单激活回调(触发这个事件)
      参数：参数1：=> 字符串的路径 参数2：=> 数组形式的路径 参数3：=> 当前的组件实例对象
      @select="change" => 菜单处于激活状态的时候，触发change事件！

      change(path) {
        this.activeIndex = path;//在主菜单之中的methods 定义这个函数，并且处理
      },
      

    • 。。。

  • SubMenu Attribute(子菜单的属性，子组件的！)

    • index => 子组件的唯一标志，显示当前为活跃状态！=> 当el-menu父组件内定义了router,开启以index中的path作为跳转路径
<el-menu-item :index="item.path" :key="item.path" v-if="!item.submenu">。。。
    • disabled => 当前组件是否禁用

• 对一个主菜单的配置属性的设置 还有就是两个互斥的组件如何处理(处理v-for和v-if不能同时存在的问题)

  • 使用一个空的template标签，为他添加 v-for指令循环数据，然后key属性需要绑定在具体的组件内，不是在tempalte之上
  • 然后使用v-if 和 v-else 来实现两个组件的互斥！

        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="vertical"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ff0"
          @select="change"
          :default-openeds="openMenu"
          router
        >
          <!-- active-text-color 高亮显示 -->
          <template v-for="item in menu">
            <!-- :index="绑定的是唯一的url路径"  注意点：就是 :key="需要写在渲染的组件上，不是元素模板！"-->
            <!-- v-if 存在这个子菜单，就渲染这个子菜单项！ -->
            <el-menu-item :index="item.path" :key="item.path" v-if="!item.submenu">
              <i :class="item.icon"></i>
              {{item.text}}
            </el-menu-item>
            <!-- 带有子菜单的 -->
            <el-submenu :index="item.path" :key="item.path" v-else>
              <!-- 外层的父 -->
              <template v-slot:title>
                <i :class="item.icon"></i>
                {{item.text}}
              </template>
              <!-- 里面的子 -->
              <el-menu-item
                :index="item.path+subitem.path"
                v-for="subitem in item.submenu"
                :key="subitem.path"
              >{{subitem.text}}</el-menu-item>
            </el-submenu>
          </template>
        </el-menu>

使用组件之表格 => 删除

• 官网：https://element.eleme.cn/#/zh-CN/component/table

• Table Attributes：

  • data => 显示的数据 => 数组的形式

• Table Events
  *

• Table-column Attributes

  • prop => 对应列内容的字段名，也可以使用 property 属性 => 就是用于显示数据的(一个数据中含有 age 那么使用 prop=“age” 就可以显示了)

• Table-column Scoped Slot =>这是通过自定义插槽的方式，获取刅当前列或者列的数据

  • — => 自定义列的内容，参数为 { row, column, $index } 行 , 列 ， 当前活跃的组件(对象的形式)
  • header => 自定义表头的内容. 参数为 { column, $index }

• 点击删除的时候，需要获取到当前的id
  这时候，需要使用具名插槽，来访问到外部的数据 拿到当前行的数据
  这个score 为当前具名插槽，可以访问到这个外面的数据 然后在里面使用 score.row等方式 拿到数据！
  官网：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md 新的v-slot插槽

  //前端的过滤 => 就是删除数据库后，需要在前端设置过滤掉 删除项！
  this.userList = this.userList.filter((item) => item._id !== id);
  

• 点击编辑的时候，跳转到编辑页面

 <!-- 子按钮  为了拿到当前行的数，需要使用v-slot具名插槽 -->
   <template v-slot:default="score">
     <!-- 编辑 跳到编辑页面 -->
     <el-button
       type="success"
       icon="el-icon-edit"
       @click="goToEdit(score.row._id)"
       size="mini"
       circle
     ></el-button>
   </template>

   methods:{
     goToEdit(id) {
     //点击编辑的时候，跳转到编辑页面
     // // this.$router.push("/user/edit" + id); //编程式导航 
     this.$router.push({
       name: "Edit", // 跳转到命名视图
       params: { id }, //传递的参数 以params的方式 传递了id
     });
   },
   }

使用组件之表单

• Form Attributes

  • model => 表单数据对象 => {} => 默认使用这个 ruleForm (需要在data定义这个变量！)
  • rules => 表单验证规则 => {}
  • ref=“ruleForm” => 获取到当前组件的内容(刚刚好这个是数据！)

• Form Events

  • validate => 任一表单项被校验后触发 => 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）

  需要在data中的rules中定义规则 ，validator=> 为触发项(为一个对象的变量，用于处理验证，那个需要被触发的表单！)
   password: [{ validator: validatePass, trigger: "blur" }],
   //比如password 的触发项是 validatePass => 那么需要在前面定义一个 validatePass对象 ，里面关于password的检验！
  

• Form-Item Attributes

  • prop => 关于表单域 model 字段，用于显示(ruleForm 里面的属性是显示属性！v-model=“ruleForm.username” => 来绑定数据)

• 点击编辑
  <el-button type="primary" @click="submitForm">修改</el-button>

  //检验规则
  var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
  //在data之中定义数据 和常用的变量
    return {
      userid: "", //当前的用户id
      ruleForm: { username: "", password: "", age: "", gender: "" },//当前的默认数据
      rules: { //当前的检验规则
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
      },
    };
  
  // 点击编辑的时候 
    methods: {
      submitForm() {
        //validate 表单检验的方法  this.$refs["ruleForm"].validate=> 获取到当前页面 ruleForm 所对应的表单数据对象 去校验！
        this.$refs["ruleForm"].validate(async (valid) => {
          if (valid) {
            //检验为真的时候 ，发起请求
            //发起请求：
            const { userid, ruleForm } = this;
            // console.log(userid, ruleForm); //userid 用户名id reslForm修改后的项！
            const { data } = await this.$request.put("/user/" + userid, {
              ...ruleForm,
            });
            alert("submit!");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },