Element-ui概述
Element-ui,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。
element-ui的上手使用还是挺容易的,在理想情况下,只需要以下步骤:
-
找想要的样式组件
-
复制代码到对应的
.vue
组件 -
修改对应的数据
-
1.1 Element-ui介绍及文档
非组件样式
官方提供的样式中有一部分并非是组件样式,比如:字体图标、全局指令、全局事件等,这里简单说明下这类样式的使用方法
-
图标样式
一般情况下,使用
i
标签,并将class
属性设置成对应的图标名即可;而对于别的组件希望引入图标时(可使用icon
属性,例如el-button
),设置icon
属性为对应的图标名。<i class='el-icon-user-solid'></i>
-
指令样式
例如
Loading加载
,其提供的是一个指令v-loading
,使用时直接调用就行。 -
method
<template> <div> <!-- 监听change事件 --> <el-input @change="handleChange" v-model="name" ref="nameInput"> <label slot="prepend">用户名:</label> </el-input> <el-button @click="handle">input组件 获取焦点</el-button> </div> </template> <script> export default { data() { return { name: "zhangsan" }; }, methods: { handle() { this.$refs.nameInput.focus(); // 调用focus方法聚焦到对应的input组件 } } }; </script>
option
-
<template> <div> <el-time-select v-model="value1" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" ></el-time-select> <!-- picker-options是object类型,option里则提供了各种该对象里的参数 --> </div> </template> <script> export default { data() { return { value1: "" }; } }; </script>