other / mew-iview

Commit d6f644e1d96b2e77cccfd78d73f52d11d09cc811

Authored by 梁灏
1 parent 30510c3d

support Tooltip 

support Tooltip
Showing 8 changed files with 44 additions and 88 deletions   Show diff stats
Inline Side-by-side
@@ -27,4 +27,5 @@ class 改为了 className @@ -27,4 +27,5 @@ class 改为了 className
27 ### Circle 27 ### Circle
28 改名为 iCircle 28 改名为 iCircle
29 ### Tabs 29 ### Tabs
30 -废弃 activeKey，改用 value，使用 v-model，key 更名为 name  
31 \ No newline at end of file 30 \ No newline at end of file
  31 +废弃 activeKey，改用 value，使用 v-model，key 更名为 name
  32 +### popper.js 将 prop: visible 移至 data 里
32 \ No newline at end of file 33 \ No newline at end of file
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 - [x] Collapse 45 - [x] Collapse
46 - [x] Timeline 46 - [x] Timeline
47 - [x] Tag 47 - [x] Tag
48 -- [ ] Tooltip 48 +- [x] Tooltip
49 - [ ] Poptip 49 - [ ] Poptip
50 - [x] Carousel 50 - [x] Carousel
51 - [x] Tree 51 - [x] Tree
src/components/base/popper.js
  Show/Hide comments   View file @d6f644e
@@ -18,20 +18,28 @@ export default { @@ -18,20 +18,28 @@ export default {
18 offset: { 18 offset: {
19 default: 0 19 default: 0
20 }, 20 },
21 - value: Boolean, 21 + value: {
  22 + type: Boolean,
  23 + default: false
  24 + },
22 transition: String, 25 transition: String,
23 options: { 26 options: {
24 type: Object, 27 type: Object,
25 default () { 28 default () {
26 return { 29 return {
27 gpuAcceleration: false, 30 gpuAcceleration: false,
28 - boundariesElement: 'body' 31 + // boundariesElement: 'body' // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证
29 }; 32 };
30 } 33 }
31 }, 34 },
32 - visible: {  
33 - type: Boolean,  
34 - default: false 35 + // visible: {
  36 + // type: Boolean,
  37 + // default: false
  38 + // }
  39 + },
  40 + data () {
  41 + return {
  42 + visible: this.value
35 } 43 }
36 }, 44 },
37 watch: { 45 watch: {
@@ -59,8 +67,8 @@ export default { @@ -59,8 +67,8 @@ export default {
59 } 67 }
60 68
61 const options = this.options; 69 const options = this.options;
62 - const popper = this.popper || this.$els.popper;  
63 - const reference = this.reference || this.$els.reference; 70 + const popper = this.popper || this.$refs.popper;
  71 + const reference = this.reference || this.$refs.reference;
64 72
65 if (!popper || !reference) return; 73 if (!popper || !reference) return;
66 74
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @d6f644e
1 <template> 1 <template>
2 <div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper"> 2 <div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
3 - <div :class="[prefixCls + '-rel']" v-el:reference> 3 + <div :class="[prefixCls + '-rel']" ref="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 || always)">  
7 - <div :class="[prefixCls + '-content']">  
8 - <div :class="[prefixCls + '-arrow']"></div>  
9 - <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div> 6 + <transition name="fade">
  7 + <div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
  8 + <div :class="[prefixCls + '-content']">
  9 + <div :class="[prefixCls + '-arrow']"></div>
  10 + <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
  11 + </div>
10 </div> 12 </div>
11 - </div> 13 + </transition>
12 </div> 14 </div>
13 </template> 15 </template>
14 <script> 16 <script>
@@ -29,7 +29,7 @@ import InputNumber from &#39;./components/input-number&#39;; @@ -29,7 +29,7 @@ import InputNumber from &#39;./components/input-number&#39;;
29 import Progress from './components/progress'; 29 import Progress from './components/progress';
30 import Radio from './components/radio'; 30 import Radio from './components/radio';
31 import Rate from './components/rate'; 31 import Rate from './components/rate';
32 -// import Slider from './components/slider'; 32 +import Slider from './components/slider';
33 // import Spin from './components/spin'; 33 // import Spin from './components/spin';
34 import Steps from './components/steps'; 34 import Steps from './components/steps';
35 import Switch from './components/switch'; 35 import Switch from './components/switch';
@@ -38,7 +38,7 @@ import Tabs from &#39;./components/tabs&#39;; @@ -38,7 +38,7 @@ import Tabs from &#39;./components/tabs&#39;;
38 import Tag from './components/tag'; 38 import Tag from './components/tag';
39 import Timeline from './components/timeline'; 39 import Timeline from './components/timeline';
40 // import TimePicker from './components/time-picker'; 40 // import TimePicker from './components/time-picker';
41 -// import Tooltip from './components/tooltip'; 41 +import Tooltip from './components/tooltip';
42 // import Transfer from './components/transfer'; 42 // import Transfer from './components/transfer';
43 import Tree from './components/tree'; 43 import Tree from './components/tree';
44 import Upload from './components/upload'; 44 import Upload from './components/upload';
@@ -94,7 +94,7 @@ const iview = { @@ -94,7 +94,7 @@ const iview = {
94 Rate, 94 Rate,
95 Row, 95 Row,
96 // iSelect: Select, 96 // iSelect: Select,
97 - // Slider, 97 + Slider,
98 // Spin, 98 // Spin,
99 Step: Steps.Step, 99 Step: Steps.Step,
100 Steps, 100 Steps,
@@ -106,7 +106,7 @@ const iview = { @@ -106,7 +106,7 @@ const iview = {
106 Timeline, 106 Timeline,
107 TimelineItem: Timeline.Item, 107 TimelineItem: Timeline.Item,
108 // TimePicker, 108 // TimePicker,
109 - // Tooltip, 109 + Tooltip,
110 // Transfer, 110 // Transfer,
111 Tree, 111 Tree,
112 Upload 112 Upload
@@ -35,6 +35,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -35,6 +35,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
35 <li><router-link to="/rate">Rate</router-link></li> 35 <li><router-link to="/rate">Rate</router-link></li>
36 <li><router-link to="/circle">Circle</router-link></li> 36 <li><router-link to="/circle">Circle</router-link></li>
37 <li><router-link to="/tabs">Tabs</router-link></li> 37 <li><router-link to="/tabs">Tabs</router-link></li>
  38 + <li><router-link to="/tooltip">Tooltip</router-link></li>
  39 + <li><router-link to="/slider">Slider</router-link></li>
38 </ul> 40 </ul>
39 </nav> 41 </nav>
40 <router-view></router-view> 42 <router-view></router-view>
@@ -104,6 +104,14 @@ const router = new VueRouter({ @@ -104,6 +104,14 @@ const router = new VueRouter({
104 { 104 {
105 path: '/tabs', 105 path: '/tabs',
106 component: require('./routers/tabs.vue') 106 component: require('./routers/tabs.vue')
  107 + },
  108 + {
  109 + path: '/tooltip',
  110 + component: require('./routers/tooltip.vue')
  111 + },
  112 + {
  113 + path: '/slider',
  114 + component: require('./routers/slider.vue')
107 } 115 }
108 ] 116 ]
109 }); 117 });
test/routers/tooltip.vue
  Show/Hide comments   View file @d6f644e
1 -<style scoped>  
2 - .top,.bottom{  
3 - text-align: center;  
4 - }  
5 - .center{  
6 - width: 300px;  
7 - margin: 10px auto;  
8 - overflow: hidden;  
9 - }  
10 - .center-left{  
11 - float: left;  
12 - }  
13 - .center-right{  
14 - float: right;  
15 - }  
16 -</style>  
17 <template> 1 <template>
18 - <div class="top">  
19 - <Tooltip content="Top Left 文字提示" placement="top-start" @on-popper-hide="hide">  
20 - <i-button>上左</i-button>  
21 - </Tooltip>  
22 - <Tooltip content="Top Center 文字提示" placement="top">  
23 - <i-button>上边</i-button>  
24 - </Tooltip>  
25 - <Tooltip content="Top Right 文字提示" placement="top-end">  
26 - <i-button>上右</i-button>  
27 - </Tooltip>  
28 - </div>  
29 - <div class="center">  
30 - <div class="center-left">  
31 - <Tooltip content="Left Top 文字提示" placement="left-start">  
32 - <i-button>左上</i-button>  
33 - </Tooltip><br><br>  
34 - <Tooltip content="Left Center 文字提示" placement="left">  
35 - <i-button>左边</i-button>  
36 - </Tooltip><br><br>  
37 - <Tooltip content="Left Bottom 文字提示" placement="left-end">  
38 - <i-button>左下</i-button>  
39 - </Tooltip>  
40 - </div>  
41 - <div class="center-right">  
42 - <Tooltip content="Right Top 文字提示" placement="right-start">  
43 - <i-button>右上</i-button>  
44 - </Tooltip><br><br>  
45 - <Tooltip content="Right Center 文字提示" placement="right">  
46 - <i-button>右边</i-button>  
47 - </Tooltip><br><br>  
48 - <Tooltip content="Right Bottom 文字提示" placement="right-end">  
49 - <i-button>右下</i-button>  
50 - </Tooltip>  
51 - </div>  
52 - </div>  
53 - <div class="bottom">  
54 - <Tooltip content="Bottom Left 文字提示" placement="bottom-start">  
55 - <i-button>下左</i-button>  
56 - </Tooltip>  
57 - <Tooltip content="Bottom Center 文字提示" placement="bottom">  
58 - <i-button>下边</i-button>  
59 - </Tooltip>  
60 - <Tooltip content="Bottom Right 文字提示" placement="bottom-end">  
61 - <i-button>下右</i-button>  
62 - </Tooltip>  
63 - </div> 2 + <Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
  3 + <Button @click="disabled = true">延时1秒显示</Button>
  4 + </Tooltip>
64 </template> 5 </template>
65 <script> 6 <script>
66 - import { Tooltip, iButton, Message } from 'iview';  
67 export default { 7 export default {
68 - components: { Tooltip, iButton },  
69 - methods: {  
70 - hide () {  
71 - Message.info('hide')  
72 - }  
73 - } 8 +
74 } 9 }
75 </script> 10 </script>