Check 复选项

Scan me!

引入

  1. import { Check, CheckBox, CheckGroup, CheckList } from 'mand-mobile'
  3. Vue.component(Check.name, Check)
  4. Vue.component(CheckBox.name, CheckBox)
  5. Vue.component(CheckGroup.name, CheckGroup)
  6. Vue.component(CheckList.name, CheckList)

代码演示

复选项

Check 选择项组 - 图2

  1.         <template>
  2.   <div class="md-example-child md-example-child-check md-example-child-check-0">
  3.     <md-check v-model="checked" label="复选项" />
  4.     <md-check label="禁用" disabled />
  5.     </div>
  6. </template>
  8. <script>
  9. import {Check} from 'mand-mobile'
  11. export default {
  12.   name: 'check-demo',
  13.   components: {
  14.     [Check.name]: Check,
  15.   },
  16.   data() {
  17.     return {
  18.       checked: false,
  19.     }
  20.   },
  21. }
  23. </script>
  24.  
  25.

复选框

Check 选择项组 - 图3

        <template>
  <div class="md-example-child md-example-child-check md-example-child-check-2">
    <md-check-box name="day" v-model="pay" label="日缴" disabled />
    <md-check-box name="month" v-model="pay" label="月付" />
    <md-check-box name="season" v-model="pay" label="季度费" />
    </div>
</template>

<script>
import {CheckBox} from 'mand-mobile'

export default {
  name: 'check-demo',
  components: {
    [CheckBox.name]: CheckBox,
  },
  data() {
    return {
      pay: '',
    }
  },
}

</script>

复选列表

Check 选择项组 - 图4

        <template>
  <div class="md-example-child md-example-child-check md-example-child-check-4">
    <md-field title="复选列表">
      <md-check-list
        v-model="favorites"
        icon="right"
        icon-inverse=""
        :options="fruits"
      />
    </md-field>
    </div>
</template>

<script>
import {Field, CheckList} from 'mand-mobile'

export default {
  name: 'check-demo',
  components: {
    [Field.name]: Field,
    [CheckList.name]: CheckList,
  },
  data() {
    return {
      favorites: ['apple'],
      fruits: [
        {value: 'watermelon', label: '西瓜'},
        {value: 'apple', label: '苹果'},
        {value: 'banana', label: '香蕉'},
        {value: 'orange', label: '橙子'},
        {value: 'tomato', label: '西红柿', disabled: true},
      ],
    }
  },
}

</script>

<style lang="stylus" scoped>
.md-example-child
  font-size 28px
</style>

复选项组

Check 选择项组 - 图5

        <template>
  <div class="md-example-child md-example-child-check md-example-child-check-1">
    <md-check-group v-model="favorites">
      <md-check name="watermelon" label="西瓜" />
      <md-check name="apple" label="苹果" />
      <md-check name="banana" label="香蕉" />
      <md-check name="orange" label="橙子" />
      <md-check name="tomato" label="西红柿" disabled />
    </md-check-group>
    </div>
</template>

<script>
import {Check, CheckGroup} from 'mand-mobile'

export default {
  name: 'check-demo',
  components: {
    [Check.name]: Check,
    [CheckGroup.name]: CheckGroup,
  },
  data() {
    return {
      favorites: ['apple'],
    }
  },
}

</script>

复选框组

Check 选择项组 - 图6

        <template>
  <div class="md-example-child md-example-child-check md-example-child-check-3">
    <md-check-group v-model="insurants">
      <md-check-box name="self" disabled>自己</md-check-box>
      <md-check-box name="couple">配偶</md-check-box>
      <md-check-box name="parent">父母</md-check-box>
      <md-check-box name="child">子女</md-check-box>
    </md-check-group>
    </div>
</template>

<script>
import {CheckBox, CheckGroup} from 'mand-mobile'

export default {
  name: 'check-demo',
  components: {
    [CheckBox.name]: CheckBox,
    [CheckGroup.name]: CheckGroup,
  },
  data() {
    return {
      insurants: ['self'],
    }
  },
}

</script>

复选列表

Check 选择项组 - 图7

        <template>
  <div class="md-example-child md-example-child-check md-example-child-check-4">
    <md-field title="复选列表">
      <md-check-list
        v-model="favorites"
        iconPosition="left"
        :options="fruits"
      />
    </md-field>
  </div>
</template>

<script>
import {Field, CheckList} from 'mand-mobile'

export default {
  name: 'check-demo',
  components: {
    [Field.name]: Field,
    [CheckList.name]: CheckList,
  },
  data() {
    return {
      favorites: ['apple'],
      fruits: [
        {value: 'watermelon', label: '西瓜', brief: '选项摘要描述'},
        {value: 'apple', label: '苹果', brief: '选项摘要描述'},
        {value: 'banana', label: '香蕉', brief: '选项摘要描述'},
        {value: 'orange', label: '橙子', brief: '选项摘要描述'},
        {value: 'tomato', label: '西红柿', brief: '选项摘要描述', disabled: true},
      ],
    }
  },
}

</script>

<style lang="stylus" scoped>
  .md-example-child
    font-size 28px
</style>

API

Check Props

属性说明类型默认值备注
name唯一键值anytrue当选中时，双向绑定的值
v-model选中的值anyfalse-
label选项文案String--
disabled是否禁用选择Booleanfalse-
icon选中项图标名称Stringchecked-
icon-inverse未选中项图标名称Stringchecke-
icon-disabled禁用项选择图标名称Stringcheck-disabled-
icon-svg2.3.0+使用svg图标Booleanfalse-
size图标大小Stringmd-
—-

CheckBox Props

属性说明类型默认值备注
name唯一键值anytrue当选中时，双向绑定的值
v-model选中的值anyfalse-
disabled是否禁用选择Booleanfalse-

CheckGroup Props

复选组，用以选中多个复选项。与Check或CheckBox组合使用。

属性说明类型默认值备注
v-model选中的值Array--
max最多选择几个Number00为不限制

CheckGroup Methods

check(name)
参数说明类型默认值
name需要选中的键值String-
uncheck(name)
参数说明类型默认值
name需要去掉的键值String-
toggle(name)
参数说明类型默认值
name需要反选的键值String-

CheckList Props

属性说明类型默认值备注
v-model选中项的valueArray--
options选项数据源Array<{text, value, disabled, …}>[]disabled为选项是否禁用
icon2.3.0+选中项的图标Stringchecked-
icon-inverse2.3.0+非选中项的图标Stringcheck-
icon-disabled2.3.0+禁用项的图标Stringcheck-disabled-
icon-size2.3.0+图标大小Stringmd-
icon-svg2.3.0+使用svg图标Booleanfalse-
icon-position2.3.0+图标位置Stringrightleft, right
is-slot-scope是否强制使用或不使用slot-scopeBoolean-某些情况下需要根据业务逻辑动态确定是否使用，可避免直接组件上加if/else

CheckList Slots

<template>
  <md-check-list :options="data">
    <template slot-scope="{ option }">
      <div class="custom-title" v-text="option.text"></div>
      <div class="custom-brief">{{ option.text }}的自定义描述</div>
    </template>
  </md-check-list>
</template>