u-checkbox.vue

0.1.1 • Public • Published

多选按钮(Checkbox)

示例

基本形式

<u-checkbox>Checkbox</u-checkbox>

Value绑定

<template>
<u-checkbox v-model="value">{{ value }}</u-checkbox>
</template>
<script>
export default {
    data() {
        return {
            value: true,
        };
    },
};
</script>

只读和禁用

<u-linear-layout>
    <u-checkbox :value="true" readonly>Readonly</u-checkbox>
    <u-checkbox :value="true" disabled>Disabled</u-checkbox>
</u-linear-layout>

不确定状态

<u-checkbox :value="null">Indeterminate</u-checkbox>

API

Attrs/Props

Attr/Prop Type Default Description
value Boolean | null false 选中状态,null表示不确定状态
readonly Boolean false 是否只读
disabled Boolean false 是否禁用

Slots

Slot Description
(default) 在插槽中插入文本或HTML

Events

@before-check

切换选中状态前触发

Param Type Description
$event.value Boolean | null 选中状态
$event.oldValue Boolean | null 旧的选中状态
$event.preventDefault Function 阻止切换流程

@input

切换选中状态时触发

Param Type Description
$event Boolean | null 切换后的选中状态

@check

切换选中状态时触发

Param Type Description
$event.value Boolean | null 选中状态
$event.oldValue Boolean | null 旧的选中状态

@change

选中状态改变时触发

Param Type Description
$event.value Boolean | null 选中状态
$event.oldValue Boolean | null 旧的选中状态

Readme

Keywords

Package Sidebar

Install

npm i u-checkbox.vue

Weekly Downloads

1

Version

0.1.1

License

MIT

Last publish

Collaborators

  • rainfore