checkbox.uvue

    type ItemType = {
        value : string,
        name : string,
        checked : boolean
    }
    export default {
        data() {
            return {
                title: 'checkbox 复选框',
                items: [{
                    value: 'USA',
                    name: '美国',
                    checked: false
                },
                {
                    value: 'CHN',
                    name: '中国',
                    checked: true
                },
                {
                    value: 'BRA',
                    name: '巴西',
                    checked: false
                },
                {
                    value: 'JPN',
                    name: '日本',
                    checked: false
                },
                {
                    value: 'ENG',
                    name: '英国',
                    checked: false
                },
                {
                    value: 'FRA',
                    name: '法国',
                    checked: false
                }
                ] as ItemType[]
            }
        },
        methods: {
            checkboxChange: function (value : string[]) {
                // TODO 后续更改参数
                var items = this.items,
                    values = value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    const item = items[i]
                    if (values.indexOf(item.value) >= 0) {
                        item.checked = true
                    } else {
                        item.checked = false
                    }
                }
            }
        }
    }


const GenPagesComponentCheckboxCheckboxStyles = [new Map<string, Map<string, Map<string, any>>>([["common-page-head", new Map<string, any>([["", new Map<string, any>([["paddingTop", "35rpx"], ["paddingRight", "35rpx"], ["paddingBottom", "35rpx"], ["paddingLeft", "35rpx"], ["flexDirection", "row"], ["justifyContent", "center"]])]])], ["common-page-head-title-box", new Map<string, any>([["", new Map<string, any>([["paddingTop", 0], ["paddingRight", "40rpx"], ["paddingBottom", 0], ["paddingLeft", "40rpx"], ["height", "88rpx"], ["borderBottomWidth", "2rpx"], ["borderBottomStyle", "solid"], ["borderBottomColor", "#D8D8D8"]])]])], ["common-page-head-title", new Map<string, any>([["", new Map<string, any>([["lineHeight", "88rpx"], ["fontSize", "30rpx"], ["color", "#BEBEBE"]])]])], ["uni-list-cell", new Map<string, any>([["", new Map<string, any>([["justifyContent", "flex-start"]])]])]])]
@Suppress("UNUSED_PARAMETER") function GenPagesComponentCheckboxCheckboxRender(_ctx: GenPagesComponentCheckboxCheckbox): VNode | null {
const _component_page_head = resolveComponent("page-head")
const _component_checkbox = resolveComponent("checkbox")
const _component_checkbox_group = resolveComponent("checkbox-group")

  return createElementVNode("view", null, [
    createVNode(_component_page_head, new Map<string, any | null>([["title", _ctx.title]]), null, 8 /* PROPS */, ["title"]),
    createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap uni-common-mt"]]), [
      createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
        createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 默认样式 ")
      ]),
      createElementVNode("view", null, [
        createVNode(_component_checkbox_group, new Map<string, any | null>([["class", "uni-flex uni-row"]]), new Map<string, any | null>([
          ["default", ((): any[] => [
            createVNode(_component_checkbox, new Map<string, any | null>([
              ["value", "cb1"],
              ["checked", true],
              ["style", "margin-right: 30rpx;"]
            ]), new Map<string, any | null>([
              ["default", ((): any[] => [
                createElementVNode("text", null, "选中")
              ])],
              ["_", 1 /* STABLE */]
            ])),
            createVNode(_component_checkbox, new Map<string, any | null>([["value", "cb"]]), new Map<string, any | null>([
              ["default", ((): any[] => [
                createElementVNode("text", null, "未选中")
              ])],
              ["_", 1 /* STABLE */]
            ]))
          ])],
          ["_", 1 /* STABLE */]
        ]))
      ]),
      createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
        createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 不同颜色和尺寸的checkbox ")
      ]),
      createElementVNode("view", null, [
        createVNode(_component_checkbox_group, new Map<string, any | null>([["class", "uni-flex uni-row"]]), new Map<string, any | null>([
          ["default", ((): any[] => [
            createVNode(_component_checkbox, new Map<string, any | null>([
              ["value", "cb1"],
              ["checked", true],
              ["color", "#FFCC33"],
              ["style", "transform:scale(0.7); margin-right: 30rpx;"]
            ]), new Map<string, any | null>([
              ["default", ((): any[] => [
                createElementVNode("text", null, "选中 ")
              ])],
              ["_", 1 /* STABLE */]
            ])),
            createVNode(_component_checkbox, new Map<string, any | null>([
              ["value", "cb"],
              ["color", "#FFCC33"],
              ["style", "transform:scale(0.7)"]
            ]), new Map<string, any | null>([
              ["default", ((): any[] => [
                createElementVNode("text", null, "未选中")
              ])],
              ["_", 1 /* STABLE */]
            ]))
          ])],
          ["_", 1 /* STABLE */]
        ]))
      ])
    ]),
    createElementVNode("view", new Map<string, any | null>([["class", "uni-padding-wrap"]]), [
      createElementVNode("view", new Map<string, any | null>([["class", "uni-title uni-common-mt"]]), [
        createElementVNode("text", new Map<string, any | null>([["class", "uni-title-text"]]), " 推荐展示样式 "),
        createElementVNode("text", new Map<string, any | null>([["class", "uni-subtitle-text"]]), " 使用 uni-list 布局 ")
      ])
    ]),
    createElementVNode("view", new Map<string, any | null>([["class", "uni-list"]]), [
      createVNode(_component_checkbox_group, new Map<string, any | null>([["onChange", _ctx.checkboxChange]]), new Map<string, any | null>([
        ["default", ((): any[] => [
          createElementVNode(Fragment, null, RenderHelpers.renderList(_ctx.items, (item, _, _):VNode => {
            return createElementVNode("view", new Map<string, any | null>([
              ["class", "uni-list-cell uni-list-cell-pd"],
              ["key", item.value]
            ]), [
              createElementVNode("view", null, [
                createVNode(_component_checkbox, new Map<string, any | null>([
                  ["value", item.value],
                  ["checked", item.checked]
                ]), new Map<string, any | null>([
                  ["default", ((): any[] => [
                    createElementVNode("text", null, toDisplayString(item.name), 1 /* TEXT */)
                  ])],
                  ["_", 2 /* DYNAMIC */]
                ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["value", "checked"])
              ])
            ])
          }), 128 /* KEYED_FRAGMENT */)
        ])],
        ["_", 1 /* STABLE */]
      ]), 8 /* PROPS */, ["onChange"])
    ])
  ])
}