Slider add Tooltip show when focus with keyboard

梁灏
1 parent 791d254e
Showing 2 changed files with 118 additions and 71 deletions Show diff stats
examples/routers/slider.vue
src/components/slider/slider.vue
-<!--<template>-->
-    <!--<div style="margin: 0 400px;">-->
-        <!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
-        <!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
+<template>
+    <Form :model="formItem" :label-width="80">
+        <FormItem label="Input">
+            <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,-->
-                <!--valueRange: [20, 50],-->
-                <!--singleDisplayValue: 10,-->
-                <!--rangeDisplayValue: [20, 50]-->
-            <!--};-->
+                <!--modal1: false,-->
+                <!--value2: [20, 50],-->
+            <!--}-->
         <!--},-->
         <!--methods: {-->
-            <!--updateSingleDisplayValue (val){-->
-                <!--console.log('updateSingleDisplayValue', val);-->
-                <!--this.singleDisplayValue = val;-->
-            <!--},-->
-            <!--updateRangeDisplayValue (val){-->
-                <!--console.log('updateRangeDisplayValue', val);-->
-                <!--this.rangeDisplayValue = val.join(' - ');-->
+            <!--ok () {-->
+                <!--this.$Message.info('Clicked ok');-->
             <!--},-->
-            <!--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;-->
+            <!--cancel () {-->
+                <!--this.$Message.info('Clicked cancel');-->
             <!--}-->
         <!--}-->
-    <!--};-->
+    <!--}-->
 <!--</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>
@@ -41,6 +41,8 @@
                     <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')"
@@ -64,6 +66,8 @@
                     <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')"
@@ -257,28 +261,28 @@
                 return [min, max];
             },
             getCurrentValue (event, type) {
-              if (this.disabled) {
-                return;
-              }
+                if (this.disabled) {
+                    return;
+                }
-              const index = this.valueIndex[type];
-              if (typeof index === 'undefined') {
-                return;
-              }
+                const index = this.valueIndex[type];
+                if (typeof index === 'undefined') {
+                    return;
+                }
-              return this.currentValue[index];
+                return this.currentValue[index];
             },
             onKeyLeft (event, type) {
-              const value = this.getCurrentValue(event, type);
-              if (Number.isFinite(value)) {
-                this.changeButtonPosition(value - this.step, 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);
-              }
+                const value = this.getCurrentValue(event, type);
+                if (Number.isFinite(value)) {
+                    this.changeButtonPosition(value + this.step, type);
+                }
             },
             onPointerDown (event, type) {
                 if (this.disabled) return;
@@ -357,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