Element-ui的使用

Element-ui 基本使用

一般组件使用

element-ui的基本使用还是十分简单的，首先根据文档的步骤进行安装，导入需要的样式即可，这一块直接看文档就已经说明的很清楚了：文档链接。接着，你只需要找到你想要的样式，然后点开详细代码，复制到你的.vue文件里那么就可以了，例如直接复制官方提供的radio组件(链接)的第一个代码：

<template>
  <div>
      <!-- 因为template里面只能有一个根元素，官方这里拷过来以后在外面加了一层div标签包起来 -->
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
  </div>
</template>

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

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

• 找想要的样式组件
• 复制代码到对应的.vue文件
• 修改对应的数据
• 非组件样式使用

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

图标样式使用
官方提供了很多图标样式（链接），通过阅读文档可以发现：一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（有icon属性的组件，例如el-button），设置icon属性为对应的图标名即可

指令样式使用
例如Loading加载（链接），其提供的是一个指令v-loading，而非一个组件，那么使用也很简单，因为已经注册了全局组件，直接调用就行了，举例：

<template>
  <div>
    <div v-loading="isLoading">这块内容使用v-loading指令，true时loading</div>
    <el-button @click=handle>{
   {
   clickText}}</el-button>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      isLoading