VColorPicker API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| canvas-height | ||
| Height of canvas. | ||
| 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 . | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| dot-size | ||
| Changes the size of the selection dot on the canvas. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| hide-canvas | ||
| Hides canvas. | ||
| hide-inputs | ||
| Hides inputs. | ||
| hide-sliders | ||
| Hides sliders. | ||
| mode | ||
| The current selected input type. Syncable with v-model:mode. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| modes | ||
| Sets available input types. | ||
| position | ||
| Sets the position for the component. | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| show-swatches | ||
| Displays color swatches. | ||
| swatches | ||
| Sets the available color swatches to select from. 2D array of rows and columns, accepts any color format the picker does. | ||
| swatches-max-height | ||
| Sets the maximum height of the swatches section. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| width | ||
| Sets the width of the color picker. | ||
事件
| 名称 | 类型 |
|---|---|
| update:mode | |
| Selected mode. | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $color-picker-border-radius | |
| $color-picker-canvas-dot-box-shadow | |
| $color-picker-canvas-dot-disabled-box-shadow | |
| $color-picker-canvas-dot-size | |
| $color-picker-checkerboard | |
| $color-picker-controls-padding | |
| $color-picker-elevation | |
| $color-picker-input-font-size | |
| $color-picker-input-height | |
| $color-picker-input-margin | |
| $color-picker-input-margin-bottom | |
| $color-picker-input-margin-top | |
| $color-picker-preview-dot-margin | |
| $color-picker-preview-dot-size | |
| $color-picker-preview-dropper-margin | |
| $color-picker-preview-margin-bottom | |
| $color-picker-preview-sliders-padding | |
| $color-picker-swatch-color-border-radius | |
| $color-picker-swatch-color-height | |
| $color-picker-swatch-color-margin | |
| $color-picker-swatch-color-width | |
| $color-picker-swatch-margin-bottom | |
| $color-picker-swatches-border-radius | |