element-ui 使用(4)

velement-ui 使用(4)

10.Form 表单 ✨

由输入框、选择器、单选框、多选框等控件组成，
用以收集、校验、提交数据

W3C 标准中有如下规定：
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在<el-form>标签上添加 @submit.native.prevent
native原生
prevent默认行为

使用

form表单

• Form Attributes form表单标签的属性
  • model表单数据对象✨
  • rules表单验证规则✨
• Form Methods form表单拥有的方法
  • validate对整个表单进行校验的方法，参数为一个回调函数[若不传入回调函数，则会返回一个 promise]✨
  • resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果✨
• Form Eventsfrom表单事件
  • validate被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）

form-item 表单项

• Form-Item Attributes 表单项属性
  • prop表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的✨✨
  • label 标签文本
  • required是否必填，如不设置，则会根据校验规则自动生成,默认false
• Form-Item Methods 表单项方法
  • resetField对该表单项进行重置，将其值重置为初始值并移除校验结果
  • clearValidate

11.Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

使用

//绑定v-model到一个Boolean类型的变量。
//可以使用active-color属性与inactive-color属性来设置开关的背景色。
<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

Attributes 属性

• value / v-model绑定值✨
• 背景色
  • active-color switch 打开时的背景色
  • inactive-color switch 关闭时的背景色
• 文字描述
  • active-text switch 打开时的文字描述
  • inactive-text switch 关闭时的文字描述

Events 事件

• change switch 状态发生变化时的回调函数

Methods 方法

• focus 使 Switch 获取焦点

效果

12.Checkbox 多选框

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

使用

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

Attributes属性

• value / v-model绑定值
• checked当前是否勾选
• disabled是否禁用

Events 事件

• change当绑定值变化时触发的事件

13.Radio 单选框

在一组备选项中进行单选
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

使用

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

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

Attributes 属性

• value / v-model绑定值
• labelRadio 的 value
• name原生 name 属性

Events 事件

• change绑定值变化时触发的事件 ,回调参数:选中的 Radio label 值

Radio-group 单选框组

属性事件与单选框相似

效果

14.Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。
适用广泛的基础单选

使用

<template>
  <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>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

Attributes 属性

• value / v-model绑定值✨
• multiple是否多选
• value-key作为 value 唯一标识的键名，绑定值为对象类型时必填✨
• placeholder占位符

Events 事件

• change选中值发生变化时触发*(目前的选中值)
• blur当 input 失去焦点时触发
• focus当 input 获得焦点时触发

Slots 插槽

• 匿名作用域插槽 — Option 组件列表
• prefix —Select 组件头部内容
• empty—无选项时的列表

Methods 方法

• focus 使 input 获取焦点
• blur使 input 失去焦点，并隐藏下拉框