【Vue】Vue2使用ElementUI

苏生Susheng2024-05-22 22:41

目录

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中内容：

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表单案例，和一个表格展示案例

用户注册

html 复制代码 
<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>

列表展示

html 复制代码 
<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具有以下特点：

安装组件

js 复制代码 
npm install mint-ui -S

引入组件

  • 引入全部组件

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

  • 按需引入

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

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

    js 复制代码 
    {
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

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

    js 复制代码 
    // 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

html 复制代码 
<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官网：添加链接描述

相关推荐
wearegogog1234 小时前
基于 MATLAB 的卡尔曼滤波器实现，用于消除噪声并估算信号
前端·算法·matlab
molaifeng4 小时前
Go 语言如何实现高性能网络 I/O：Netpoller 模型揭秘
开发语言·网络·golang
韩师学子--小倪4 小时前
fastjson与gson的toString差异
java·json
Drawing stars4 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
崇山峻岭之间4 小时前
Matlab学习记录33
开发语言·学习·matlab
品克缤4 小时前
Element UI MessageBox 增加第三个按钮（DOM Hack 方案）
前端·javascript·vue.js
Evand J5 小时前
【2026课题推荐】DOA定位——MUSIC算法进行多传感器协同目标定位。附MATLAB例程运行结果
开发语言·算法·matlab
nbsaas-boot5 小时前
SQL Server 存储过程开发规范（公司内部模板）
java·服务器·数据库
小二·5 小时前
Python Web 开发进阶实战：性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°5 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02网站改了域名，如何查找？03Linux下V2Ray安装配置指南04Labelme从安装到标注：零基础完整指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南072025-04-03 Latex学习1——本地配置Latex + VScode环境08百度网盘偷偷给电脑“降频”？09【踩坑笔记】50系显卡适配的 PyTorch 安装10UV安装并设置国内源