Checkbox 复选框

表单类型组件，结合form组件使用

基础用法

<wx-checkbox v-model="v" :options="options" name="ck"></wx-checkbox>

<script>
export default {
  data() {
    return {
      options: [
        { label: "Vue", value: "vue" },
        { label: "React", value: "react" }
      ],
      v: []
    };
  }
};
</script>

综合示例

示例包括：值绑定、默认值和数据校验。

<wx-form ref="form">
  <wx-form-header>复选框</wx-form-header>
  <wx-form-body>
    <wx-form-group type="checkbox" title="前端框架">
      <wx-checkbox v-model="v1" :options="options1" name="ck1" required empty-tips="至少选择一种前端框架"></wx-checkbox>
    </wx-form-group>
    <wx-form-group type="checkbox" title="默认选中/数据校验(最多可选)">
      <wx-checkbox v-model="v2" :options="options2" name="ck2" pattern="{1,2}" not-match-tips="请选择1~2个城市"></wx-checkbox>
    </wx-form-group>
  </wx-form-body>
  <wx-form-tips>可选1~2个，选中值：{{displayV}}</wx-form-tips>
  <wx-form-action>
    <wx-button @click="handleClick">确定</wx-button>
  </wx-form-action>
</wx-form>

<script>
export default {
  data() {
    return {
      options1: [
        { label: "Vue", value: "vue" },
        { label: "React", value: "react" }
      ],
      options2: [
        { label: "北京", value: "1" },
        { label: "上海", value: "2" },
        { label: "广州", value: "3" },
        { label: "其他 (不可选)", value: "4", disabled: true }
      ],
      v1: [],
      v2: ["1", "2"],
      displayV: "[]"
    };
  },
  created() {
    this.displayV = JSON.stringify(this.v2);
  },
  watch: {
    v2(val) {
      this.displayV = JSON.stringify(val);
    }
  },
  methods: {
    handleClick() {
      this.$refs.form.validate(error => {
        if (error) {
          this.$tooltip(error)
        } else {
          this.$toast("验证成功", { type: "success" })
        }
      });
    }
  }
};
</script>

提示

表单布局和表单校验可参考Form

Checkbox Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值	Array	-	[]
name	原生 name 属性	String	-	-
options	可选项数组，required	Array	-	-
required	是否必选	Boolean	-	false
pattern	正则校验表达式	String	-	-
emptyTips	未选校验提示信息	String	-	-
notMatchTips	正则校验错误提示信息	String	-	-

options 格式说明

[
  { label: "", value: "" },
  { label: "", value: "", disabled: true }
]

复选框