Merge pull request #3043 from iview/pr/3027

Pr/3027

examples/routers/slider.vue

@@ -1,68 +1,103 @@
-<!--<template>-->
+<template>
-    <!--<div style="margin: 0 400px;">-->
+    <Form :model="formItem" :label-width="80">
-        <!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
+        <FormItem label="Input">
-        <!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
+            <Input v-model="formItem.input" placeholder="Enter something..."></Input>
+        </FormItem>
+        <FormItem label="Select">
+            <Select v-model="formItem.select">
+                <Option value="beijing">New York</Option>
+                <Option value="shanghai">London</Option>
+                <Option value="shenzhen">Sydney</Option>
+            </Select>
+        </FormItem>
+        <FormItem label="DatePicker">
+            <Row>
+                <Col span="11">
+                <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
+                </Col>
+                <Col span="2" style="text-align: center">-</Col>
+                <Col span="11">
+                <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
+                </Col>
+            </Row>
+        </FormItem>
+        <FormItem label="Radio">
+            <RadioGroup v-model="formItem.radio">
+                <Radio label="male">Male</Radio>
+                <Radio label="female">Female</Radio>
+            </RadioGroup>
+        </FormItem>
+        <FormItem label="Checkbox">
+            <CheckboxGroup v-model="formItem.checkbox">
+                <Checkbox label="Eat"></Checkbox>
+                <Checkbox label="Sleep"></Checkbox>
+                <Checkbox label="Run"></Checkbox>
+                <Checkbox label="Movie"></Checkbox>
+            </CheckboxGroup>
+        </FormItem>
+        <FormItem label="Switch">
+            <i-switch v-model="formItem.switch" size="large">
+                <span slot="open">On</span>
+                <span slot="close">Off</span>
+            </i-switch>
+        </FormItem>
+        <FormItem label="Slider">
+            <Slider v-model="formItem.slider" range></Slider>
+        </FormItem>
+        <FormItem label="Text">
+            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
+        </FormItem>
+        <FormItem>
+            <Button type="primary">Submit</Button>
+            <Button type="ghost" style="margin-left: 8px">Cancel</Button>
+        </FormItem>
+    </Form>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                formItem: {
+                    input: '',
+                    select: '',
+                    radio: 'male',
+                    checkbox: [],
+                    switch: true,
+                    date: '',
+                    time: '',
+                    slider: [20, 50],
+                    textarea: ''
+                }
+            }
+        }
+    }
+</script>
 
-        <!--<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>-->
+
-        <!--<Button @click="randomRange">change</Button> {{rangeDisplayValue}}-->
+
+<!--<template>-->
+    <!--<div>-->
+        <!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
+        <!--<Modal v-model="modal1">-->
+            <!--<Slider v-model="value2" range show-tip="always"></Slider>-->
+        <!--</Modal>-->
     <!--</div>-->
 <!--</template>-->
 <!--<script>-->
     <!--export default {-->
         <!--data () {-->
             <!--return {-->
-                <!--valueSingle: 10,-->
+                <!--modal1: false,-->
-                <!--valueRange: [20, 50],-->
+                <!--value2: [20, 50],-->
-                <!--singleDisplayValue: 10,-->
+            <!--}-->
-                <!--rangeDisplayValue: [20, 50]-->
-            <!--};-->
         <!--},-->
         <!--methods: {-->
-            <!--updateSingleDisplayValue (val){-->
+            <!--ok () {-->
-                <!--console.log('updateSingleDisplayValue', val);-->
+                <!--this.$Message.info('Clicked ok');-->
-                <!--this.singleDisplayValue = val;-->
             <!--},-->
-            <!--updateRangeDisplayValue (val){-->
+            <!--cancel () {-->
-                <!--console.log('updateRangeDisplayValue', val);-->
+                <!--this.$Message.info('Clicked cancel');-->
-                <!--this.rangeDisplayValue = val.join(' - ');-->
-            <!--},-->
-            <!--randomSingle () {-->
-                <!--this.valueSingle = this.random(0, 100);-->
-            <!--},-->
-            <!--randomRange () {-->
-                <!--this.valueRange = [this.random(0, 50), this.random(50, 100)];-->
-            <!--},-->
-            <!--random (min, max){-->
-                <!--return Math.round(Math.random() * (max - min)) + min;-->
             <!--}-->
         <!--}-->
-    <!--};-->
+    <!--}-->
 <!--</script>-->
-
-
-<template>
-    <div>
-        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
-        <Modal v-model="modal1">
-            <Slider v-model="value2" range show-tip="always"></Slider>
-        </Modal>
-    </div>
-</template>
-<script>
-    export default {
-        data () {
-            return {
-                modal1: false,
-                value2: [20, 50],
-            }
-        },
-        methods: {
-            ok () {
-                this.$Message.info('Clicked ok');
-            },
-            cancel () {
-                this.$Message.info('Clicked cancel');
-            }
-        }
-    }
-</script>

src/components/slider/slider.vue

@@ -8,20 +8,46 @@
             :value="exportValue[0]"
             :disabled="disabled"
             @on-change="handleInputChange"></Input-number>
-        <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
+        <div
+            :class="[prefixCls + '-wrap']"
+            ref="slider" @click.self="sliderClick"
+        >
             <input type="hidden" :name="name" :value="exportValue">
             <template v-if="showStops">
-                <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
+                <div
+                    :class="[prefixCls + '-stop']"
+                    v-for="item in stops"
+                    :style="{ 'left': item + '%' }"
+                    @click.self="sliderClick"
+                ></div>
             </template>
-            <div :class="[prefixCls + '-bar']" :style="barStyle" @click.self="sliderClick"></div>
+            <div
+                :class="[prefixCls + '-bar']"
+                :style="barStyle"
+                @click.self="sliderClick"></div>
             <div
                 :class="[prefixCls + '-button-wrap']"
                 :style="{left: minPosition + '%'}"
                 @touchstart="onPointerDown($event, 'min')"
                 @mousedown="onPointerDown($event, 'min')">
-                <Tooltip :controlled="pointerDown === 'min'" placement="top" :content="tipFormat(exportValue[0])"
+                <Tooltip
-                         :disabled="tipDisabled" :always="showTip === 'always'" ref="minTooltip">
+                    :controlled="pointerDown === 'min'"
-                    <div :class="minButtonClasses"></div>
+                    placement="top"
+                    :content="tipFormat(exportValue[0])"
+                    :disabled="tipDisabled"
+                    :always="showTip === 'always'"
+                    ref="minTooltip"
+                >
+                    <div
+                        :class="minButtonClasses"
+                        tabindex="0"
+                        @focus="handleFocus('min')"
+                        @blur="handleBlur('min')"
+                        @keydown.left="onKeyLeft($event, 'min')"
+                        @keydown.down="onKeyLeft($event, 'min')"
+                        @keydown.right="onKeyRight($event, 'min')"
+                        @keydown.up="onKeyRight($event, 'min')"
+                    ></div>
                 </Tooltip>
             </div>
             <div v-if="range"
@@ -29,9 +55,24 @@
                  :style="{left: maxPosition + '%'}"
                  @touchstart="onPointerDown($event, 'max')"
                  @mousedown="onPointerDown($event, 'max')">
-                <Tooltip :controlled="pointerDown === 'max'" placement="top" :content="tipFormat(exportValue[1])"
+                <Tooltip
-                         :disabled="tipDisabled" :always="showTip === 'always'" ref="maxTooltip">
+                    :controlled="pointerDown === 'max'"
-                    <div :class="maxButtonClasses"></div>
+                    placement="top"
+                    :content="tipFormat(exportValue[1])"
+                    :disabled="tipDisabled"
+                    :always="showTip === 'always'"
+                    ref="maxTooltip"
+                >
+                    <div
+                        :class="maxButtonClasses"
+                        tabindex="0"
+                        @focus="handleFocus('max')"
+                        @blur="handleBlur('max')"
+                        @keydown.left="onKeyLeft($event, 'max')"
+                        @keydown.down="onKeyLeft($event, 'max')"
+                        @keydown.right="onKeyRight($event, 'max')"
+                        @keydown.up="onKeyRight($event, 'max')"
+                    ></div>
                 </Tooltip>
             </div>
         </div>
@@ -110,7 +151,11 @@
                 startX: 0,
                 currentX: 0,
                 startPos: 0,
-                oldValue: val
+                oldValue: val,
+                valueIndex: {
+                    min: 0,
+                    max: 1,
+                },
             };
         },
         watch: {
@@ -173,7 +218,6 @@
                 return (val[1] - this.min) / this.valueRange * 100;
             },
             barStyle () {
-
                 const style = {
                     width: (this.currentValue[0] - this.min) / this.valueRange * 100 + '%'
                 };
@@ -216,6 +260,30 @@
                 max = Math.min(this.max, max);
                 return [min, max];
             },
+            getCurrentValue (event, type) {
+                if (this.disabled) {
+                    return;
+                }
+
+                const index = this.valueIndex[type];
+                if (typeof index === 'undefined') {
+                    return;
+                }
+
+                return this.currentValue[index];
+            },
+            onKeyLeft (event, type) {
+                const value = this.getCurrentValue(event, type);
+                if (Number.isFinite(value)) {
+                    this.changeButtonPosition(value - this.step, type);
+                }
+            },
+            onKeyRight (event, type) {
+                const value = this.getCurrentValue(event, type);
+                if (Number.isFinite(value)) {
+                    this.changeButtonPosition(value + this.step, type);
+                }
+            },
             onPointerDown (event, type) {
                 if (this.disabled) return;
                 event.preventDefault();
@@ -293,6 +361,14 @@
                 this.currentValue = [val, this.currentValue[1]];
                 this.emitChange();
             },
+
+            handleFocus (type) {
+                this.$refs[`${type}Tooltip`].handleShowPopper();
+            },
+
+            handleBlur (type) {
+                this.$refs[`${type}Tooltip`].handleClosePopper();
+            }
         },
         mounted () {
             // #2852

src/styles/components/slider.less

@@ -34,7 +34,9 @@
         border-radius: 50%;
         background-color: #fff;
         transition: all @transition-time linear;
+        outline: 0;
 
+        &:focus,
         &:hover,
         &-dragging
         {