other / mew-iview

Commit 59872199341f6e75ff95dd9162c3982bc85af97e

Authored by Rijn
1 parent c13e7cea

added show-tip to slider and added always to tooltip

Showing 3 changed files with 22 additions and 5 deletions   Show diff stats
Inline Side-by-side
src/components/slider/slider.vue
  Show/Hide comments   View file @5987219
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 :class="[prefixCls + '-button-wrap']" 18 :class="[prefixCls + '-button-wrap']"
19 :style="{left: firstPosition + '%'}" 19 :style="{left: firstPosition + '%'}"
20 @mousedown="onFirstButtonDown"> 20 @mousedown="onFirstButtonDown">
21 - <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipFormat(value[0]) === null" v-ref:tooltip> 21 + <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
22 <div :class="button1Classes"></div> 22 <div :class="button1Classes"></div>
23 </Tooltip> 23 </Tooltip>
24 </div> 24 </div>
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 :class="[prefixCls + '-button-wrap']" 26 :class="[prefixCls + '-button-wrap']"
27 :style="{left: secondPosition + '%'}" 27 :style="{left: secondPosition + '%'}"
28 @mousedown="onSecondButtonDown"> 28 @mousedown="onSecondButtonDown">
29 - <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipFormat(value[1]) === null" v-ref:tooltip2> 29 + <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip2>
30 <div :class="button2Classes"></div> 30 <div :class="button2Classes"></div>
31 </Tooltip> 31 </Tooltip>
32 </div> 32 </div>
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 :class="[prefixCls + '-button-wrap']" 36 :class="[prefixCls + '-button-wrap']"
37 :style="{left: singlePosition + '%'}" 37 :style="{left: singlePosition + '%'}"
38 @mousedown="onSingleButtonDown"> 38 @mousedown="onSingleButtonDown">
39 - <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipFormat(value) === null" v-ref:tooltip> 39 + <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
40 <div :class="buttonClasses"></div> 40 <div :class="buttonClasses"></div>
41 </Tooltip> 41 </Tooltip>
42 </div> 42 </div>
@@ -47,7 +47,7 @@ @@ -47,7 +47,7 @@
47 <script> 47 <script>
48 import InputNumber from '../../components/input-number/input-number.vue'; 48 import InputNumber from '../../components/input-number/input-number.vue';
49 import Tooltip from '../../components/tooltip/tooltip.vue'; 49 import Tooltip from '../../components/tooltip/tooltip.vue';
50 - import { getStyle } from '../../utils/assist'; 50 + import { getStyle, oneOf } from '../../utils/assist';
51 51
52 const prefixCls = 'ivu-slider'; 52 const prefixCls = 'ivu-slider';
53 53
@@ -91,6 +91,13 @@ @@ -91,6 +91,13 @@
91 default (val) { 91 default (val) {
92 return val; 92 return val;
93 } 93 }
  94 + },
  95 + showTip: {
  96 + type: String,
  97 + default: 'hover',
  98 + validator (value) {
  99 + return oneOf(value, ['hover', 'always', 'never']);
  100 + }
94 } 101 }
95 }, 102 },
96 data () { 103 data () {
@@ -173,6 +180,9 @@ @@ -173,6 +180,9 @@
173 }, 180 },
174 sliderWidth () { 181 sliderWidth () {
175 return parseInt(getStyle(this.$els.slider, 'width'), 10); 182 return parseInt(getStyle(this.$els.slider, 'width'), 10);
  183 + },
  184 + tipDisabled () {
  185 + return this.tipFormat(this.value[0]) === null || this.showTip === 'never'
176 } 186 }
177 }, 187 },
178 watch: { 188 watch: {
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @5987219
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <div :class="[prefixCls + '-rel']" v-el:reference> 3 <div :class="[prefixCls + '-rel']" v-el:reference>
4 <slot></slot> 4 <slot></slot>
5 </div> 5 </div>
6 - <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible"> 6 + <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && (visible || always)">
7 <div :class="[prefixCls + '-content']"> 7 <div :class="[prefixCls + '-content']">
8 <div :class="[prefixCls + '-arrow']"></div> 8 <div :class="[prefixCls + '-arrow']"></div>
9 <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div> 9 <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
@@ -41,6 +41,10 @@ @@ -41,6 +41,10 @@
41 controlled: { // under this prop,Tooltip will not close when mouseleave 41 controlled: { // under this prop,Tooltip will not close when mouseleave
42 type: Boolean, 42 type: Boolean,
43 default: false 43 default: false
  44 + },
  45 + always: {
  46 + type: Boolean,
  47 + default: false
44 } 48 }
45 }, 49 },
46 data () { 50 data () {
test/routers/slider.vue
  Show/Hide comments   View file @5987219
@@ -14,6 +14,9 @@ @@ -14,6 +14,9 @@
14 </div> 14 </div>
15 <Slider :value="75"></Slider> 15 <Slider :value="75"></Slider>
16 <Slider :value="[20, 50]" range></Slider> 16 <Slider :value="[20, 50]" range></Slider>
  17 + <Slider :value="[20, 50]" show-tip="always"></Slider>
  18 + <Slider :value="[20, 50]" show-tip="hover"></Slider>
  19 + <Slider :value="[20, 50]" show-tip="never"></Slider>
17 </div> 20 </div>
18 </template> 21 </template>
19 <script> 22 <script>