mc-ui

# Checkbox 复选框

通过鼠标在多组备选项中进行选择

# 基础用法

<template>
  <div>
    <mc-checkbox
      :label="'手机'"
      :checked="checkbox"
      v-model="checkbox"
    ></mc-checkbox>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkbox: false,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy

# 禁用状态

<template>
  <div>
    <mc-checkbox
      :label="'电脑'"
      :checked="checkbox1"
      :isDisable="true"
      v-model="checkbox1"
    ></mc-checkbox>
    <mc-checkbox
      :label="'平板'"
      :checked="checkbox2"
      :isDisable="true"
      v-model="checkbox2"
    ></mc-checkbox>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: true,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Expand Copy

# 复选框组

<template>
  <div>
    <mc-checkbox-group v-model="checkboxGroup">
      <mc-checkbox
        v-for="item in checkLists"
        :label="item.label"
        :val="item.value"
        :checked="item.checked"
        :isDisable="item.disable"
        :key="item.value"
      >
      </mc-checkbox>
    </mc-checkbox-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkboxGroup: [],
      checkLists: [
        { label: "手机1", value: 0,},
        { label: "电视", value: 1 },
        { label: "洗衣机", value: 2, checked: true },
        { label: "冰箱", value: 3 },
        { label: "家用电器", value: 4, checked: true, },
        { label: "手机2", value: 5 },
        { label: "电视1", value: 6 },
        { label: "洗衣机1", value: 7, checked: true },
        { label: "冰箱1", value: 8 },
        { label: "家用电器1", value: 9 },
      ],
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Expand Copy

# Attributes

参数 说明 类型 默认值 可选值
disabled 是否禁用 Boolean false -

← 弹框 Dialog →