Vue基础篇之第三方插件的使用与安装

最新推荐文章于 2024-07-20 15:24:14 发布

fvcvv

最新推荐文章于 2024-07-20 15:24:14 发布

阅读量1.9k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/fvcvv/article/details/128136751

版权

本文介绍了如何在Vue项目中安装和使用Element UI，包括如何创建登录弹窗，实现表单验证，以及使用Table组件制作后台数据展示。讲解了Element的基础结构、组件引入、表单验证和监听取消提示信息的方法，还涉及了表格样式定制、气泡确认框和状态切换功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装elelment

1）在终端中启动Vue ui
2）如何新建项目 vue-ui
3）选择 Vue2 默认安装
4）安装完成后选择插件点击左上角安装插件
5）任何搜索 elelment 安装第一个会问引入方式，选择第二项
6）安装完成后点击运行启动打开项目既可

elelment介绍

element 可以按需加载
element 是 ui 库，那么它就拥有许多的组件样式，那么全体引入的话，会将所有组件以及所有组件的样式全部引入
所有需要按照需求去引入，需要什么就引入什么

elelment.js
---------------
import Vue from 'vue'
import { Button } from 'element-ui'

// element 可以按需加载
// element 是 ui 库，那么它就拥有许多的组件样式，那么全体引入的话，会将所有组件以及所有组件的样式全部引入
// 所有需要按照需求去 引入，需要生命就引入什么
// 制作成全局的
Vue.use(Button)

elelment实现功能

1、使用Form登录弹窗

1.1、基础结构

代码解释：
- 这里我们使用了:Dialog 需要在element.js 中引入
- slot="footer" = v-slot:footer, 但 v-slot:footer 只能写在 templat 上

<template>
  <div>
    <el-button type="primary">登录</el-button>
    <!-- 这里我们使用了：Dialog 需要在element.js 中引入 -->
    <el-dialog title="提示" :visible="true" width="30%">
      <span>这是一段信息</span>
      <!--  slot="footer" = v-slot:footer, -->
      <!-- 但 v-slot:footer 只能写在 templat 上 -->
      <template v-slot:footer>
        <span class="dialog-footer">
        <el-button >取 消</el-button>
        <el-button type="primary" >确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

element.js

import Vue from 'vue'
import { Button,Dialog} from 'element-ui'

// element 可以按需加载
// element 是 ui 库，那么它就拥有许多的组件样式，那么全体引入的话，会将所有组件以及所有组件的样式全部引入
// 所有需要按照需求去 引入，需要生命就引入什么
// 制作成全局的

Vue.use(Button)
Vue.use(Dialog)
在这里插入代码片

1.2、出现弹窗

<template>
  <div>
    <el-button ... @click="visible = true">登录</el-button>
    <!-- 这里我们使用了：Dialog 需要在element.js 中引入 -->
    <el-dialog ... :visible.sync="visible" >
      <template v-slot:footer>
        <span class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary"  size="small">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

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

<style>
</style>

1.3、弹窗内容

<template>
  <div>
  ....
      <el-form
        label-width="60px"
        :model="info"
      >
        <el-form-item label="用户名">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="info.password"></el-input>
        </el-form-item>
      </el-form>
...
  </div>
</template>

<script>
export default {
  data() {
    return {
   ......
      info: {
        name: '',
        password: '',
      }
    };
  },
};
</script>

<style>
</style>

并且将Form, FormItem, Input 引入到element.js中

1.4、输入内容的验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<template>
。。。。。
      <el-form
      ....
        :rules="rules"
      >
        <el-form-item .... prop="name">
        </el-form-item>
        <el-form-item .... prop="password">
。。。。
</template>

<script>
export default {
  data() {
  。。。。
  // 定义规则
      rules: {
        name: [
          {
            required: true,
            message:'请输入用户名',
            trigger: 'blur'
          }
        ],
         password: [
          {
            required: true,
            message:'请输入密码',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 10,
             message:'请输入密码',
            trigger: 'blur'
          }
        ]
      }
    };
  },
};
</script>

<style>
</style>

1.5、导账户密码输入正确的关闭弹窗

使用 element 方法的使用
element.js

import Vue from 'vue'
import {... Message} 

Vue.prototype.$message = Message

<template>
..
      <el-form
...
        ref="myForm"
      >
      ...
          <el-button type="primary" size="small" @click="ok">确 定</el-button>
</template>

<script>
export default {
  data() {
...
  methods: {
    ok(){
      this.$refs.myForm.validate((boolean) => {
        if(boolean) {
          const { name, password} = this.info;
          if((name === "123") & (password ==="123456")){
            this.$message({
              message: "恭喜你，这是一条成功信息",
              type: "success",
            });
            this.visible = false;
          }else {
             this.$message({
              message: "信息不匹配",
              type: "warning",
            });
          }
        }
      })
    }
  }
};
</script>

<style>
</style>

1.6、使用watch 监听取消提示信息

在这里插入图片描述

<script>
export default {
  watch: {
    visible(newValue) {
      if(!newValue){
        this.$refs.myForm.resetFields()
      }
    }
  },
};
</script>

完整代码

<template>
  <div>
    <el-button type="primary" @click="visible = true">登录</el-button>
    <!-- 这里我们使用了：Dialog 需要在element.js 中引入 -->
    <el-dialog title="提示" :visible.sync="visible" width="30%">
      <!-- .sync 可以效果 visble -->
      <!--  slot="footer" = v-slot:footer, -->
      <!-- 但 v-slot:footer 只能写在 templat 上 -->
      <el-form
        label-width="80px"
        :model="info"
        :rules="rules"
        ref="myForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="info.password"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="visible = false" size="small">取 消</el-button>
          <el-button type="primary" size="small" @click="ok">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      info: {
        name: '',
        password: '',
      },
      rules: {
        name: [
          {
            required: true,
            message:'请输入用户名',
            trigger: 'blur'
          }
        ],
         password: [
          {
            required: true,
            message:'请输入密码',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 10,
             message:'密码长度有误',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  watch: {
    visible(newValue) {
      if(!newValue){
        this.$refs.myForm.resetFields()
      }
    }
  },
  methods: {
    ok(){
      this.$refs.myForm.validate((boolean) => {
        if(boolean) {
          const { name, password} = this.info;
          if((name === "123") & (password ==="123456")){
            this.$message({
              message: "恭喜你，这是一条成功信息",
              type: "success",
            });
            this.visible = false;
            this.info = {
              name:"",
              password:""
            }
          }else {
             this.$message({
              message: "信息不匹配",
              type: "warning",
            });
          }
        }
      })
    }
  }
};
</script>

<style>
</style>

element.js

import Vue from 'vue'
import { Button,Dialog,Form, FormItem, Input, Message} 
from 'element-ui'

// element 可以按需加载
// element 是 ui 库，那么它就拥有许多的组件样式，那么全体引入的话，会将所有组件以及所有组件的样式全部引入
// 所有需要按照需求去 引入，需要生命就引入什么
// 制作成全局的

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Dialog)

Vue.prototype.$message = Message

2、使用Table 表格制作后台数据

2.1、基础结构

<template>
  <div>
    <el-table :data="books" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="50"> </el-table-column>
      <el-table-column prop="time" label="时间" width="150"> </el-table-column>
      <el-table-column prop="title" label="标题" width="550"> </el-table-column>
      <el-table-column prop="author" label="作者" width="80"> </el-table-column>
      <el-table-column prop="importance" label="重要性" width="150">
      </el-table-column>
      <el-table-column prop="visit_count" label="阅读数" width="80">
      </el-table-column>
      <el-table-column prop="statu" label="状态" width="100"> 
      </el-table-column>
      <el-table-column label="操作"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        {
          id: 1,
          time: "1973-12-02 03:24",
          title: "Jmr Jhaccyp Rzsbshpbh Dbahti Vvqu Kshvr Vudcfebco Nuosp",
          author: "Donna",
          importance: 2,
          visit_count: 2000,
          status: "draft",
        },
        {
          id: 2,
          time: "1973-12-02 03:24",
          title: "Xjspo Tpzjhlmfe Puh Wdqrqceb Kuib Zycv Ucxjulrog",
          author: "Brian",
          importance: 3,
          visit_count: 1342,
          status: "published",
        },
        {
          id: 3,
          time: "1973-12-02 03:24",
          title: "Jmr Jhaccyp Rzsbshpbh Dbahti Vvqu Kshvr Vudcfebco Nuosp",
          author: "Donna",
          importance: 1,
          visit_count: 456,
          status: "draft",
        },
      ],
    };
  },
};
</script>

<style>
</style>

2.2、制作特殊样式

使用 template以及作用域插槽 v-slot=“scope”

<template>
  <div>
      <el-table-column prop="importance" label="重要性" width="150">
        <!-- 使用自定义样式设置 重要性 -->
        <!-- scope 就是子组件传递过来的数据 {row： 数组内的某一个对象} -->
        <!-- :max= 设置最多有多少个星星 -->
        <!-- disabled 禁止修改 -->
        <!-- :colors 星星颜色 -->
        <template v-slot="scope">
          <el-rate :max="scope.row.importance" v-model="scope.row.importance"
          disabled :colors="['#99A9BF', '#99A9BF', '#99A9BF']" />
        </template>
      </el-table-column>
      <el-table-column prop="statu" label="状态" width="100">       
        <template v-slot="{row}">
          <el-tag :type="row.status === 'published' ? 'success' : 'info' ">{{row.status}}</el-tag>
        </template>
         <el-table-column label="操作"> 
        <template v-slot="{row}">
          <el-button type="primary" size="small" >编辑</el-button>
          <el-button :type="row.status === 'published' ? 'default' : 'success'"  size="small" >{{row.status === 'published' ? '草稿' : '发布'}}</el-button>
          <el-button type="danger" size="small" >删除</el-button>
        </template>
      </el-table-column>
      </el-table-column>
  </div>
</template>

样式的修改：

scoped 会将 template 内的所有可见的标签加上 data-v-xxx 然后所有的选择器利用这个属性选择器去做选择
也就是是使用别的组件的时候组件内的标签除了根元素之外并不会加上 data-v-xxxx，所以修改其内样式时候不能使用scoped
但可以使用 ::v-deep 来解决这个问题

::v-deep .el-rate__item  .el-rate__icon {
  margin-right: -4px;
  font-size: 22px;
}

2.3、气泡确认框，以及删除功能实现

<template>
  <div>
  。。。。。。
     <el-popconfirm title="这是一段内容确定删除吗？" @confirm="ok(row.id)">
       <template v-slot:reference>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-popconfirm>
</template>

<script>
export default {
.....
  methods: {
    ok(id){
      this.books = this.books.filter((books) => books.id !== id);
       this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 600
        });
    }
  }
};
</script>

<style scoped>
.....
::v-deep .el-button--small, .el-button--small.is-round{
  margin-left: 10px;
}
</style>>

2.4、实现草稿与发布的切换

<template>
。。。。
 <el-table-column label="操作">
    <template v-slot="{ row }">
      <el-button type="primary" size="small">编辑</el-button>
        <el-button
         。。。。。 绑定点击事件
         @click="changeStatus(row)">
.......
</template>

<script>
export default {
。。。。。
    changeStatus(book){
      book.status = book.status === 'published' ? 'draft' : 'published',
      this.$notify({
        title: "成功",
        message: "修改成功",
        type: "success",
        duration: 600,
      });
    }
  },
};
</script>