美文网首页
Element UI 学习笔记

Element UI 学习笔记

作者: 遇见I你 | 来源:发表于2021-03-23 16:09 被阅读0次

    官方文档

    01. Element UI 入门和安装

      1. Element UI : 一套为传统桌面准备的基于 Vue.js 的前端组件库；
      1. 它是基于 Vue-cli 脚手架下，需要学习完毕 Vue.js（核心篇+工具篇）;
      1. 安装环境，需要安装 Node.js 环境、Vue.js 脚手架等工具；
      1. 首先，安装Vue.js脚手架， 
        vue create cli
      1. 切换到安装好的 cli 目录下，安装 Element UI，命令如下： 
        npm i element-ui -S
      1. 在脚手架 main.js 引入 Element UI，具体命令如下: 
        import ElementUI from 'element    
import 'element-ui/lib/theme-chalk/index.css'     

Vue.use(ElementUI)

    02. Layout 布局

      1. 基本概念：一行通过分割为24栅格栏进行布局，如果要占满一行如下： 
        <!-- el-row 表示一行 -->
<!-- el-col 表示一列 -->
<el-row>
   <el-col :span="24">24</el-col>
</el-row>
      1. 如何设置18个栅格栏位，那么会留出6个位置是空白区域； 
        <el-row>
    <el-col :span="18">18</el-col>
</el-row>
  
.el-row {
      background-color: #42b983;
      margin: 20px 0;
}
.el-col {
      background-color: pink;
      color: white;
      padding: 10px 0;
}
      1. 如果想要四列占满24个栅格栏位，那么每列占6个栅格栏位； 
        <el-row>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
</el-row>

.el-col {
    background-color: pink;
    color: white;
    padding: 10px 0;
    border-right: 1px solid #eee;
    box-sizing: border-box;  /* 边框不占位 */
}
      1. 手册里 el-col 子元素还有一层 div，它可以被 :gutter 设置为间隔； 
        <el-row :gutter="10">
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
</el-row>
        PS: 通过上面可以实现各种各样的混合布局，总计算值小于等于24即在一行内；
      1. 使用 type="flex" 来设置栏位的对齐方式，可以用过 justify 来设置方向； 
        <el-row type="flex" justify="centet"></el-row>
      1. 通过使用 :offset=n 来设置栏位之间的偏移量； 
        <el-col :span="6" :offset="1">

    03. Container 布局

      1. 如果我们想要快速布局一个类后台布局的样式，可直接使用Container布局；
      • <el-container> 是外部布局容器；
      • <el-header> 表示头；
      • <el-footer> 表示脚；
      • <el-main> 表示主体；
      • <el-aside> 表示侧栏；
      1. 布局的方式手册提供了好几种，我们就使用最常用的一种即可，类后台方式： 
        <el-container>
   <el-header> header </el-header>
   <el-container>
       <el-aside> aside </el-aside>
       <el-main> main </el-main>
   </el-container>
   <el-footer> footer </el-footer>
</el-container>

    04. Basic 组件规范

      1. 纯理论，了解关于颜色、字体、边框等规范要求：
      • 颜色：主色、辅助色、中性色；
      • 字体：字体、字号、行高；
      • 边框：实线、虚线、圆角、投影；

    05. Icon 图标 和 Link文字

    1. Icon 图标
      1. UI 提供了一套非常丰富的图标系统，基本上可以满足所有正常场景下的要求；
      1. 一般来说，具体使用采用<i>标签来直接插入，当然也可以通过按钮和链接插入；
      <i class="el-icon-edit" style="margin-right:20px"></i>
<el-button type="primary" class="el-icon-search"></el-button>
    2. Link文字
      1. Link 文字即超链接，提供了以下几种颜色方案：
      <el-link type="primary">链接</el-link>
<el-link type="danger">链接</el-link>
<el-link type="success">链接</el-link>
<el-link type="warning">链接</el-link>
<el-link type="info">链接</el-link>
      1. disabled 属性，能让链接禁用；悬停可以通过 :underline="false" 关闭；
      <el-link type="warning" disabled>链接</el-link>
<el-link type="info" :underline="false">链接</el-link>
      1. Link 文字也支持使用 icon 图标的功能；
      <el-link type="success" class="el-icon-edit">链接</el-link>

    06. Button 按钮

      1. Button 按钮和上节的 Link 文字一样，有固定的几个样式：
      <el-button type="primary">按钮</el-button>
<el-button type="danger">按钮</el-button>
<el-button type="success">按钮</el-button>
<el-button type="warning">按钮</el-button>
<el-button type="info">按钮</el-button>
      1. 使用 plain 属性，可以实现镂空效果； 使用 disabled 属性，可以禁用；
      <el-button type="warning" plain>按钮</el-button>
<el-button type="info" disabled>按钮</el-button>
      1. 使用 type="text" 可以将 button 转成纯文本按钮；
      <el-button type="text">文字按钮</el-button>
      1. 使用 <el-button-group> 可以将多个按钮设置成组合按钮；
      <el-button-group>
      <el-button type="primary" class="el-icon-arrow-left">上一页</el-button>
      <el-button type="primary">下一页<i class="el-icon-arrow-right"></i></el-button>
</el-button-group>
      1. 使用 :loading="true" 实现加载中效果；
      <el-button type="primary" :loading="true">加载中</el-button>
      1. 使用 size="small" 等属性，实现三种大小；
      <!-- size: medium / small / mini -->
<el-button type="primary" size="samll">按钮</el-button>

    07. Radio 和 Checkbox

    1. Radio 单选框
      1. 常用的单选框，具体如下：
      <el-radio v-model="sex" label="1">男</el-radio>
<el-radio v-model="sex" label="2">女</el-radio>

data() {
    return {
        sex: '1'
    }
}

      PS: 这里 v-model 和 sex 进行双向绑定，label 相当于 value，且和 sex 值一致则首选；

      1. 使用群组单选框，可以将双向绑定置顶操作，具体如下：
      <el-radio-group v-model="city">
    <el-radio :label="1">北京</el-radio>
    <el-radio :label="2">上海</el-radio>
    <el-radio :label="3">广州</el-radio>
</el-radio-group>

data() {
  return {
      city: 1
  }
}

      PS：禁用设置：disabled; 边框设置：border；

      1. 可以使用 el-radio-button 实现按钮式单选框，size 可以设置大小；
      <el-radio-button label="1">北京</el-radio-button>

      PS：可以再群组 el-radio-button 设置 size 属性，值为：medium、small、mini ；

      1. 单选框或群组单选都具有 change 事件，改变后即可触发；
      <el-radio-group v-model="city" @change="radioChange">
    <el-radio :label="1">北京</el-radio>
    <el-radio :label="2">上海</el-radio>
    <el-radio :label="3">广州</el-radio>
</el-radio-group>

methods: {
  // 方法
  radioChange(res) {
      console.log('结果 --- ', res);
  }
}
    2. Checkbox 复选框
      1. 和单选框基本类似，复选框具体如下：
      <el-checkbox-group v-model="checklist">
      <el-checkbox label="音乐"></el-checkbox>
      <el-checkbox label="体育"></el-checkbox>
      <el-checkbox label="电脑"></el-checkbox>
</el-checkbox-group>

return {
    checklist: ['体育', '电脑']
}

      PS：单一复选框，比如协议确定，直接使用 el-checkbox 不需要群组；

      1. 使用 :max / :min , 可选择最大/最小的勾选数量；
      <el-checkbox-group v-model="checklist" :max="2">
      1. 和单选框一样，支持使用 el-checkbox-button 样式；
      <el-checkbox-button label="音乐"></el-checkbox-button>
      1. 事件和 radio 一样，支持 change ，具体如下：
      <el-checkbox-group v-model="checklist" @change="radioChange">

      PS：其余和单选框类似，注意 button 样式和普通样式的属性区别；

    08. Input 输入框

      1. 基础 Input 输入框，带双向绑定；
      <el-input v-model="input" placeholder="请输入内容"></el-input>

data() {
  return {
      input: ''
  }
}
      1. 使用 clearable 属性，提供框内清空按钮；使用 show-password 实现密码框；
      <el-input v-model="input" placeholder="请输入内容" clearable ></el-input>
<el-input v-model="input" placeholder="请输入内容" show-password></el-input>
      1. 使用 maxlength 属性，设置输入限制；
      <el-input v-model="input" placeholder="请输入内容" maxlength="6" show-word-limit></el-input>
      1. 使用 prefix-icon 设置前缀内置图标；使用 suffix-icon 设置后缀内置图标；
      前置图标：<el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
后置图标：<el-input placeholder="请输入内容" suffix-icon="el-icon-edit"></el-input>

      ps：支持 slot 方式，具体如下

      <el-input>
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
      1. 使用 type="textarea"，可以将输入框设置成文本域；
      <el-input v-model="input" placeholder="请输入内容" type="textarea"></el-input>

      ps：使用属性 autosize 可自动扩展其高度；

      1. 使用 <template> 可以实现复合型输入库；
      <el-input>
    <template slot="prepend">http://</template>
    <template slot="append">.com</template>
</el-input>

      ps：和之前的表单一样可以使用 size 来设置尺寸；

      1. 可以通过输入库激活或输入的方式匹配数据列表内的相关信息；
      <el-autocomplete v-model="autocomplete" placeholder="请输入内容" :fetch-suggestions="querySearch"></el-autocomplete>

      ps: querySearch 详细见 Element UI 文档
      ps：事件，输入库有：focus、blur、select；自动完成有：select、change；

    09. InputNumber

      1. 基础 InputNumber 计数器，带双向绑定；
      <el-input-number v-model="inum"></el-input-number>

data() {
  return {
      inum: 1
  }
}
      1. 使用 :max / :min 限制最大值和最小值，支持 change 事件；
      <el-input-number v-model="inum" @change="inputChange" :min="1" :max="10"></el-input-number>

inputChange(value) {
   console.log(value);
}
      ps：设置 disabled 禁用；设置 :step=1 为增减步长；设置 :precision=2 为小数点精度； 
      <el-input-number v-model="inum" @change="inputChange" :step='1' :precision='2'></el-input-number>
      1. 使用 controls-position 可设置增减按钮的位置；
      <el-input-number value="inum" controls-position="right"></el-input-number>
      1. 事件支持：change、blur、foucs，方法支持：focus、select（区别无回调）

    10. Select 选择器

      1. 基础 select 选择器：
      <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
</el-select>

data() {
  return {
      value: '',
      options: [
          {
              value: 1,
              label: '北京'
          },{
              value: 2,
              label: '上海'
          },{
              value: 3,
              label: '广州'
          }
      ]
   }
}
      1. 有两种禁用：1. 在 el-select 设置； 2. 在 el-option 设置；
      <el-select v-model="value" placeholder="请选择" disabled>  
<!-- 或 -->
<el-option :disabled="item.value == 1"></el-option>
      1. 使用 clearable 属性，清空选择的项目；使用 multiple，实现多选项目；
      <el-select v-model="value" placeholder="请选择" clearable multiple >
      1. 使用 filterable 属性，执行选项搜索；
      <el-select v-model="value" placeholder="请选择" filterable>
      1. 关于对应的属性、事件，基本和之前的类似；
      <el-select v-model="value" placeholder="请选择" size="mini" @change="change">

    11. Cascader 选择器

      1. 基础 cascader 选择器：
      <el-cascader :options="options" v-model="value"> </el-cascader>

data() {
    return {
        value: 1,
        options: [{
            value: 1,
            label: "北京",
            children: [{
              value: 11,
              label: '北京二级11'
             },{
              value: 12,
              label: '北京二级12'
             },{
              value: 13,
              label: '北京二级13'
             }]
           }  
        ]
    }
}
      1. 默认是通过 click 点击来实现菜单的展开，我们也可以设置为 hover；
      <el-cascader v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }">
</el-cascader>
      1. 使用 disabled 和 clearable，禁用和清空，和 Select 选择器一样；
      <el-cascader v-model="value"
        :options="options" clearable disabled>
</el-cascader>
      1. 使用 :show-all-levels 来限制获取到的是最后一级的内容，设置 false 即可；
      <el-cascader v-model="value"
        :options="options"
        :show-all-levels="false">
</el-cascader>
      1. 使用 :props 来设置复选框多选；
      <el-cascader v-model="value"
        :options="options"
        :show-all-levels='false'
        :props="props"></el-cascader>

data() {
  return {
      props: {
         multiple: true
      }
  }
}

    12. Switch 开关

      1. 基本用法
      <el-switch v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
          value: true
      }
    }
  };
</script>
      1. 除了 Boolean 类型，也可以是 String 或 Number 类型；
      <el-switch v-model="value"
      active-color="#13ce66"
      inactive-color="#ccc"
      active-value="100"
      nactive-value="0"
      @change="switchChange"></el-switch>

data() {
  return {
    value: '0',
  };
},

methods: {
  switchChange(value) {
    console.log(value);
  },
}

    13. Slider 滑块

      1. 基本用法：
      <el-slider v-model="value"></el-slider>

data() {
  return {
      value: 0
  }
}
      1. 使用 :show-tooltip 实现隐藏文本提示； :format-tootip 实现自定义格式化；
      <el-slider v-model="value" :show-tooltip="false"></el-slider>
<el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>

methods: {
  formatTooltip(value) {
    return value / 100;
  }
}
      1. 使用 :step 实现离散效果，在使用 show-stops 实现断点效果；
      <el-slider v-model="value3" :step='10'></el-slider>
<el-slider v-model="value3" :step='10' show-stops ></el-slider>
      1. 使用 show-input 可自带输入框；
      <el-slider v-model="value" show-input></el-slider>
      1. 使用 range 实现范围选择；
      <el-slider v-model="value" range :min='1' :max='10'></el-slider>

value: [4, 6]

    14. TimePicker 时间选择

      1. 选择一个固定时间点，具体如下：
      <el-time-select v-model="value"
    :picker-options= "{
         start: '08:30',
         step: '00:15',
         end: '18:30'
     }" placeholder="选择时间">
</el-time-select>

data() {
  return {
    value: ''
  }
}
      1. 选择一个任意时间点，具体如下：
      <el-time-picker v-model="value1" arrow-control
    :picker-options= "{
        selectableRange: '18:00:00 - 20:00:00'
    }"
    placeholder="选择时间">
</el-time-picker>

      ps：arrow-control 属性可开启箭头选择，而 selectableRange 是限制时间范围；

      1. 丰富的任意时间范围，具体如下：
      <el-time-picker v-model="value2" 
     is-range
     range-separator='至'
     start-placeholder='开始时间'
     end-placeholder='结束时间'>
</el-time-picker>

      ps：is-range 开启丰富的任意时间范围，其它字面意思；
      ps：属性方法和之前组件类似。

    15. DatePicker 日期选择

      1. 选择一个基础的日期，如下：
      <el-date-picker v-model="value" placeholder="选择日期"></el-date-picker>

data() {
  return {
    value: ''
  }
}
      1. 可以设置一个 type 属性，设置获取的值：
      <el-date-picker v-model="value" type='date' placeholder="选择日期"></el-date-picker>

      ps：type 设置为 datetime，可以获取到日期+时间，其它的可参考文档说明；

      1. 自定义快捷选项的日期选择，具体如下：
      <el-date-picker v-model="value" type="datetime" placeholder="选择日期" :picker-options="getPicker"></el-date-picker>

data() {
return {
  value: '',
  // 属性对象名是自定义的
  getPicker: {
      // shortcuts 是固定名称，标识设置快捷栏
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date());
        }
       }, {
        text: '昨天',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit('pick', date);
        }
       }, {
        text: '一周前',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', date);
        }
      }]
    }
  }
}
      1. 选定一个范围日期，具体如下：
      <el-date-picker v-model="value2" 
     type='monthrange'
     range-separator='至'
     start-placeholder='开始月份'
     end-placeholder='结束月份'>
</el-date-picker>
      1. 选定一个日期，并进行格式化，具体如下：
      <el-date-picker v-model="value" 
                type='datetime'
                placeholder='选择日期'
                format="yyyy 年 MM 月 dd 日"
                :picker-options="getPicker">
</el-date-picker>

    相关文章

      网友评论

          本文标题：Element UI 学习笔记

          本文链接：https://www.haomeiwen.com/subject/zcazcltx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Element UI 学习笔记|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！