CheckBox

复选框

案例

import { defineComponent } from "vue";
import { Typography, Grid, CheckBox } from "sl-vue2-template";

const { H1, P } = Typography;
const { Col, Row } = Grid;

interface ListType {
  value: string;
  checked: boolean;
  label: string;
}

export default defineComponent({
  data() {
    return {
      checked: false,
      label: "全选",
      values: [4],
      options: [
        {
          value: 1,
          label: "Apple",
        },
        {
          value: 2,
          label: "Orange",
        },
        {
          value: 3,
          label: "Orange1",
          disabled: true,
        },
        {
          value: 4,
          label: "Orange3",
          default: true,
        },
      ],
      values2: [],
      options2: [
        {
          value: "1",
          label: "Apple",
        },
        {
          value: "2",
          label: "Orange",
        },
        {
          value: "3",
          label: "Orange1",
        },
        {
          value: "5",
          label: "Orange2",
        },
        {
          value: "4",
          label: "Orange3",
        },
      ],
      checkedAll: false,
      indeterminate: false,
      list: [
        {
          value: "1",
          checked: false,
          label: "Apple",
        },
        {
          value: "2",
          checked: false,
          label: "Orange",
        },
        {
          value: "3",
          checked: false,
          label: "Pear",
        },
      ],
    };
  },
  methods: {
    onChange() {
      this.checked = !this.checked;
    },
    onChangeAll() {
      if (this.checkedAll) {
        this.checkedAll = false;
        this.list.forEach((i) => {
          if (i.checked) {
            i.checked = false;
          }
        });
        return;
      }
      this.checkedAll = true;
      this.list.forEach((i) => {
        if (!i.checked) {
          i.checked = true;
        }
      });
    },
    onChangeChecked(item: ListType) {
      if (item.checked) {
        item.checked = false;
      } else {
        item.checked = true;
      }

      const list = this.list.filter((i) => {
        return i.checked;
      });
      if (list.length === this.list.length) {
        this.checkedAll = true;
        this.indeterminate = false;
      } else if (list.length === 0) {
        this.checkedAll = false;
        this.indeterminate = false;
      } else {
        this.checkedAll = false;
        this.indeterminate = true;
      }
    },
  },
  render() {
    return (
      <div>
        <P className="mb-4">复选框,无label</P>
        <CheckBox
          checked={this.checked}
          handlerChange={(v) => {
            this.checked = v;
          }}
        />
        <br />
        <P className="mb-4">复选框</P>
        <CheckBox
          checked={this.checked}
          handlerChange={(v) => {
            this.checked = v;
          }}
          animation={false}
        >
          <H1>CheckBox</H1>
        </CheckBox>
        <CheckBox checked={this.checked} handlerChange={this.onChange}>
          CheckBox
        </CheckBox>
        <CheckBox
          checked={this.checked}
          handlerChange={(v) => {
            this.checked = v;
          }}
          color="blue"
          className="Test"
        >
          CheckBox
        </CheckBox>
        <CheckBox checked={this.checked} handlerChange={this.onChange} disabled>
          CheckBox disabled
        </CheckBox>
        <br />
        <P className="mb-4">复选框组群</P>
        <CheckBox.Group
          label={this.label}
          values={this.values}
          options={this.options}
          handlerChange={(values) => {
            this.values = values;
          }}
        />
        <br />
        <P className="mb-4">复选框组群, 变色，无label</P>
        <CheckBox.Group
          values={this.values2}
          options={this.options2}
          handlerChange={(values) => {
            this.values2 = values;
          }}
          color="blue"
          animation={false}
        />
        <br />
        <P className="mb-4">自定义全选</P>
        <Col>
          <Col>
            <Row className="mb-12">
              <CheckBox
                checked={this.checkedAll}
                indeterminate={this.indeterminate}
                handlerChange={this.onChangeAll}
              >
                全选4
              </CheckBox>
            </Row>
            <Row>
              {this.list.map((item) => {
                return (
                  <CheckBox
                    checked={item.checked}
                    handlerChange={() => {
                      this.onChangeChecked(item);
                    }}
                  >
                    {item.label}
                  </CheckBox>
                );
              })}
            </Row>
          </Col>
        </Col>
      </div>
    );
  },
});

属性

成员	说明	类型	必须	默认值	版本
checked	是否选中	Boolean	是	--	--
indeterminate	负责样式控制（用于全选）	Boolean	否	--	--
color	背景/边框颜色	颜色名	否	'primary-color'	--
disabled	禁用	Boolean	否	false	--
animation	动画效果	Boolean	否	true	--
className	自定义 class 名	String	否	--	--

事件

事件名称	说明	回调参数	必须	版本
handlerChange	点击的回调	(arg: Boolean) => void	否	--

CheckBox.Group 复选框组群

复选框组群

属性

成员	说明	类型	必须	默认值	版本
label	总按钮文本	String	否	--	--
values	选择值	String[] | Number[]	是	--	--
options	拉下选项	查看 options 属性	是	--	--
color	背景/边框颜色	支持的颜色	否	'primary-color'	--
disabled	禁用	Boolean	否	false	--
animation	动画效果	Boolean	否	true	--
className	自定义 class 名	String	否	--	--

事件

事件名称	说明	回调参数	必须	版本
handlerChange	点击的回调	(arg: String[]	Number[]) => void	是

Option 属性

成员	说明	类型	必须	默认值	版本
value	选项值	String|Number	是	--	--
label	选项文本	String	是	--	--
disabled	禁用	Boolean	否	false	--
default	默认选中	Boolean	否	false	--