Element ui的基本使用

ElementUi实战

引言

网站快速成型工具 桌面端组件库 一切皆组件

定义

element ui就是基于vue的一个ui框架,该框架基于vue开发了很多相关的组件,方便我们快速开发.

由来

饿了么的前端团队基于vue进行开发的并且进行了开源 element中提供全部都是封装好的组件.

安装Element ui

# 1 创建vue cli项目
	vue-cli init webpack element

在vue项目中安装element ui

# 1 下载elementui的依赖
	npm i element-ui -S
	
# 2 指定当前项目中使用element ui
	在main.js中引入
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	并且
	//在vue脚手架中使用element ui
	Vue.use(ElementUI);

按钮组件

默认样式按钮

# 1 默认按钮样式
<!--  使用默认按钮组件-->
  <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>
# 2 简洁按钮 鼠标移上去才会显示背景颜色
<!--  使用朴素按钮-->
  <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>
# 圆角按钮
<!--使用圆角按钮-->
  <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>
# 图标按钮
<!--  图标按钮-->
  <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>

效果如图:

详细使用

📑总结

日后使用element ui的相关组件时需要注意的是所有的组件都是ul-组件名称开头.

创建按钮

<el-button >默认按钮</el-button>

按钮属性使用

<el-button type="primary" 属性名=属性值>默认按钮</el-button>

<el-button type="warning" plain round circle  size="mini">主要按钮</el-button>

📑总结

在element中所有组件的属性全部写在组件标签上

Attributes

参数	说明	类型	可选值	默认值
size	尺寸	string	medium / small / mini	—
type	类型	string	primary / success / warning / danger / info / text	—
plain	是否朴素按钮	boolean	—	false
round	是否圆角按钮	boolean	—	false
circle	是否圆形按钮	boolean	—	false
loading	是否加载中状态	boolean	—	false
disabled	是否禁用状态	boolean	—	false
icon	图标类名	string	—	—
autofocus	是否默认聚焦	boolean	—	false
native-type	原生 type 属性	string	button / submit / reset	button

注意❗

在element ui中所有组件哦都是el-组件名称方式进行命名
在element ui中组建的属性使用都是直接将属性名=属性值的方式写在标签上

Link 文字链接组件

<el-link href="#">文字链接</el-link>

连接属性使用

Attributes

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info	default
underline	是否下划线	boolean	—	true
disabled	是否禁用状态	boolean	—	false
href	原生 href 属性	string	—	-
icon	图标类名	string	—	-

注意❕

对于属性值需要Boolean类型的属性需要进行绑定,如下 :underline

<el-link href="#" type="warning" :underline="false">文字链接</el-link>

Layout(栅格)布局组件的使用

通过基础的 24 分栏，迅速简便地创建布局。

在element ui中布局组件将页面划分为多个行 row,每行最多分为24栏(列)

使用Layout组件

<el-row>
	<el-col :span="8">占用8份</el-col>
    <el-col :span="8">占用8份</el-col>
    <el-col :span="8">占用8份</el-col>
</el-row>

为什么element ui或者bootstrap要分成12份或24份呢?

:因为12 24是2 3 4 6的公倍数,布局的时候可以有更多选择,更好的去布局.

⚠️注意

在一个布局组件中,是由row和col组合而成
在使用时要区分row属性和clo属性

Row Attributes

参数	说明	类型	可选值	默认值
gutter	栅格间隔	number	—	0
type	布局模式，可选 flex，现代浏览器下有效	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex 布局下的垂直排列方式	string	top/middle/bottom	top
tag	自定义元素标签	string	*	div

⚠️注意

通过tag属性可以把el-row的标签属性换成别的,例如:🔽

<el-row tag="span"></el-row>

Col Attributes

参数	说明	类型	可选值	默认值
span	栅格占据的列数	number	—	24
offset	栅格左侧的间隔格数	number	—	0
push	栅格向右移动格数	number	—	0
pull	栅格向左移动格数	number	—	0
xs	`<768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
sm	`≥768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
md	`≥992px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
lg	`≥1200px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
xl	`≥1920px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
tag	自定义元素标签	string	*	div

⚠️注意

push和offset的不同

push类似于向右浮动,他会跟右边的元素重叠(如果有的话)
offset类似于margin,他会把右边的元素挤到下一行(如果有的话)

Container 布局容器使用

创建布局容器

<el-container>

</el-container>

容器中包含的子元素

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

容器的嵌套使用

<el-container>
      <!--    header-->
      <el-header><div><h1>我是标题</h1></div></el-header>
      <el-container>
        <!-- asider-->
        <el-aside><div><h1>我是菜单</h1></div></el-aside>
        <!--main-->
        <el-main><div><h1>main</h1></div></el-main>
      </el-container>
      <el-footer><div><h1>footer</h1></div></el-footer>
    </el-container>

效果如下🔽

Container Attributes

参数	说明	类型	可选值	默认值
direction	子元素的排列方向	string	horizontal / vertical	子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal

Header Attributes

参数	说明	类型	可选值	默认值
height	顶栏高度	string	—	60px

Aside Attributes

参数	说明	类型	可选值	默认值
width	侧边栏宽度	string	—	300px

参数	说明	类型	可选值	默认值
height	底栏高度	string	—	60px

Form相关组件

Radio单选框

单选框的创建

  <el-radio v-model="label" label="male"></el-radio>
  <el-radio v-model="label" label="female"></el-radio>

<script>
export default {
  name: "Radio",
  data(){
    return{
      label: ""
    }
  }
}
</script>

⚠️注意

在使用radio单选按钮时至少加入v-model和label属性.

Radio Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—

📑总结

属性使用直接写在对应组件标签上 属性名=属性值

Radio事件的使用

 <el-radio @change="f" border v-model="label" label="male"></el-radio>
  <el-radio @change="f" size="small" border v-model="label" label="female"></el-radio>

<script>
export default {
  name: "Radio",
  data(){
    return{
      label: ""
    }
  },
  methods: {
    f() {   //定义的事件处理函数
      alert("change")
      console.log(this.label);
    }
  }
}
</script>

📑总结

事件的使用也是和属性使用是一致的都是直接写在组件的标签
事件在使用时必须使用vue中绑定事件的方式进行使用如@事件名=事件处理函数(绑定在vue方法中)

Radio按钮组

<el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>

<script>
  export default {
    data () {
      return {
        radio: 3
      };
    }
  }
</script>

Radio-group Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
text-color	按钮形式的 Radio 激活时的文本颜色	string	—	#ffffff
fill	按钮形式的 Radio 激活时的填充色和边框色	string	—	#409EFF

Checkbox多选框的使用

多选框创建

  <el-checkbox v-model="city">北京</el-checkbox>
  <el-checkbox>天津</el-checkbox>
  <el-checkbox>乌鲁木齐</el-checkbox>

<script>
export default {
name: "Checkbox",
  data(){
    return{
      city: true
    }
  }
}
</script>

Checkbox Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
label	选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）	string / number / boolean	—	—
true-label	选中时的值	string / number	—	—
false-label	没有选中时的值	string / number	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Checkbox 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—
checked	当前是否勾选	boolean	—	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	—	false

多选框组与事件

<el-checkbox-group @change="f2" v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>


<script>
export default {
name: "Checkbox",
  data(){
    return{
      checkList: []
    }
  },
  methods: {
    f2(){
      alert(this.checkList)
    }
  }
}
</script>

Input输入框

<el-input v-model="Name"></el-input>

Input Attributes

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea 和其他原生 input 的 type 值	text
value / v-model	绑定值	string / number	—	—
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
show-word-limit	是否显示输入字数统计，只在 `type = "text"` 或 `type = "textarea"` 时有效	boolean	—	false
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
show-password	是否显示切换密码图标	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 `type!="textarea"` 时有效	string	medium / small / mini	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
rows	输入框行数，只对 `type="textarea"` 有效	number	—	2
autosize	自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，	boolean / object	—	false
autocomplete	原生属性，自动补全	string	on, off	off
auto-complete	下个主版本弃用	string	on, off	off
name	原生属性	string	—	—
readonly	原生属性，是否只读	boolean	—	false
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—	—
resize	控制是否能被用户缩放	string	none, both, horizontal, vertical	—
autofocus	原生属性，自动获取焦点	boolean	true, false	false
form	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
tabindex	输入框的tabindex	string	-	-
validate-event	输入时是否触发表单的校验	boolean	-	true

Input Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	仅在输入框失去焦点或用户按下回车时触发	(value: string \| number)
input	在 Input 值改变时触发	(value: string \| number)
clear	在点击由 `clearable` 属性生成的清空按钮时触发	—

方法的使用

<el-input v-model="username" ref="inputs"></el-input><el-button @click="focusInput">focus</el-button>


<script>
export default {
  name: "Input",
  data(){

    return {
      username: ''
    }
  },
  methods: {
    focusInput(){
        //调用获得焦点的方法
      this.$refs.inputs.focus();
      this.$refs.selects.select();
    }
  }
}
</script>

📑总结

在使用组件的方法时需要在对应的组件中加入ref=组件别名
在调用方法时直接使用this.$refs.组件别名.方法名()调用

注意:在element ui中所有组件都存在属性事件和方法

属性:直接写在对应的组件标签上使用方式:属性名=属性值方式

事件:直接使用vue绑定事件方式卸载对应的组件标签上使用方式: @事件名=vue中事件处理函数

方法:1 在对应组件上使用ref=组件别名 2 通过使用this.$refs.组件别名.方法名()进行调用

select选择器组件的使用

组件创建

# 1 数据写死在页面上
<el-select v-model="cityName">
    <el-option value="北京">北京</el-option>
    <el-option value="天津">天津</el-option>
    <el-option value="乌鲁木齐">乌鲁木齐</el-option>
</el-select>
	注意:要求下拉列表中必须存在option的value值  2 要求select中必须绑定值
# 2 动态获取数据
<el-select >
    <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
  </el-select>
  
<script>
export default {
name: "Select",
  data(){
  return {
    options: [
      {id:1,name: "longda"},
      {id:2,name: "lina"},
      {id:3,name: "xiaoming"},
      {id:4,name: "dachui"},
    ]
  }
  }
}
</script>
# 3 获取下拉列表选中的数据
 <el-select v-model="city.id">
    <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
  </el-select>
</div>


<script>
export default {
name: "Select",
  data(){
  return {
    options: [
      {id:'1',name: "longda"},
      {id:'2',name: "lina"},
      {id:'3',name: "xiaoming"},
      {id:'4',name: "dachui"},
    ],
    city:{
      id : ['1']
    }
  }
  }
}
</script>

Select Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
auto-complete	下个主版本弃用	string	—	off
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 `filterable` 使用	boolean	—	false
filter-method	自定义搜索方法	function	—	—
remote	是否为远程搜索	boolean	—	false
remote-method	远程搜索方法	function	—	—
loading	是否正在从远程获取数据	boolean	—	false
loading-text	远程加载时显示的文字	string	—	加载中
no-match-text	搜索条件无匹配时显示的文字，也可以使用`slot="empty"`设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用`slot="empty"`设置	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用	boolean	-	false
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	-	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	-	false

事件,方法的使用同之前的

Switch组件的使用

Switch组建的创建

<el-switch v-model="value"></el-switch>

<script>
export default {
name: "Switchs",
  data(){
  return{
    value:false,
  }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
disabled	是否禁用	boolean	—	false
width	switch 的宽度（像素）	number	—	40
active-icon-class	switch 打开时所显示图标的类名，设置此项会忽略 `active-text`	string	—	—
inactive-icon-class	switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`	string	—	—
active-text	switch 打开时的文字描述	string	—	—
inactive-text	switch 关闭时的文字描述	string	—	—
active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false
active-color	switch 打开时的背景色	string	—	#409EFF
inactive-color	switch 关闭时的背景色	string	—	#C0CCDA
name	switch 对应的 name 属性	string	—	—

DatePicker组件

datePicker创建

  <el-date-picker v-model="createDate">

  </el-date-picker>


<script>
export default {
name: "Date_Picker",
  data(){
  return{
    createDate: '',
  }
  }
}
</script>

Picker Options和Shortcuts的使用

Shortcuts用来增加日期组件的快捷面板
Picker Options:用来对日期控件做自定义配置

Shortcuts使用

<el-date-picker
      v-model="updateDate"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions2">
    </el-date-picker>

<script>
export default {
name: "Date_Picker",
  data(){
  return{
    createDate: '',
    updateDate:'',
    pickerOptions2: {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit('pick', [start, end]);
        }
      }]
    },
  }
  }
}
</script>

Picker Options

<el-date-picker
      v-model="updateDate"
      type="daterange"
      :picker-options="pickerOptions2">
    </el-date-picker>


<script>
export default {
name: "Date_Picker",
  data(){
  return{
    createDate: '',
    updateDate:'',
    pickerOptions2: {
      disabledDate(time){   //用来对日期进行控制
        return time.getTime() >Date.now();
      },      
    },
  }
  }
}
</script>

Upload组件

<el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList">  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>  <el-button size="small" type="primary">点击上传</el-button></el-upload>

<script>
export default {
name: "UploadEL",
  data() {
    return {
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
}
</script>

⚠️注意

在使用upload组件时必须设置action属性,action属性为必要参数不能省略

table表格组件

 <el-table :data="tableData">
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>

<script>
export default {
name: "ELForm",
  data(){
  return {
    tableData: [
      {id: '1',name: 'longda',age: 12},
      {id: '1',name: 'longda',age: 12},
      {id: '1',name: 'longda',age: 12},
      {id: '1',name: 'longda',age: 12}
    ]
  }

  }
}
</script>

posted @ 2020-08-13 15:23 longda666 阅读(2517) 评论(0) 收藏举报

刷新页面返回顶部

longda666

Element ui的基本使用

ElementUi实战

引言

定义

由来

安装Element ui

在vue项目中安装element ui

按钮组件

默认样式按钮

详细使用

创建按钮

按钮属性使用

Attributes

Link 文字链接组件

连接属性使用

Attributes

Layout(栅格)布局组件的使用

使用Layout组件

Row Attributes

Col Attributes

Container 布局容器使用

创建布局容器

容器中包含的子元素

容器的嵌套使用

Container Attributes

Header Attributes

Aside Attributes

Footer Attributes

Form相关组件

Radio单选框

单选框的创建

Radio Attributes

Radio事件的使用

Radio按钮组

Radio-group Attributes

Checkbox多选框的使用

多选框创建

Checkbox Attributes

多选框组与事件

Input输入框

Input Attributes

Input Events

方法的使用

select选择器组件的使用

组件创建

Select Attributes

事件,方法的使用同之前的

Switch组件的使用

Switch组建的创建

Attributes

DatePicker组件

datePicker创建

Shortcuts使用

Picker Options

Upload组件

table表格组件

公告