chenhaodong / mew-iview

Commit 5cb6ce9e5244f2fee419905417215ef168de53fa

Authored by 梁灏
1 parent 791d254e

Slider add Tooltip show when focus with keyboard

Showing 2 changed files with 118 additions and 71 deletions   Show diff stats
Inline Side-by-side
examples/routers/slider.vue
  Show/Hide comments   View file @5cb6ce9
1   -<!--<template>-->
2   - <!--<div style="margin: 0 400px;">-->
3   - <!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
4   - <!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
  1 +<template>
  2 + <Form :model="formItem" :label-width="80">
  3 + <FormItem label="Input">
  4 + <Input v-model="formItem.input" placeholder="Enter something..."></Input>
  5 + </FormItem>
  6 + <FormItem label="Select">
  7 + <Select v-model="formItem.select">
  8 + <Option value="beijing">New York</Option>
  9 + <Option value="shanghai">London</Option>
  10 + <Option value="shenzhen">Sydney</Option>
  11 + </Select>
  12 + </FormItem>
  13 + <FormItem label="DatePicker">
  14 + <Row>
  15 + <Col span="11">
  16 + <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
  17 + </Col>
  18 + <Col span="2" style="text-align: center">-</Col>
  19 + <Col span="11">
  20 + <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
  21 + </Col>
  22 + </Row>
  23 + </FormItem>
  24 + <FormItem label="Radio">
  25 + <RadioGroup v-model="formItem.radio">
  26 + <Radio label="male">Male</Radio>
  27 + <Radio label="female">Female</Radio>
  28 + </RadioGroup>
  29 + </FormItem>
  30 + <FormItem label="Checkbox">
  31 + <CheckboxGroup v-model="formItem.checkbox">
  32 + <Checkbox label="Eat"></Checkbox>
  33 + <Checkbox label="Sleep"></Checkbox>
  34 + <Checkbox label="Run"></Checkbox>
  35 + <Checkbox label="Movie"></Checkbox>
  36 + </CheckboxGroup>
  37 + </FormItem>
  38 + <FormItem label="Switch">
  39 + <i-switch v-model="formItem.switch" size="large">
  40 + <span slot="open">On</span>
  41 + <span slot="close">Off</span>
  42 + </i-switch>
  43 + </FormItem>
  44 + <FormItem label="Slider">
  45 + <Slider v-model="formItem.slider" range></Slider>
  46 + </FormItem>
  47 + <FormItem label="Text">
  48 + <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
  49 + </FormItem>
  50 + <FormItem>
  51 + <Button type="primary">Submit</Button>
  52 + <Button type="ghost" style="margin-left: 8px">Cancel</Button>
  53 + </FormItem>
  54 + </Form>
  55 +</template>
  56 +<script>
  57 + export default {
  58 + data () {
  59 + return {
  60 + formItem: {
  61 + input: '',
  62 + select: '',
  63 + radio: 'male',
  64 + checkbox: [],
  65 + switch: true,
  66 + date: '',
  67 + time: '',
  68 + slider: [20, 50],
  69 + textarea: ''
  70 + }
  71 + }
  72 + }
  73 + }
  74 +</script>
  75 +
5 76  
6   - <!--<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>-->
7   - <!--<Button @click="randomRange">change</Button> {{rangeDisplayValue}}-->
  77 +
  78 +<!--<template>-->
  79 + <!--<div>-->
  80 + <!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
  81 + <!--<Modal v-model="modal1">-->
  82 + <!--<Slider v-model="value2" range show-tip="always"></Slider>-->
  83 + <!--</Modal>-->
8 84 <!--</div>-->
9 85 <!--</template>-->
10 86 <!--<script>-->
11 87 <!--export default {-->
12 88 <!--data () {-->
13 89 <!--return {-->
14   - <!--valueSingle: 10,-->
15   - <!--valueRange: [20, 50],-->
16   - <!--singleDisplayValue: 10,-->
17   - <!--rangeDisplayValue: [20, 50]-->
18   - <!--};-->
  90 + <!--modal1: false,-->
  91 + <!--value2: [20, 50],-->
  92 + <!--}-->
19 93 <!--},-->
20 94 <!--methods: {-->
21   - <!--updateSingleDisplayValue (val){-->
22   - <!--console.log('updateSingleDisplayValue', val);-->
23   - <!--this.singleDisplayValue = val;-->
24   - <!--},-->
25   - <!--updateRangeDisplayValue (val){-->
26   - <!--console.log('updateRangeDisplayValue', val);-->
27   - <!--this.rangeDisplayValue = val.join(' - ');-->
  95 + <!--ok () {-->
  96 + <!--this.$Message.info('Clicked ok');-->
28 97 <!--},-->
29   - <!--randomSingle () {-->
30   - <!--this.valueSingle = this.random(0, 100);-->
31   - <!--},-->
32   - <!--randomRange () {-->
33   - <!--this.valueRange = [this.random(0, 50), this.random(50, 100)];-->
34   - <!--},-->
35   - <!--random (min, max){-->
36   - <!--return Math.round(Math.random() * (max - min)) + min;-->
  98 + <!--cancel () {-->
  99 + <!--this.$Message.info('Clicked cancel');-->
37 100 <!--}-->
38 101 <!--}-->
39   - <!--};-->
  102 + <!--}-->
40 103 <!--</script>-->
41   -
42   -
43   -<template>
44   - <div>
45   - <Button type="primary" @click="modal1 = true">Display dialog box</Button>
46   - <Modal v-model="modal1">
47   - <Slider v-model="value2" range show-tip="always"></Slider>
48   - </Modal>
49   - </div>
50   -</template>
51   -<script>
52   - export default {
53   - data () {
54   - return {
55   - modal1: false,
56   - value2: [20, 50],
57   - }
58   - },
59   - methods: {
60   - ok () {
61   - this.$Message.info('Clicked ok');
62   - },
63   - cancel () {
64   - this.$Message.info('Clicked cancel');
65   - }
66   - }
67   - }
68   -</script>
... ...
src/components/slider/slider.vue
  Show/Hide comments   View file @5cb6ce9
... ... @@ -41,6 +41,8 @@
41 41 <div
42 42 :class="minButtonClasses"
43 43 tabindex="0"
  44 + @focus="handleFocus('min')"
  45 + @blur="handleBlur('min')"
44 46 @keydown.left="onKeyLeft($event, 'min')"
45 47 @keydown.down="onKeyLeft($event, 'min')"
46 48 @keydown.right="onKeyRight($event, 'min')"
... ... @@ -64,6 +66,8 @@
64 66 <div
65 67 :class="maxButtonClasses"
66 68 tabindex="0"
  69 + @focus="handleFocus('max')"
  70 + @blur="handleBlur('max')"
67 71 @keydown.left="onKeyLeft($event, 'max')"
68 72 @keydown.down="onKeyLeft($event, 'max')"
69 73 @keydown.right="onKeyRight($event, 'max')"
... ... @@ -257,28 +261,28 @@
257 261 return [min, max];
258 262 },
259 263 getCurrentValue (event, type) {
260   - if (this.disabled) {
261   - return;
262   - }
  264 + if (this.disabled) {
  265 + return;
  266 + }
263 267  
264   - const index = this.valueIndex[type];
265   - if (typeof index === 'undefined') {
266   - return;
267   - }
  268 + const index = this.valueIndex[type];
  269 + if (typeof index === 'undefined') {
  270 + return;
  271 + }
268 272  
269   - return this.currentValue[index];
  273 + return this.currentValue[index];
270 274 },
271 275 onKeyLeft (event, type) {
272   - const value = this.getCurrentValue(event, type);
273   - if (Number.isFinite(value)) {
274   - this.changeButtonPosition(value - this.step, type);
275   - }
  276 + const value = this.getCurrentValue(event, type);
  277 + if (Number.isFinite(value)) {
  278 + this.changeButtonPosition(value - this.step, type);
  279 + }
276 280 },
277 281 onKeyRight (event, type) {
278   - const value = this.getCurrentValue(event, type);
279   - if (Number.isFinite(value)) {
280   - this.changeButtonPosition(value + this.step, type);
281   - }
  282 + const value = this.getCurrentValue(event, type);
  283 + if (Number.isFinite(value)) {
  284 + this.changeButtonPosition(value + this.step, type);
  285 + }
282 286 },
283 287 onPointerDown (event, type) {
284 288 if (this.disabled) return;
... ... @@ -357,6 +361,14 @@
357 361 this.currentValue = [val, this.currentValue[1]];
358 362 this.emitChange();
359 363 },
  364 +
  365 + handleFocus (type) {
  366 + this.$refs[`${type}Tooltip`].handleShowPopper();
  367 + },
  368 +
  369 + handleBlur (type) {
  370 + this.$refs[`${type}Tooltip`].handleClosePopper();
  371 + }
360 372 },
361 373 mounted () {
362 374 // #2852
... ...