ElementUI的简单使用方法讲解

这里我们以引入button按钮为例其实很多表单或者时间等等的组件引入方式都是一样的

举一反三吧.

首先 yarn add element-ui -S 让我们来安装这个包

main.js 全局注册 element-ui这个组件

// 完整引入，main.js写入以下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

这样我们就可以在App里面使用这个组件了

比如你想要第一列的按钮

那么你就复制下来放到App.vue内

<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>

这样我们简单的按钮就引入完成了而且这种图片它自带的点击高亮等等特性也是很厉害的.

效果图如下

接下来演示一个表单项引入吧

比如这个表单你想要引入那么也要把它的代码复制下来

<template>
<div>
<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.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="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.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="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form>
</div>
</template><script>
export default {data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},methods: {onSubmit () {console.log('submit!')}}
}
</script><style>
</style>

因为涉及到一些需要vue变量所以这里把整段全弄下来

而你想要什么样的内容就适当的删除或者粘贴就可以了

我们是cv工程师.....

就是这么简单~ 如果想看验证规则设置的话可以对照着 element-ui的文档或者我之前发布的文章来修改有自定义规则等等的~

ElementUI的简单使用方法讲解相关推荐

linux控制台单人五子棋简书,Java控制台版五子棋的简单实现方法
这篇文章主要给大家介绍了关于Java控制台版五子棋的简单实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧设计一个10*1 ...
【已解决】对JSP页面传值中文乱码的简单解决方法
很多java程序员在日常的工作中总会遇到对JSP页面传值中文乱码的情况,一些朋友由于操作不当,造成了很大的麻烦.本文将为大家讲解关于对JSP页面传值中文乱码的简单解决方法的内容. 方法/步骤方法一: ...
【转】Nginx服务器的反向代理proxy_pass配置方法讲解
[转]Nginx服务器的反向代理proxy_pass配置方法讲解转自:http://www.jb51.net/article/78746.htm 就普通的反向代理来讲 Nginx的配置还是比较简单的 ...
C语言试题二十之利用以下的简单迭代方法求方程cos(x)-x=0的一个实根。
1. 题目编写函数function,它的功能是:利用以下的简单迭代方法求方程cos(x)-x=0的一个实根. 迭代步骤如下: (1)取x1初值为0.0: (2)x0=x1,把x1的值赋各x0; (3 ...
怎么把word压缩小一点？简单的方法是什么？
很多小伙伴表示,想把一个word文档发送给好友,但由于文件太大,不管是发邮件还是QQ上传都不方便,有时候还会上传失败,有没有简单的方法呢?方法当然是有的,下面将word压缩简单方法分享给大家,一起来看 ...
RestTemplate使用实战-exchange方法讲解-HTTP请求
RestTemplate使用实战-exchange方法讲解 2019-10-28 12:40:51 阅读:160 来源: 互联网标签:HTTP 请求 exchange RestTemplate ...
设计模式--静态工厂、简单工厂方法案例分析
简介 1.学习本篇文章,了解简单工厂设计模式的使用场景. 2.如何使用简单工厂模式. 3.简单工厂模式能解决什么问题? 场景现在有一家外卖小店需要从生产一份外卖开始进行考虑设计,当客户在网上点出不同 ...
lterator方法讲解
lterator方法讲解迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为"轻量级&quo ...
熟练掌握R语言的Meta分析全流程和不确定性分析，并结合机器学习等方法讲解Meta分析在文献大数据的延伸应用
Meta分析是针对某一科研问题,根据明确的搜索策略.选择筛选文献标准.采用严格的评价方法,对来源不同的研究成果进行收集.合并及定量统计分析的方法,最早出现于"循证医学",现已广泛应 ...

ElementUI的简单使用方法讲解

ElementUI的简单使用方法讲解相关推荐

最新文章

热门文章