Element 基本使用
2024-04-13 13:49:04
.1、Element介绍
Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
使用Element前提必须要有Vue。
组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
Element官网：Element - The world's most popular Vue UI framework
自己完成的按钮
Element快速入门
开发步骤
下载 Element 核心库。
引入 Element 样式文件。
引入 Vue 核心 js 文件。
引入 Element 核心 js 文件。
编写按钮标签。
通过 Vue 核心对象加载元素。
代码实现
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script> </head> <body><button>我是按钮</button><br><div id="div"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><br><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><br><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><br><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div> </body> <script>new Vue({el:"#div"}); </script> </html>Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于Vue的桌面端组件库。
使用Element前提必须要有Vue。
使用步骤 1.下载Element核心库。 2.引入Element样式文件。 3.引入Vue核心js文件。 4.引入Element核心js文件。 5.借助常用组件编写网页。
常用组件 网页基本组成部分，布局、按钮、表格、表单等等~~~ 常用组件不需要记住，只需要在Element官网中复制使用即可。
表单组件
- 由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单组件</title><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script> </head> <body><div id="div"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div> </body> <script>new Vue({el:"#div",data:{ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]}},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>
Element 基本使用相关推荐
- Cannot locate BeanDefinitionParser for element [scoped-proxy]
指定使用 CGLIB 而不使用 JDK 生成代理对象:注意:此两个标签必须同时出现,不然会报:Cannot locate BeanDefinitionParser for element [scope ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
- 【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
<template><el-table :span-method="spanMethod"><el-table-column label=" ...
- 75. Find Peak Element 【medium】
75. Find Peak Element [medium] There is an integer array which has the following features: The numbe ...
- Element el-switch 组件样式修改 将文字显示到组件内
Element el-switch 现在的样式无法将文字显示到组件内 ,需要自己修改样式.具体如下 <el-switch:disabled="s==item.select.length ...
- 关于element的select多选选择器，数据回显的问题
关于element的select多选,数据回显的问题 在工作中遇到这样一个问题,新建表单时用element的select多选以后,在编辑的时候打开表单发现其他数据能正常显示,多选却无法正常回显.在网上 ...
- Element 2.6.0 发布，基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
- 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue...
原文:背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue [源码下载] 背水一战 ...
- XSD标准架构-----xsd:element 元素详解
声明一个元素. <elementabstract = Boolean : falseblock = (#all | List of (extension | restriction | subs ...
最新文章
- 这位北大CS硕士小老弟，简直是“卷怪”！
- 安卓第八夜 玛丽莲梦露
- HTML字符实体（Character Entities），转义字符串（Escape Sequence）
- 楼兰图腾(权值线段树)
- HCL安装和使用模拟器中遇到的问题
- idea抽取重复方法快捷键_使用 IDEA 几分钟就重构了同事800 行quot;又臭又长quot; 的类！真香！...
- 学数学但是不会计算机,数学差的人不配学计算机？布朗大学教授告诉你一毛钱关系都没有！...
- Android ble covana,Android BLE低功耗蓝牙开发
- 【待完善】MongoDB - 使用索引
- STC单片机不需要按电源开关下载的方法！
- jquery ajax提交form表单,jquery+ajax提交form表单方法总结
- ISO 2768-1 标准
- PIN/PAD Design in SoC - 2 （待续）
- Cocos2d-X 3.x的具体配置详解
- cdr 2021 卸载
- 前方荆棘遍地，愿砥砺前行
- Win7蓝屏提示STOP: 0x0000008E (0xC0000005,0xA4E7B664,0X852E946C,0X00000000)的一种处理方法
- 【蓝桥】算法训练 Beaver‘s Calculator（贪心）
- MySQL-实操：部门、员工信息与管理
- iOS 给NSString文字中间或底部添加横线