cloud-ui.vusion

# UComboSlider 滑块 - [示例](#示例) - [基本用法](#基本用法) - [提示](#提示) - [最大值和最小值](#最大值和最小值) - [只读和禁用](#只读和禁用) - [精度与间隔](#精度与间隔) - [范围](#范围) - [同步时机](#同步时机) - [格式化](#格式化) - [显示输入框button](#显示输入框button) - [显示tooltip](#显示tooltip) - [双滑块](#双滑块) - [API]() - [Props/Attrs](#propsattrs) - [Events](#events) - [ARIA and Keyboard](#aria-and-keyboard) **Form** 滑动选择 ## 示例 ### 基本用法 ``` html <u-combo-slider></u-combo-slider> ``` ### 提示 ``` html <u-linear-layout direction="vertical"> <u-combo-slider :step="10" unit="GB" tip="步长为10GB"></u-combo-slider> <u-combo-slider :step="10" unit="GB"> <template #tip> <u-linear-layout gap="small"> <i-ico name="help"></i-ico> <u-text>步长为10GB</u-text> </u-linear-layout> </template> </u-combo-slider> </u-linear-layout> ``` ### 最大值和最小值 ``` html <u-combo-slider :step="10" unit="GB" tip="步长为10GB" :min="10" :max="90" :value="40"></u-combo-slider> ``` ### 只读和禁用 ``` html <u-grid-layout> <u-grid-layout-column :span="8"> <u-combo-slider :value="36" readonly></u-combo-slider> </u-grid-layout-column> <u-grid-layout-column :span="8"> <u-combo-slider :value="36" disabled></u-combo-slider> </u-grid-layout-column> </u-grid-layout> ``` ### 精度与间隔精度表示数字要保留的最小单位，整数、小数均可，输入框会根据它作四舍五入。默认为`1`，即保留到整数。间隔表示点击按钮或按上下键所增加或减少的量，最好为精度的整数倍。间隔为`0`时，滑块拖动连续，数值保留到精度。 ``` html <u-grid-layout> <u-grid-layout-column :span="8"> <u-combo-slider :value="20" :precision="5" :step="5"></u-combo-slider> </u-grid-layout-column> <u-grid-layout-column :span="8"> <u-combo-slider :value="20" :precision="5" :step="20"></u-combo-slider> </u-grid-layout-column> <u-grid-layout-column :span="8"> <u-combo-slider :value="20" :step="0"></u-combo-slider> </u-grid-layout-column> </u-grid-layout> ``` ### 范围使用`range`可以进一步对`value`限制，通常传入一个数组，第一个值表示范围开始值，第二个值表示范围的结束值。 ``` html <u-grid-layout> <u-grid-layout-column :span="6"> <u-combo-slider :value="50" :range="[20, 85]"></u-combo-slider> </u-grid-layout-column> <u-grid-layout-column :span="6"> <u-combo-slider :value="40" :step="10" :range="[30]"></u-combo-slider> </u-grid-layout-column> </u-grid-layout> ``` ### 同步时机用`sync-on`属性可以设置输入后何时同步值到`<u-slider>`组件中。 ``` html <u-grid-layout> <u-grid-layout-column :span="6"> <u-combo-slider :value="20" :precision="10" :step="20"></u-combo-slider> </u-grid-layout-column> <u-grid-layout-column :span="6"> <u-combo-slider :value="20" :precision="10" :step="20" sync-on="blur"></u-combo-slider> </u-grid-layout-column> </u-grid-layout> ``` ### 格式化通常可以用以下字符组成一个格式化字符串： - `0`表示数字占位符。如果整数部分长度小于占位符的数量，则用`0`补足。如果小数部分长度大于占位符数量，则会四舍五入。 - `#`表示数字占位符。只显有意义的零而不显示无意义的零。 - `.`表示小数点。 - `,`表示千分位。也可以传入一个包含`get`和`set`方法的格式化对象。 ``` html <u-grid-layout> <u-grid-layout-column :span="8"> <u-combo-slider :value="6" formatter="000"></u-combo-slider> </u-grid-layout-column> <u-grid-layout-column :span="8"> <u-combo-slider :value="20" formatter="0%"></u-combo-slider> </u-grid-layout-column> </u-grid-layout> ``` ### 显示输入框button ``` html <u-combo-slider :hide-buttons="false"></u-combo-slider> ``` ### 显示tooltip ``` html <u-combo-slider :show-tooltip="true"></u-combo-slider> ``` ### 双滑块 ``` html <u-combo-slider multiple :value="[18, 36]"></u-combo-slider> ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | tip | string | | | | | value.sync, v-model | number, Array\<number\> | | `0` | | | min | number | | `0` | | | max | number | | `100` | | | step | number | | `1` | 间隔，`0`表示连续 | | precision | number | | `1` | 精度，表示数字要保留的最小单位，整数、小数均可 | | range | Array | | `[]` | 进一步对`value`限制，通常传入一个数组，第一个值表示范围开始值，第二个值表示范围的结束值 | | formatter | string, object | | | 格式化字符串，具体参见示例。也可以传入一个包含`get`和`set`方法的格式化对象 | | multiple | boolean | | `false` | 设置是否展示双滑块 | | unit | string | | | | | sync-on | string | `[object Object]`<br/>`[object Object]` | `'input'` | | | hide-buttons | boolean | | `true` | | | show-tooltip | boolean | | `false` | 鼠标悬浮时展示Tooltip提示信息 | | tooltip | string | | | Tooltip提示信息设置。在展示提示信息开关打开的情况下才会生效 | | readonly | boolean | | `false` | 正常显示，但禁止选择/输入 | | disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） | ### Events #### @input 滑块的值改变时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | number | 滑块的值 | #### @slide 拖动滑块时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | number | 滑块的值 | | $event.oldValue | number | 旧的值 | | $event.percent | number | 滑块位置所在的百分比 | #### @change 滑块的值改变后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | number | 改变后的值 | | $event.oldValue | number | 旧的值 | #### @number-input 改变数字输入框的值后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.value | number | 改变后滑块的值 | #### @slide-end 拖动滑块结束后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.value | number | 改变后的值 | ### ARIA and Keyboard | Key | Description | | --- | ----------- | | <kdb>↑</kdb> | 按`step`量增加值 | | <kdb>↓</kdb> | 按`step`量减小值 | | <kdb>Enter</kdb> | 自动修复为合法的值，并且应用更改 |