Element-UI的使用

Element-ui概述

Element-ui，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

element-ui的上手使用还是挺容易的，在理想情况下，只需要以下步骤：

1. 找想要的样式组件

2. 复制代码到对应的.vue组件

3. 修改对应的数据

4. 1.1 Element-ui介绍及文档

   非组件样式

   官方提供的样式中有一部分并非是组件样式，比如：字体图标、全局指令、全局事件等，这里简单说明下这类样式的使用方法

5. 图标样式

   一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（可使用icon属性，例如el-button），设置icon属性为对应的图标名。

   <i class='el-icon-user-solid'></i>

6. 指令样式

   例如Loading加载，其提供的是一个指令v-loading，使用时直接调用就行。

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

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