菜单 搜索
首页 前端知识 【Vue】Vue2使用ElementUI

【Vue】Vue2使用ElementUI

2024-09-21 21:09:45 前端知识 前端哥 198 603 我要收藏

目录

  • Element UI
    • 介绍
    • 特点
    • Vue2使用Element
      • 安装
      • 引入ElementUI组件库
    • 使用ElementUI
      • 用户注册
      • 列表展示
      • 其他
  • mint-ui
    • 介绍
    • 特点
    • 安装组件
    • 引入组件
    • Mint-ui相关组件

Element UI

介绍

  • 官网(基于 Vue 2.x ):https://element.eleme.cn/#/zh-CN

  • ElementUI 是一个基于 Vue.js 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一套丰富的 UI 组件和布局，以及一些常用的功能组件，让开发者可以快速搭建美观、可用的 Web 应用。

  • ElementUI 的组件库包括按钮、表单、输入框、下拉菜单、表格、弹窗等等，它们都具有一致的样式和交互效果，可以方便地进行组合和定制。ElementUI 还提供了一些常用的功能组件，如日期选择器、分页器、消息提示等，这些组件可以大大简化开发过程，提高效率。

  • ElementUI 的设计风格简洁大方，符合现代化的 UI 设计规范。它使用了灵活的栅格系统来布局页面，可以适应不同尺寸的屏幕。同时，ElementUI 支持多语言和主题定制，开发者可以根据自己的需求进行配置。

  • ElementUI 提供了详细的文档和示例代码，可以帮助开发者快速上手并解决问题。此外，ElementUI 还有一个活跃的社区，开发者可以在社区中分享经验、提问问题，并获取帮助。

  • ElementUI 是一个功能强大、易于使用的前端组件库，适用于快速构建漂亮且可用的 Web 应用。无论是个人项目还是企业级应用，ElementUI 都能提供良好的支持，让开发变得更加高效和愉快。
    在这里插入图片描述

特点

ElementUI 的特点有以下几个：

  1. 简洁美观：ElementUI 的设计风格简洁大方，符合现代化的 UI 设计规范。它提供了一致的样式和交互效果，使得应用看起来非常美观，并且可以适应不同尺寸的屏幕。

  2. 丰富的组件：ElementUI 提供了一套丰富的 UI 组件，包括按钮、表单、输入框、下拉菜单、表格、弹窗等等。这些组件具有灵活的用法和丰富的功能，可以满足各种需求。

  3. 响应式布局：ElementUI 使用了灵活的栅格系统来布局页面，可以适应不同尺寸的屏幕。它支持响应式布局，使得应用在不同设备上都能有良好的展示效果。

  4. 高度可定制：ElementUI 支持多语言和主题定制，开发者可以根据自己的需求进行配置。它提供了丰富的主题和样式变量，可以方便地定制组件的外观和样式。

  5. 完善的文档和示例：ElementUI 提供了详细的文档和示例代码，开发者可以通过阅读文档和参考示例来快速上手和解决问题。它还有一个活跃的社区，开发者可以在社区中分享经验、提问问题，并获取帮助。
    在这里插入图片描述

Vue2使用Element

安装

npm下载ElementUI：npm install element-ui@2.15.3或者npm i element-ui -S

引入ElementUI组件库

在main.js中内容：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
//样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

使用ElementUI

其实在官网有很多很多案例，这里我准备了一个用户注册的form表单案例，和一个表格展示案例

用户注册

<template>
  <div>
      <el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-user">
          <el-form-item label="账号" prop="userCode">
              <el-input type="text" v-model="user.userCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="userName">
              <el-input type="text" v-model="user.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPassword">
              <el-input type="userPassword" v-model="user.userPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="user.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="">
              <el-radio-group v-model="user.gender">
                  <el-radio-button label="0" >男</el-radio-button>
                  <el-radio-button label="1" >女</el-radio-button>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="出生年月" prop="birthday">
              <el-date-picker
                  v-model="user.birthday"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="地址" prop="address">
              <el-input type="text" v-model="user.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
              <el-input type="text" v-model="user.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="userRole">
              <el-select v-model="user.userRole" placeholder="请选择">
                  <el-option
                      v-for="item in roleList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      :disabled="item.disabled">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="兴趣爱好" prop="hobbys">
              <el-checkbox-group
                  v-model="user.hobbys"
                    max="3">
                  <el-checkbox v-for="hobby in hobbys" :label="hobby" :key="hobby">{{hobby}}</el-checkbox>
              </el-checkbox-group>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm('user')">提交</el-button>
              <el-button @click="resetForm('user')">重置</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>
<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:'Register',
    data() {
    	//自定义校验规则
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.user.userPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            hobbys:["唱","跳","RAP","打篮球"],
            roleList:[
                {name:'系统管理员',value:1},
                {name:'管理员',value:2},
                {name:'会员',value:3},
                {name:'游客',value:4}
            ],
            //表单数据绑定
            user:{
                userCode:'',
                userName:'',
                userPassword:'',
                gender:0,
                birthday:'',
                phone:'',
                address:'',
                userRole:4,
                hobbys:[],
                checkPass:''
            },
            //定义表单基本的验证
            rules: {
                userCode: [
                    { required:true,trigger: 'blur', message: '请输入账号',  }
                ],
                userName: [
                    { required:true,trigger: 'blur', message: '请输入用户名',  }
                ],
                userPassword: [
                    { required:true,trigger: 'blur', message: '请输入密码',  }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            },
            //日期插件设置
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

列表展示

<template>
  <div>
      <el-table
              :data="userList"
              stripe
              style="width: 100%">
          <el-table-column
                  prop="id"
                  label="ID"
                  style="width: 15%">
          </el-table-column>
          <el-table-column
                  prop="userCode"
                  label="账号"
                  style="width: 15%">
          </el-table-column>
          <el-table-column
                  prop="userName"
                  label="姓名"
                  style="width: 15%">
          </el-table-column>
          <el-table-column
                  prop="gender"
                  label="性别"
                  style="width: 6%">
          </el-table-column>
          <el-table-column
                  prop="birthday"
                  label="出生年月"
                  style="width: 15%">
          </el-table-column>
          <el-table-column
                  prop="phone"
                  label="联系方式"
                  style="width: 15%">
          </el-table-column>
          <el-table-column
                  prop="address"
                  label="地址"
                  style="width: 15%">
          </el-table-column>
          <el-table-column
              prop="userRole"
              label="角色">
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>

  </div>
</template>
<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:'Register',
    data() {
        return{
            userList:[
                {id:1,userCode:'admin',userName:'系统管理员',gender:'男',birthday:'1993-11-12',phone:'13865427845',address:'北京市',userRole:'系统管理员'},
                {id:2,userCode:'sunshangxiang',userName:'孙尚香',gender:'女',birthday:'1999-12-17',phone:'13965489527',address:'郑州市',userRole:'游客'},
                {id:3,userCode:'guanyu',userName:'关羽',gender:'男',birthday:'2000-01-09',phone:'15765842469',address:'徐州市',userRole:'会员'},
                {id:4,userCode:'sunquan',userName:'孙权',gender:'男',birthday:'1992-10-08',phone:'18965552451',address:'杭州市',userRole:'管理员'},
                {id:5,userCode:'liubei',userName:'刘备',gender:'男',birthday:'1989-09-24',phone:'15068689595',address:'广州市',userRole:'管理员'},
                {id:6,userCode:'caocao',userName:'曹操',gender:'男',birthday:'1992-10-08',phone:'15545211245',address:'兖州市',userRole:'管理员'},
                {id:7,userCode:'huangyueying',userName:'黄月英',gender:'女',birthday:'2009-01-01',phone:'15966648531',address:'亳州市',userRole:'游客'},
            ]
        }
    },
    methods: {

    }
}
</script>

在这里插入图片描述

其他

详见官网…

mint-ui

介绍

  • Mint UI是一个基于Vue.js的移动端组件库，由饿了么前端团队开发。
  • 它提供了一系列丰富的UI组件，包括按钮、输入框、弹窗、轮播图、下拉刷新等常用组件，可以帮助开发者快速构建移动端的Web应用。
  • Mint UI具有简单易用、效果好、样式漂亮等特点，受到了广大开发者的欢迎。
  • Mint UI官网： http://mint-ui.github.io/#!/zh-cn

特点

Mint UI具有以下特点：

  1. 简单易用：Mint UI提供了丰富的移动端UI组件，使用简单，开发者可以快速上手，并快速构建移动端应用。

  2. 轻量化：Mint UI的组件库比较轻量，可以高效地加载和运行在移动设备上，提供了更好的用户体验。

  3. 样式漂亮：Mint UI的组件拥有精美的视觉效果，具有现代化、时尚的外观，能够满足用户对于UI设计的要求。

  4. 功能丰富：Mint UI提供了丰富的组件，包括按钮、输入框、弹窗、轮播图、下拉刷新等常见的移动端UI组件，满足开发者在移动应用开发中的各种需求。

  5. 支持Vue.js：Mint UI是基于Vue.js开发的组件库，与Vue.js完美融合，开发者可以使用Vue.js的特性和功能来更加灵活地定制和使用组件。

总之，Mint UI具有简单易用、轻量化、样式漂亮、功能丰富等特点，适用于开发移动端的Web应用。Mint UI具有以下特点：

在这里插入图片描述

安装组件

npm install mint-ui -S

引入组件

  • 引入全部组件

    // 引入全部组件 import Vue from 'vue'; import Mint from 'mint-ui'; 
Vue.use(Mint);

  • 按需引入

  • 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

  • 首先，安装 babel-plugin-component： npm install babel-plugin-component -D

    {
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

  • 如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：需要引入样式：import 'mint-ui/lib/style.css'; 

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 1、引入Element-ui组件
// import { Button } from 'element-ui';
// Vue.use(Button)

// 2、引入Mint-ui组件
import 'mint-ui/lib/style.css';
import {Button} from 'mint-ui';
Vue.component(Button.name, Button);

Vue.config.productionTip = false  //设置在控制台环境进行代码提示作用

// 1.全局路由守卫
router.beforeEach((to,from,next) => {
  /*
    to:表示要去的新页面
    from:表示旧的页面
    next:表示是否
  */
  // 0——表示未登录
  // 1——表示已登录
  var islogin = 1;
  if(to.meta.needAuth){
    if(islogin == 0){
      router.push({name:'login'})
    }
    if(islogin == 1){
      next()
    }
  }else{
    next()
  }
})

// 2.全局过滤器
Vue.filter('toFixed1',function(val,data,data1){
  return data1 + val.toFixed(data)
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Mint-ui相关组件

官网文档： https://mint-ui.github.io/docs/#/zh-cn2
在这里插入图片描述

<template>
  <div class="hello">

      <mt-button type="danger" @click="myToast">danger</mt-button>

      <hr>
      <el-button type="primary">主要按钮</el-button>

      <hr>
      <router-link to="/mydetail">产品详情</router-link>
      <router-link to="/mycar">购物车</router-link>
      <router-link to="/myorder">下单页面</router-link>

      <hr>
      <button @click="mytab">点击</button>

      <hr/>
      <router-link to="/tab">选项卡</router-link>

      <hr/>
      <myslot>
        <div slot="name1">
          {{msg}}
        </div>
        <div slot="name2">
          {{num}}
        </div>
      </myslot>

      <hr/>
      <input type="text" placeholder="请输入用户名" v-model="t1"/>
      <input type="text" placeholder="请输入密码" v-model="t2"/>
      <button :class="{active:isTrue}">登录</button>

      <hr/>
      <input type="text" name="" id="" v-model="num3"/>

      <hr/>
      <input type="text" placeholder="请输入用户名" v-model="user"/>
      <input type="text" placeholder="请输入密码" v-model="password"/>
      <button :class="{active:getActive}">登录</button>
      <h1>{{getAvg}}</h1>
      <h1>{{getSum}}</h1>
      <h1>{{num | toFixed(5,"$")}}</h1>
      <h1>{{num1 | toFixed1(5,"$")}}</h1>
      <h1>{{msg}}</h1>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import myslot from './02slot';

export default {
  name: 'HelloWorld',
  data () {
    return {
      num:10,
      num1:20,
      num3:100,
      msg: 'Welcome to Your Vue.js App',
      user:'',
      password:'',
      isTrue:false,
      t1:'',
      t2:'',
    }
  },
  filters:{
    toFixed(val,data,data1){
      return data1 + val.toFixed(data)
    }
  },
  computed:{
    getSum(){
      return this.num + this.num1;
    },
    getAvg(){
      return this.getSum/2;
    },
    getActive(){
      if(this.user==''||this.password==''){
        return false
      }
      return true
    }
  },
  watch:{
    num3(){
      console.log("num3修改了")
    },
    t1(){
      if(this.t1 == '' || this.t2 ==''){
        this.isTrue = false
      }else{
        this.isTrue = true
      }
    },
    t2(){
      if(this.t1 == '' || this.t2 ==''){
        this.isTrue = false
      }else{
        this.isTrue = true
      }
    }
  },
  components:{
    myslot,
  },
  methods:{
    mytab(){
      //链式路由跳转
      this.$router.push({
        // 方式一
        // name:'tab'
        // 方式二
        path:'/tab',
        query:{
          id:100
        }
      })
    },
    myToast(){
      Toast({
        message: '提示',
        position: 'center',
        duration: 5000
      });
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.active{
	  color: red;
	}
	h1, h2 {
	  font-weight: normal;
	}
	ul {
	  list-style-type: none;
	  padding: 0;
	}
	li {
	  display: inline-block;
	  margin: 0 10px;
	}
	a {
	  color: #42b983;
	}
</style>

前端第三方组件库国内官网地址

Vant-ui 国内官网: https://vant-contrib.gitee.io/vant/#/zh-CN/
layui 官网: https://layuion.com/docs/element/color.html
jQuery 官网:https://www.jquery123.com/
Apache ECharts 官网：https://echarts.apache.org/zh/index.html

微信开发文档官网：https://developers.weixin.qq.com/miniprogram/dev/framework/

w3c国内官网：https://www.w3school.com.cn/

mdn国内官网：https://developer.mozilla.org/zh-CN/docs/Web/HTML

swiper官网 ：https://www.swiper.com.cn/usage/index.html

betterscroll官网：添加链接描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18517.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

学生网上请假系统/学生网上请假系统使用教程/学生网上请假系统登录/学生在线请假平台/网上请假流程(源码 LW 调试文档 讲解等)/MySQL/SpringBoot/VueHTML5/Java

2024-10-28 20:10:39

多品牌NVR管理工具/设备EasyNVRNVR监测软件/设备HTML5技术B/S架构实时视频监控方案

2024-10-28 20:10:35

基于Java SpringBoot Vue HTML5中药实验管理系统(源码 LW 调试文档 讲解等)/中药实验管理系统/中药实验管理软件/中药实验设备管理系统/中药实验数据管理系统

2024-10-28 20:10:13

基于Java SpringBoot Vue HTML5网上摄影工作室系统(源码 LW 调试文档 讲解等)/网上摄影工作室系统使用教程/网上摄影工作室系统下载/网上摄影工作室系统评价

2024-10-28 20:10:59

【TinyMCE】TinyMCE6.1及以上版本去除换行增加的P标签

2024-10-28 20:10:56

HTML5 常见的语义标记(布局)

2024-10-28 20:10:56

【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5

2024-07-29 00:07:43

实现语音合成的三种方法：HTML5 Web Speech 、speak-tts、百度语音合成

2024-10-28 20:10:54

提升网页设计能力：HackerRank HTML挑战精讲

2024-10-28 20:10:51

HTML（超文本标记语言）是一种用于创建网页的标准标记语言，通过标签定义网页的结构和内容

2024-10-28 20:10:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！