组件使用
<template>
<div>
<!-- 取色器 -->
<kendo-colorpicker
v-model="color"
v-on:change="onChange"
:disabled="disabledStage">ColorPicker</kendo-colorpicker>
color: <span v-text="color"></span>
<!-- 取色器面板 -->
<kendo-flatcolorpicker v-model="color2"></kendo-flatcolorpicker>
<!-- 色块展示 -->
<kendo-colorpalette :palette="palette" :tile-size="tileSize"></kendo-colorpalette>
<!-- 标记类型输入,k-rtl文本靠右输入和显示 -->
<kendo-maskedtextbox title="phone number" v-model="phoneNumber" :mask="maskedtextboxMark"></kendo-maskedtextbox>
phone number: <span v-text="phoneNumber"></span>
<kendo-maskedtextbox :rules="rules" mask="~^"></kendo-maskedtextbox>
<div class="k-rtl"><kendo-maskedtextbox title="phone number" mask="000-000-0000"></kendo-maskedtextbox></div>
<!-- 数值框 -->
<!-- format值为p, value=value*10000+%；decimals显示小数点的精度，四舍五入;round为false，不四舍五入 -->
<!-- 绑定label，点击label聚焦到输入框 -->
<kendo-numerictextbox v-model.number="number"
:decimals="3"
:format="'c0'"
:min="0"
:max="1000"
:round="false"
:spinners="true"
v-on:change="onNumerictextboxChange">
</kendo-numerictextbox>
<kendo-numerictextbox :format="'c0'" :value="12"></kendo-numerictextbox>
<kendo-numerictextbox :format="'p'" :value="0.12"></kendo-numerictextbox>
<kendo-numerictextbox :decimals="3" :value="4.44832141"></kendo-numerictextbox>
<kendo-numerictextbox :decimals="2" :round="false" :value="4.999"></kendo-numerictextbox>
<div><label for="numericTextBox1" v-on:click="onNumerictextboxClick">Number: </label>
<kendo-numerictextbox ref="numericTextBox" :decimals="3" :value="4.41"></kendo-numerictextbox></div>
<div class="k-rtl"><kendo-numerictextbox :decimals="2" :round="false" :value="4.999"></kendo-numerictextbox></div>
<!-- 区间值 -->
<kendo-rangeslider :selection-start="start"
:selection-end="end"
:min="0"
:max="100">
</kendo-rangeslider>
<kendo-rangeslider :min="0"
:max="1"
:large-step="0.1"
:small-step="0.05"
:orientation="'vertical'"
:tooltip-format="'{0:p}'">
</kendo-rangeslider>
<!-- 滑尺 -->
<kendo-slider v-model="value"
:orientation="'vertical'"
:min="10"
:max="50"
:small-step="1"
:large-step="10">
</kendo-slider>
<kendo-slider v-on:slide="onSlide"></kendo-slider>
<!-- 开关 -->
<kendo-switch name="switch" :checked="swithChecked" :messages="swithMessages"></kendo-switch>
<div class="k-rtl"><kendo-switch name="switch"></kendo-switch></div>
</div>
</template>
<script>
import { ColorPicker } from '@progress/kendo-inputs-vue-wrapper';
import { FlatColorPicker } from '@progress/kendo-inputs-vue-wrapper';
import { ColorPalette } from '@progress/kendo-inputs-vue-wrapper';
import { MaskedTextBox } from '@progress/kendo-inputs-vue-wrapper';
import { NumericTextBox } from '@progress/kendo-inputs-vue-wrapper';
import { RangeSlider } from '@progress/kendo-inputs-vue-wrapper';
import { Slider } from '@progress/kendo-inputs-vue-wrapper';
import { Switch } from '@progress/kendo-inputs-vue-wrapper';
import '@progress/kendo-theme-default/dist/all.css'
export default {
components: {
'kendo-colorpicker': ColorPicker,
'kendo-flatcolorpicker': FlatColorPicker,
'kendo-colorpalette': ColorPalette,
'kendo-maskedtextbox': MaskedTextBox,
'kendo-numerictextbox': NumericTextBox,
'kendo-rangeslider': RangeSlider,
'kendo-slider': Slider,
'kendo-switch': Switch,
},
data: function() {
return {
// 绑定值color为空，报错Cannot read property 'toCssRgba' of null
color: "5CE500",
disabledStage: false,
// 绑定值color2为空，报错Cannot parse color:
color2: "5CE500",
// palette取值类型String, Array
palette: 'basic', // 'websafe' || [ "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" ],
// tileSize取值类型Number, Object,若设置为string则报错
tileSize: 40,
phoneNumber: "",
maskedtextboxMark: '(999) 0000-0000',//(###) 000-0000; 000-000-0000
rules: { // 允许输入框仅能输入[+/-，^]三个符号
"~": /[+-]/,
"^": function (char) {
return char === "^"; //allow only "^" symbol
}
},
number: 17,
start: 25,
end: 75,
value: "20",
swithChecked: false,
swithMessages: {
checked: 'YES',
unchecked: 'NO'
}
}
},
mounted: function () {
this.numericTextBox = this.$refs.numericTextBox.kendoWidget();
},
methods: {
onSlide (e) {// 滑动事件
console.log(e.value);
},
onNumerictextboxClick() {
this.numericTextBox.focus();
},
onNumerictextboxChange(e) {
var value = e.sender.value();
console.log(value);
},
onChange (ev) {
this.color = ev.sender.value()
}
}
}
</script>
kendo-colorpalette:
palette: string|array
columns: number 18
tile-size: number|object
value: string
Events: change:
Methods: kendoWidget
kendo-colorpicker:
buttons: boolean
clear-button: boolean
columns: number
tile-size: number|object
messages: object
palette: string|array [string：'basic'// 默认20种色块, 'websafe' // 网页颜色]
opacity: boolean
preview: boolean
tool-icon: string
value: string
Events: change: | select: | open: | close:
Methods: kendoWidget
kendo-flatcolorpicker:
opacity: boolean
buttons: boolean
value: string
preview: boolean
autoupdate: boolean
messages: object
Events: change:
Methods: kendoWidget
kendo-maskedtextbox:
clear-prompt-char: boolean
culture: string
mask: string [0:[0-9] 9:[0-9] #:[0-9,+-] L:[a-zA-Z] ?:[a-zA-Z] $ C A a . , $ ] // :后为可使用值
prompt-char: string
rules: object
unmask-on-post: boolean
value: string
Events: change:
Methods: kendoWidget
MessagesProps：
messages-apply: string
messages-cancel: string
messages-preview-input: string
messages-checked: string
messages-unchecked: string
kendo-numerictextbox:
culture: string
decimals: number
down-arrow-text: string
factor: number
format: string
max: number
min: number
placeholder: string
restrict-decimals
round: boolean
spinners: boolean
step: number
up-arrow-text: string
value: string
Events: change: | spin:
Methods: kendoWidget
kendo-rangeslider:
large-step: number
left-drag-handle-title: string
max: number
min: number
orientation: string [取值：horizontal | vertical]
right-drag-handle-title: string
selection-end: number
selection-start: number
small-step: number
tick-placement: string
tooltip: object
Events: change: | slide:
Methods: kendoWidget
kendo-slider:
decrease-button-title: string
drag-handle-title: string
increase-button-title: string
large-step: number
max: number
min: number
orientation: string [取值：horizontal | vertical]
show-buttons: boolean
small-step: number
tick-placement: string [取值：topLeft | bottomRight | both | none]
tooltip: object
value: number
Events: change: | slide:
Methods: kendoWidget
kendo-switch:
checked: boolean
enabled: boolean
enable: deprecated
readonly: boolean
on-label: deprecated
off-label: deprecated
messages: object
width: number|string
Events: change:
Methods: kendoWidget
TileSizeProps:
tile-size-width: number
tile-size-height: number
tooltip-enabled: boolean
tooltip-format: string
tooltip-template: string|function [取值：selectionStart | selectionEnd | value]
