复选框 Vue 组件

复选框组件
复选框属性
复选框事件
复选框列表
示例

复选框组件

包括以下组件

复选框

复选框属性

名称	类型	默认	描述
checked	布尔值	false	定义复选框输入是否选中
颜色	对象		包含 Tailwind CSS 颜色类别的对象
colors.bgCheckedIos	字符串	'bg-primary'
colors.bgCheckedMaterial	字符串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.borderCheckedIos	字符串	'border-primary'
colors.borderCheckedMaterial	字符串	'border-md-light-primary dark:border-md-dark-primary'
colors.borderIos	字符串	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.borderMaterial	字符串	'border-md-light-outline dark:border-md-dark-outline'
组件	字符串	'标签'	组件的 HTML 元素
defaultChecked	布尔值	false	定义复选框输入是否选中，用于它是非受控组件的情况
禁用	布尔值	false	定义复选框输入是否禁用
不确定	布尔值	false	定义复选框输入是否处于不确定状态
名称	字符串		复选框输入名称
只读	布尔值	false	定义复选框输入是否只读
touchRipple	布尔值	true	在 Material 主题中启用触摸涟漪效果
价值	任何		复选框输入值

复选框事件

名称	类型	描述
改变	function(e)	当复选框状态改变时会触发事件

复选框列表

复选框列表不是一个单独的组件，而只是使用 List 和 ListItem 组件的一种特定情况。

<k-list>
  <!-- Additional "label" prop on ListItem -->
  <k-list-item
    label
    title="Books"
  >
    <template #media>
      <!-- Pass Checkbox to list item media -->
      <k-checkbox component="div" name="my-checkbox" />
    </template>
  </k-list-item>
  <k-list-item
    label
    title="Movies"
  >
    <template #media>
      <!-- Pass Checkbox to list item media -->
      <k-checkbox component="div" name="my-checkbox" />
    </template>
  </k-list-item>
</List>

示例

Checkbox.vue

<template>
  <k-page>
    <k-navbar title="Checkbox" />

    <k-block-title>Inline</k-block-title>
    <k-block strong-ios outline-ios>
      <p>
        Lorem{{ ' ' }}
        <k-checkbox
          name="checkbox-1"
          :checked="checked1"
          @change="(e) => (checked1 = e.target.checked)"
        />{{ ' ' }} ipsum dolor sit amet, consectetur adipisicing elit. Alias
        beatae illo nihil aut eius commodi sint eveniet aliquid eligendi
        {{ ' ' }}
        <k-checkbox
          name="checkbox-2"
          :checked="checked2"
          @change="(e) => (checked2 = e.target.checked)"
        />{{ ' ' }}
        ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla
        mollitia!
      </p>
    </k-block>

    <k-block-title>Checkbox Group</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item label title="Books">
        <template #media>
          <k-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Books')"
            @change="() => toggleGroupValue('Books')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Movies">
        <template #media>
          <k-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Movies')"
            @change="() => toggleGroupValue('Movies')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Food">
        <template #media>
          <k-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Food')"
            @change="() => toggleGroupValue('Food')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Drinks">
        <template #media>
          <k-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Drinks')"
            @change="() => toggleGroupValue('Drinks')"
          />
        </template>
      </k-list-item>
    </k-list>

    <k-block-title>Indeterminate State</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item label title="Movies" name="demo-checkbox">
        <template #media>
          <k-checkbox
            :checked="movies.length === 2"
            :indeterminate="movies.length === 1"
            @change="onMoviesChange"
          />
        </template>
        <ul class="ps-12">
          <k-list-item label title="Movie 1">
            <template #media>
              <k-checkbox
                name="demo-checkbox"
                value="Movie 1"
                :checked="movies.indexOf('Movie 1') >= 0"
                @change="onMovieChange"
              />
            </template>
          </k-list-item>
          <k-list-item label title="Movie 2">
            <template #media>
              <k-checkbox
                name="demo-checkbox"
                value="Movie 2"
                :checked="movies.indexOf('Movie 2') >= 0"
                @change="onMovieChange"
              />
            </template>
          </k-list-item>
        </ul>
      </k-list-item>
    </k-list>

    <k-block-title>With Media Lists</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item
        label
        title="Facebook"
        after="17:14"
        subtitle="New messages from John Doe"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <k-checkbox
            component="div"
            name="demo-media-checkbox"
            :checked="media.includes('Item 1')"
            @change="() => toggleMediaValue('Item 1')"
          />
        </template>
      </k-list-item>
      <k-list-item
        label
        title="John Doe (via Twitter)"
        after="17:11"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <k-checkbox
            component="div"
            name="demo-media-checkbox"
            :checked="media.includes('Item 2')"
            @change="() => toggleMediaValue('Item 2')"
          />
        </template>
      </k-list-item>
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kCheckbox,
    kBlockTitle,
    kBlock,
    kList,
    kListItem,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kCheckbox,
      kBlockTitle,
      kBlock,
      kList,
      kListItem,
    },

    setup() {
      const checked1 = ref(false);
      const checked2 = ref(true);

      // Group
      const group = ref(['Books']);
      const toggleGroupValue = (value) => {
        if (group.value.includes(value))
          group.value.splice(group.value.indexOf(value), 1);
        else group.value.push(value);
        group.value = [...group.value];
      };

      // Indeterminate
      const movies = ref(['Movie 1']);
      const onMovieChange = (e) => {
        const value = e.target.value;
        if (e.target.checked) {
          movies.value.push(value);
        } else {
          movies.value.splice(movies.value.indexOf(value), 1);
        }
        movies.value = [...movies.value];
      };
      const onMoviesChange = () => {
        if (movies.value.length === 1 || movies.value.length === 0) {
          movies.value = ['Movie 1', 'Movie 2'];
        } else if (movies.value.length === 2) {
          movies.value = [];
        }
      };

      // Media
      const media = ref(['Item 1']);
      const toggleMediaValue = (value) => {
        if (media.value.includes(value))
          media.value.splice(media.value.indexOf(value), 1);
        else media.value.push(value);
        media.value = [...media.value];
      };

      return {
        checked1,
        checked2,
        group,
        toggleGroupValue,
        movies,
        onMovieChange,
        onMoviesChange,
        media,
        toggleMediaValue,
      };
    },
  };
</script>