Checkbox 复选框

基础用法

单独使用仅分为选中与为选中状态，采用 checked 做双向数据绑定值（v-model）。

<template>
  <plv-checkbox label="备选项" v-model="checked" />
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      };
    }
  };
</script>

显示代码

禁用状态 & 只读状态

<template>
  <div>
    <plv-checkbox disabled :checked="false">未选中项</plv-checkbox>
    <plv-checkbox disabled :checked="true">已选中项</plv-checkbox>
    <plv-checkbox readonly :checked="false">未选中项</plv-checkbox>
    <plv-checkbox readonly :checked="true">已选中项</plv-checkbox>
  </div>
</template>

显示代码

复选框组

<template>
  <div>
    <div class="demo-checkbox-group">
      <plv-checkbox-group v-model="checkeds">
        <plv-checkbox value="shanghai">上海</plv-checkbox>
        <plv-checkbox value="guangzhou" disabled>广州</plv-checkbox>
        <plv-checkbox value="beijing">北京</plv-checkbox>
        <plv-checkbox value="nanjing">南京</plv-checkbox>
        <plv-checkbox value="shenzhen">深圳</plv-checkbox>
        <plv-checkbox value="huizhou">惠州</plv-checkbox>
        <plv-checkbox value="hubei">湖北</plv-checkbox>
      </plv-checkbox-group>
    </div>
    <div class="demo-checkbox-group">
      <plv-checkbox-group
        v-model="checkeds"
        :checkboxs="checkboxs" />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkeds: [],
        checkboxs: [{
          label: '上海',
          value: 'shanghai'
        }, {
          label: '广州',
          value: 'guangzhou',
          disabled: true
        }, {
          label: '北京',
          value: 'beijing'
        }, {
          label: '南京',
          value: 'nanjing'
        }, {
          label: '深圳',
          value: 'shenzhen'
        }, {
          label: '惠州',
          value: 'huizhou'
        }, {
          label: '湖北',
          value: 'hubei'
        }]
      };
    }
  };
</script>

<style lang="scss" scoped>
.demo-checkbox-group + .demo-checkbox-group {
  margin-top: 10px;
}
</style>

显示代码

可选项数目限制

<template>
  <plv-checkbox-group
    :checkboxs="checkboxs"
    :min="1"
    :max="5"
    v-model="checkeds" />
</template>

<script>
  export default {
    data() {
      return {
        checkeds: ['nanjing'],
        checkboxs: [{
          label: '上海',
          value: 'shanghai'
        }, {
          label: '广州',
          value: 'guangzhou'
        }, {
          label: '北京',
          value: 'beijing'
        }, {
          label: '南京',
          value: 'nanjing'
        }, {
          label: '深圳',
          value: 'shenzhen'
        }, {
          label: '惠州',
          value: 'huizhou'
        }, {
          label: '湖北',
          value: 'hubei'
        }]
      };
    }
  };
</script>

显示代码

自定义选中图标

通过 checkedIcon 参数控制选中时的图标。

<template>
  <plv-checkbox v-model="checked" checked-icon="minus">备选项</plv-checkbox>
</template>

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

显示代码

边框型选项

<template>
  <div>
    <plv-checkbox type="border" :checked="false">未选中项</plv-checkbox>
    <plv-checkbox type="border" :checked="true">已选中项</plv-checkbox>
    <plv-checkbox type="border" :checked="false" disabled>未选禁用项</plv-checkbox>
    <plv-checkbox type="border" :checked="true" disabled>已选禁用项</plv-checkbox>
    <plv-checkbox type="border" :checked="false" readonly>未选只读项</plv-checkbox>
    <plv-checkbox type="border" :checked="true" readonly>已选只读项</plv-checkbox>
  </div>
</template>

显示代码

自定义选中文本

通过 label、trueLabel、falseLabel 参数或相应的插槽控制选中与未选择时的文本。

<template>
  <div>
    <plv-checkbox
      label="备选项"
      true-label="选中了"
      false-label="未选中"
      v-model="checked"></plv-checkbox>
    <plv-checkbox v-model="checked">
      备选项
      <template slot="trueLabel">选中了</template>
      <template slot="falseLabel">未选中</template>
    </plv-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      };
    }
  };
</script>

显示代码

Checkbox Attributes

参数	说明	类型	可选值	默认值
checked / v-model	复选框是否选中	Boolean	-	false
value	绑定值	String Number	-	-
label	复选框的文本	String	-	-
trueLabel	选中时的文本，优先级高于label	String	-	-
falseLabel	没有选中时的文本，优先级高于label	String	-	-
type	复选框样式	String	border	-
checkedIcon	选中时的复选框内部图标	String	-	check
disabled	是否禁用	Boolean	-	false
readonly	是否只读	Boolean	-	false

Checkbox Events

事件名称	说明	回调参数
change	选中状态改变后触发	checked 是否选中

Checkbox Slot

name	说明
—	复选框文本
trueLabel	选中时的文本，优先级高于label
falseLabel	没有选中时的文本，优先级高于label

Checkbox-group Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Array	-	[]
type	复选框样式	String	border	-
checkedIcon	选中时的复选框内部图标	String	-	check
disabled	是否禁用	Boolean	-	false
readonly	是否只读	Boolean	-	false
max	可勾选的 checkbox 的最大数量	Number	-	-
min	可勾选的 checkbox 的最小数量	Number	-	0
checkboxs	复选框选项（[{ label, value }]）	Array	-	[]

Checkbox-group Events

事件名称	说明	回调参数
change	绑定值改变后触发	value 改变后的值

Checkbox-group Slot

name	说明
—	复选框选项