跳至主要內容

ElementUI

TenSoFlow...大约 12 分钟前端ElementUI

ElementUI

第01章 按钮

基础用法

基础属性

键值值类型功能
type无
primary
succecc
info
warning
danger
text		string控制按钮颜色
plain无淡化按钮颜色
round无控制是否为圆角按钮
circle无控制是否为圆形按钮
iconElementUI所有图标样式string增加图标
// 不同颜色的方形按钮
<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>

// 不同颜色的方形朴素按钮
<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>

禁用按钮

禁用属性

键值值类型功能
:disabledtrue
false		boolean控制是否禁用
disabled无直接禁用
// 按钮禁用状态
<el-button type="primary" disabled>主要按钮</el-button>

// 按钮禁用状态 注意此时应该用 :disabled 其值可以是任何结果为true的
<el-button type="primary" :disabled="true">主要按钮</el-button>
<el-button type="primary" :disabled="1 === 1">主要按钮</el-button>

// 按钮启用状态 注意此时应该用 :disabled 其值可以是任何结果为false的
<el-button type="primary" :disabled="false">主要按钮</el-button>
<el-button type="primary" :disabled="1 > 2">主要按钮</el-button>

文字按钮

文字属性

键值类型功能
typetextstring按钮变为文字按钮
<el-button type="text">文字按钮</el-button>

图标按钮

图标属性

键值类型功能
iconElementUI所有图标样式string增加图标
// 只有一个图标
<el-button type="primary" icon="el-icon-delete"></el-button>
// 图标在左，文字在右
<el-button type="primary" icon="el-icon-search">搜索</el-button>
// 图标在右，文字在左
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

按钮组

按钮组标签

// 标签：<el-button-group></el-button-group>
// 功能：能让标签里面的按钮显示在一起
<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

加载状态

加载属性

键值类型功能
:loadingtrue
false		boolean控制加载状态是否显示
// 显示加载动画 注意此时应该用 :loading 值可以是任何结果为true的
<el-button type="primary" :loading="true">加载中</el-button>

// 禁用加载动画 注意此时应该用 :loading 值可以是任何结果为false的
<el-button type="primary" :loading="false">未加载</el-button>

尺寸

尺寸属性

键值类型功能
size无
small
medium
mini		boolean控制加载状态是否显示
<el-row>
  <el-button>默认按钮</el-button>
  <el-button size="medium">中等按钮</el-button>
  <el-button size="small">小型按钮</el-button>
  <el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
  <el-button round>默认按钮</el-button>
  <el-button size="medium" round>中等按钮</el-button>
  <el-button size="small" round>小型按钮</el-button>
  <el-button size="mini" round>超小按钮</el-button>
</el-row>

总结

el-button标签属性

属性说明类型可选值默认值
size尺寸stringmedium/small/mini
type类型stringprimary/success/warning/danger/info/text
plain是否朴素按钮(淡化按钮颜色)booleanfalse
round是否圆角按钮booleanfalse
circle是否圆形按钮booleanfalse
loading是否加载中状态booleanfalse
disabled是否禁用状态booleanfalse
icon图标类名stringElementUI的所有图标名
autofocus是否默认聚焦booleanfalse
native-type原生type属性stringbutton/submit/resetbutton

el-button标签事件

事件说明回调参数
@click鼠标点击
@dblclick.native鼠标双击

第02章 图标

常用图标

<i class="el-icon-edit">编辑</i>
<i class="el-icon-share">分享</i>
<i class="el-icon-delete">删除</i>
<i class="el-icon-search">搜索</i>
<i class="el-icon-user">用户</i>
<i class="el-icon-setting">用户</i>
<i class="el-icon-star-on">收藏</i>
<i class="el-icon-star-off">取消收藏</i>
<i class="el-icon-upload">上传</i>
<i class="el-icon-download">下载</i>
<i class="el-icon-s-home">主页</i>
<i class="el-icon-s-menu">菜单</i>
<i class="el-icon-folder">文件</i>
<i class="el-icon-message">信件</i>

第03章 文字链接

基础用法

基础属性

键值值类型功能
href所有网址String跳转页面
type无
primary
success
warning
danger
info		String控制文字链接颜色
target_blank
_self
_parent
_top		String_blank新窗口打开
_self当前页面打开
_parent当前框架的父框架打开
_top当前最顶层框架中打开链接
<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>

禁用状态

禁用属性

键值值类型功能
:disabledtrue
false		Boolean控制是否禁用
disabled无直接禁用
// 文字链接禁用状态
<el-link type="primary" disabled>主要链接</el-link>

// 文字链接是禁用状态 注意此时应该用 :disabled 其值可以是任何结果为true的
<el-link type="primary" :disabled="true">主要链接</el-link>
<el-link type="primary" :disabled="1 === 1">主要链接</el-link>

// 文字链接是启用状态 注意此时应该用 :disabled 其值可以是任何结果为false的
<el-link type="primary" :disabled="false">主要链接</el-link>
<el-link type="primary" :disabled="1 > 1">主要链接</el-link>

下划线

下划线属性

键值值类型功能
:underlinetrue
false		Boolean控制文字链接是否有下划线

无:underline属性则默认为有下划线

<div>
  <el-link :underline="false">无下划线</el-link>
  <el-link>有下划线</el-link>
</div>

图标

图标属性

键值类型功能
iconElementUI所有图标样式string增加图标
// 图标在左，文字在右
<el-link icon="el-icon-edit">编辑</el-link>
// 图标在右，文字在左
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>

总结

el-link标签

属性说明类型可选值默认值
type类型stringprimary/success/warning/danger/infodefault
underline是否下划线booleantrue
disabled是否禁用状态booleanfalse
href原生href属性string
icon图标类名stringElementUI的所有图标名
target链接打开位置string_blank _self _parent _top_self

第04章 Form表单

单选框(Radio)

单选属性

键值类型功能
label任意String，Number，Booleanv-model绑定的载体
:disabledtrue
false		Boolean控制是否禁用
disabled无直接禁用
<template>
  <div>
    <el-radio v-model="radio" label="1">单选第一项</el-radio>
    <el-radio v-model="radio" label="2">单选第二项</el-radio>
    <div>
      <!-- disabled直接禁用单选框 -->
      <el-radio disabled v-model="radio" label="1">单选第一项</el-radio>
      <el-radio disabled v-model="radio" label="2">单选第二项</el-radio>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      radio: '1'
    }
  }
}

// 会默认选择《单选第一项》 其中v-model绑定的是label，即用户选择《单选第二项》radio的值为'2'

单选框组

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

<template>
  <div>
    <el-radio-group v-model="radio" @change="radioChange">
      <el-radio :label="3">选项一</el-radio>
      <el-radio :label="6">选项二</el-radio>
      <el-radio :label="9">选项三</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      radio: 3
    }
  },
  methods: {
    /**
     * 单选框改变事件
     * @param {String} labelValue 用户选择单选框所对应的label值
     */
    radioChange (labelValue) {
      console.log(labelValue)
    }
  },
}
</script>

按钮样式单选框

只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性。

单选框组属性

键值类型功能
size无
medium
small
mini		String控制单选框大小
text-color十六进制颜色码如#FFFFFFString按钮形式的 Radio 激活时的文本颜色
fill十六进制颜色码如#FFFFFFString按钮形式的 Radio 激活时的填充色和边框色
<template>
  <div>
    <el-radio-group
      fill="#FFF"
      size="small"
      v-model="radio"
      text-color="#AAA"
      @input="inputChange"
      @change="radioChange"
    >
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: '上海',
    }
  },
  methods: {
    /**
     * 单选框改变事件
     * @param {String} labelValue 用户选择单选框所对应的label值
     */
    radioChange (labelValue) {
      console.log(labelValue)
    },
    /**
     * 单选框改变事件 @input和@change功能相同
     * @param {String} labelValue 用户选择单选框所对应的label值
     */
    inputChange (labelValue) {
      console.log(labelValue)
    }
  },
}
</script>

单选框边框属性

设置border属性可以渲染为带有边框的单选框。

单选框边框

键值类型功能
border无控制单选框是否有边框
<template>
  <div>
    <el-radio v-model="radio" label="1" border>选项一</el-radio>
    <el-radio v-model="radio" label="2" border>选项二</el-radio>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      radio: '1'
    }
  },
  methods: {}
}
</script>

总结

el-radio标签

属性说明类型可选值默认值
value/v-model绑定值string/number/boolean
labelRadio的valuestring/number/boolean
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
sizeRadio的尺寸，仅在border为真时有效stringmedium/small/mini
name原生name属性string

el-radio-button标签

属性说明类型可选值
labelRadio的valuestring/number/boolean
disabled是否禁用booleanfalse
name原生name属性string

el-radio-group标签

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

多选框(Checkbox)

多选框实现单选

为其绑定一个布尔值ture-选中 false-未选中

<template>
  <div>
    <el-checkbox v-model="checked">
      选项一
    </el-checkbox>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: true
    }
  },
  methods: {},
}
</script>

多选框禁用

禁用属性

键值值类型功能
:disabledtrue falseBoolean控制是否禁用
disabled无直接禁用
<template>
  <div>
    <el-checkbox v-model="checkedOne" :disabled="true">
      选项一
    </el-checkbox>
    <el-checkbox v-model="checkedTwo" :disabled="false">
      选项二
    </el-checkbox>
    <el-checkbox v-model="checkedThree" disabled>
      选项三
    </el-checkbox>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checkedOne: true,
      checkedTwo: true,
      checkedThree: false
    }
  },
  methods: {},
}
</script>

多选框组

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为未选中。

<template>
  <el-checkbox-group v-model="listCheck" @change="changeCheckbox">
    <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>
</template>

<script>
export default {
  data () {
    return {
      // 只要label值在数组中就会被选中
      listCheck: ['选中且禁用', '复选框 A']
    };
  },
  methods: {
    /**
     * 复选框选择改变事件
     * @param {Array<String>} arrLabelValue 选中的label值数组
     */
    changeCheckbox (arrLabelValue) {
      console.log(arrLabelValue)
    }
  },
}
</script>

多选框全选

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。

<template>
  <div>
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange">
      全选
    </el-checkbox>
    <div style="margin: 15px 0"></div>
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">
        {{ city }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
  data () {
    return {
      checkAll: false,
      cities: cityOptions,
      isIndeterminate: true,
      checkedCities: ['上海', '北京']
    }
  },
  methods: {
    /**
     * 多选框变化事件
     * @param {boolean} value 是否勾选多选框
     */
    handleCheckAllChange (value) {
      console.log(value)
      this.checkedCities = value ? cityOptions : []
      this.isIndeterminate = false
    },
    /**
     * 多选框变化事件
     * @param {Array<string>} arrLabelValue 选中的label值数组
     */
    handleCheckedCitiesChange (arrLabelValue) {
      console.log(arrLabelValue)
      this.checkAll = (arrLabelValue.length === this.cities.length)
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    }
  }
}
</script>

多选框数量限制

使用 min 和 max 属性能够限制可以被勾选的项目数量。

<template>
  <div>
    <el-checkbox-group 
      v-model="checkedCities"
      :min="0"
      :max="3">
      <el-checkbox v-for="city in cities" :label="city" :key="city">
        {{ city }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳']
  export default {
    data() {
      return {
        checkedCities: ['上海', '北京'],
        cities: cityOptions
      }
    }
  }
</script>

多选框按钮样式

只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外，Element 还提供了size属性。

<template>
  <div>
    <el-checkbox-group v-model="checkboxGroup" @change="changeCheckbox" size="medium">
      <el-checkbox-button v-for="city in cities" :label="city" :key="city">
        {{ city }}
      </el-checkbox-button>
    </el-checkbox-group>
  </div>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
  data () {
    return {
      cities: cityOptions,
      checkboxGroup: ['上海']
    }
  },
  methods: {
    /**
     * 复选框选择改变事件
     * @param {Array<String>} arrLabelValue 选中的label值数组
     */
    changeCheckbox (arrLabelValue) {
      console.log(arrLabelValue)
    }
  }
}
</script>

多选框边框样式

设置border属性可以渲染为带有边框的多选框。

<template>
  <div>
    <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
    <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        checked1: true,
        checked2: false,
      }
    }
  }
</script>

总结

0  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8
处涸辙以犹欢
Copyright © 2024 TenSoFlow