FS-UI v0.1.33

Checkbox 选择框

使用指南

import { Checkbox, CheckboxGroup } from 'fs-ui'
export default {
  components: {
    Checkbox,
    CheckboxGroup
  }
}
1
2
3
4
5
6
7

代码演示

  • 基本选择框
<fs-checkbox v-model="checked00" :full="false"/>
<fs-checkbox v-model="checked"/>
<fs-checkbox :circle="false" v-model="checked0">店铺名称</fs-checkbox>
<fs-checkbox v-model="checked1" @change="change">店铺名称</fs-checkbox>
<fs-checkbox v-model="checked2" >店铺名称</fs-checkbox>
1
2
3
4
5
export default {
  data () {
    return {
      checked00: true,
      checked: true,
      checked0: true,
      checked1: true,
      checked2: false
    }
  },
  methods: {
    change (val) {
      console.log(val)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 自定义图标
<fs-checkbox v-model="checked3" icon="lock">全部员工</fs-checkbox>
<fs-checkbox v-model="checked4" icon="lock">全部员工</fs-checkbox>
1
2
export default {
  data () {
    return {
      checked3: true,
      checked4: false
    }
  }
}
1
2
3
4
5
6
7
8
  • 禁用状态
<fs-checkbox v-model="checked5" disabled>全部员工</fs-checkbox>
<fs-checkbox v-model="checked6" disabled>全部员工</fs-checkbox>
1
2
export default {
  data () {
    return {
      checked5: true,
      checked6: false
    }
  }
}
1
2
3
4
5
6
7
8
  • 媒体样式
<fs-checkbox
  v-model="checked7"
  type="media"
  title="收银员"
  subtitle="账号：2314235346">
    <fs-icon name="user"/>
</fs-checkbox>

<fs-checkbox
  v-model="checked8"
  type="media"
  title="收银员"
  subtitle="账号：2314235346">
    <fs-icon name="user"/>
</fs-checkbox>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
  data () {
    return {
      checked7: true,
      checked8: false
    }
  }
}
1
2
3
4
5
6
7
8
  • 多选
<fs-checkbox-group v-model="checked9" @change="change">
  <fs-checkbox name="1">世界</fs-checkbox>
  <fs-checkbox name="2">中国</fs-checkbox>
  <fs-checkbox name="3">湖北</fs-checkbox>
  <fs-checkbox name="4">武汉</fs-checkbox>
</fs-checkbox-group>
1
2
3
4
5
6
export default {
  data () {
    return {
      checked9: []
    }
  },
  methods: {
    change (val) {
      console.log(val)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 最多选3个
<fs-checkbox-group v-model="checked10"
  @change="change" :max="3">
  <fs-checkbox name="1">世界</fs-checkbox>
  <fs-checkbox name="2">中国</fs-checkbox>
  <fs-checkbox name="3">湖北</fs-checkbox>
  <fs-checkbox name="4">武汉</fs-checkbox>
</fs-checkbox-group>
1
2
3
4
5
6
7
export default {
  data () {
    return {
      checked10: []
    }
  },
  methods: {
    change (val) {
      console.log(val)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 多选-禁用
<fs-checkbox-group v-model="checked11"
  disabled @change="change">
  <fs-checkbox name="1">世界</fs-checkbox>
  <fs-checkbox name="2">中国</fs-checkbox>
  <fs-checkbox name="3">湖北</fs-checkbox>
  <fs-checkbox name="4">武汉</fs-checkbox>
</fs-checkbox-group>
1
2
3
4
5
6
7
export default {
  data () {
    return {
      checked11: ['1']
    }
  },
  methods: {
    change (val) {
      console.log(val)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 自定义前缀单选
<fs-checkbox v-model="checked12">
  <div slot="prefix">
    <fs-icon name="wechatpay" class="title-icon" />微信收款
  </div>
</fs-checkbox>

<fs-checkbox v-model="checked12" :circle="false">
  <div slot="prefix">
    微信收款
  </div>
</fs-checkbox>
1
2
3
4
5
6
7
8
9
10
11
export default {
  data () {
    return {
      checked12: true
    }
  }
}
1
2
3
4
5
6
7
  • 自定义前缀多选
<fs-checkbox-group v-model="checked13" @change="change">
  <fs-checkbox name="1">
    <div slot="prefix">
      <fs-icon name="wechatpay" class="title-icon" />微信收款
    </div>
  </fs-checkbox>
  <fs-checkbox name="2">
    <div slot="prefix">
      <fs-icon name="jdpay" class="title-icon" />支付宝收款
    </div>
  </fs-checkbox>
  <fs-checkbox name="3">
    <div slot="prefix">
      <fs-icon name="alipay" class="title-icon" />京东收款
    </div>
  </fs-checkbox>
</fs-checkbox-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
  data () {
    return {
      checked13: []
    }
  },
  methods: {
    change (val) {
      console.log(val)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 自定义后缀单选
<fs-checkbox v-model="checked14">
  <div slot="suffix">
    <fs-icon name="wechatpay" class="title-icon" />
  </div>
  微信收款
</fs-checkbox>

<fs-checkbox v-model="checked14" :circle="false">
  <div slot="suffix">
    <fs-icon name="wechatpay" class="title-icon" />
  </div>
  微信收款
</fs-checkbox>
1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
  data () {
    return {
      checked14: true
    }
  }}
}
1
2
3
4
5
6
7
  • 自定义后缀多选
<fs-checkbox-group v-model="checked15" @change="change">
  <fs-checkbox name="1">
    <div slot="suffix">
      <fs-icon name="wechatpay" class="title-icon" />
    </div>
    微信收款
  </fs-checkbox>
  <fs-checkbox name="2">
    <div slot="suffix">
      <fs-icon name="jdpay" class="title-icon" />
    </div>
    支付宝收款
  </fs-checkbox>
  <fs-checkbox name="3">
    <div slot="suffix">
      <fs-icon name="alipay" class="title-icon" />
    </div>
    京东收款
  </fs-checkbox>
</fs-checkbox-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
  data () {
    return {
      checked15: []
    }
  },
  methods: {
    change (val) {
      console.log(val)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 其他应用-删除
<fs-checkbox
  :name="item.value"
  :value="true"
  :circle="false"
  icon="minus-s"
  v-for="(item, key) in data"
  :key="key"
  @change="changeDele(key)">
  {{item.name}}
</fs-checkbox>
1
2
3
4
5
6
7
8
9
10
export default {
  data () {
    return {
      data: [{
        name: '删除列表1',
        value: '1'
      }, {
        name: '删除列表2',
        value: '2'
      }, {
        name: '删除列表3',
        value: '3'
      }]
    }
  },
  methods: {
    changeDele (index) {
      this.data.splice(index, 1)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Checkbox属性

参数 说明 类型 默认值
name 唯一值,单选可为空，多选必传作为唯一依据 String | Number -
v-model 当前是否选中 Boolean false
disabled 是否禁用 Boolean false
icon 自定义图标,可选值参考icon组件 String correct
type 类型，可选值：default,media String default
title 标题，配置type=media使用 String -
circle 选择图标是否为圆形 Boolean true
subtitle 子标题，配合type=media使用 String -
full 是否铺满 Boolean true

CheckboxGroup属性

参数 说明 类型 默认值
v-model 当前选中值列表 Array -
disabled 是否禁用 Boolean -
max 最多可选 Number -

Checkbox事件

事件名称 说明 回调
change 选中状态变化是触发 当前选中状态

CheckboxGroup事件

事件名称 说明 回调
change 选中状态变化是触发 当前选中状态列表

Checkbox 插槽

插槽名 说明
prefix 在选择框之前添加内容
suffix 在选择框后添加内容

提示

多选时，CheckboxGroup下只能包Checkbox标签，不能嵌套其他标签，否则多选无效

多选时，内层的checkbox标签的change事件无效

← Radio 单选框 →