VCheckbox API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| base-color | ||
| Sets the color of the input when it is not focused. | ||
| center-affix | ||
| Vertically align appendInner, prependInner, clearIcon and label in the center. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| defaults-target | ||
| The target component to provide defaults values for. | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| direction | ||
| Changes the direction of the input. | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| error | ||
| Puts the input in a manual error state. | ||
| error-messages | ||
| Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation. | ||
| false-icon | ||
| The icon used when inactive. | ||
| false-value | ||
| Sets value for falsy state. | ||
| focused | ||
| Forces a focused state styling on the component. | ||
| hide-details | ||
| Hides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display. | ||
| hide-spin-buttons | ||
| Hides spin buttons on the input when type is set to number. | ||
| hint | ||
| Displays hint text below the input when focused. Force this always open with the persistent-hint property. | ||
| id | ||
| Sets the DOM id on the component. | ||
| indeterminate | ||
| Sets an indeterminate state for the checkbox. | ||
| indeterminate-icon | ||
| The icon used when in an indeterminate state. | ||
| label | ||
| Sets the text of the v-label or v-field-label component. | ||
| max-errors | ||
| Control the maximum number of shown errors from validation. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| messages | ||
| Displays a list of messages or a single message if using a string. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multiple | ||
| Changes expected model to an array. | ||
| name | ||
| Sets the component’s name attribute. | ||
| persistent-hint | ||
| Forces hint to always be visible. | ||
| prepend-icon | ||
| Prepends an icon to the component, uses the same syntax as v-icon. | ||
| readonly | ||
| Puts input in readonly state. | ||
| ripple | ||
| Applies the v-ripple directive. | ||
| rules | ||
| Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| true-icon | ||
| The icon used when active. | ||
| true-value | ||
| Sets value for truthy state. | ||
| type | ||
| Provides the default type for children selection controls. | ||
| validate-on | ||
| Change what type of event triggers validation to run. | ||
| validation-value | ||
| The value used when applying validation rules. | ||
| value | ||
| The value used when the component is selected in a group. If not provided, a unique ID will be used. | ||
| value-comparator | ||
| Apply a custom comparison algorithm to compare model-value and values contains in the items prop. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:append | |
| Emitted when appended icon is clicked. | |
| click:prepend | |
| Emitted when prepended icon is clicked. | |
| update:focused | |
| Event that is emitted when the component’s focus state changes. | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| The default Vue slot. |
| details |
| Slot for custom input details to modifying the display of messages. |
| input |
| The slot used for the default input element. |
| label |
| The default slot of the v-label or v-field-label component. |
| message |
| Slot used to customize the message content. |
| prepend |
| Adds an item outside the input and before input content. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $checkbox-disabled-color | |
| $checkbox-error-color | |
| $checkbox-flex | |