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
CHANGE.md
  Show/Hide comments   View file @d6f644e
... ... @@ -27,4 +27,5 @@ class 改为了 className
27 27 ### Circle
28 28 改名为 iCircle
29 29 ### Tabs
30   -废弃 activeKey，改用 value，使用 v-model，key 更名为 name
31 30 \ No newline at end of file
  31 +废弃 activeKey，改用 value，使用 v-model，key 更名为 name
  32 +### popper.js 将 prop: visible 移至 data 里
32 33 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @d6f644e
... ... @@ -45,7 +45,7 @@
45 45 - [x] Collapse
46 46 - [x] Timeline
47 47 - [x] Tag
48   -- [ ] Tooltip
  48 +- [x] Tooltip
49 49 - [ ] Poptip
50 50 - [x] Carousel
51 51 - [x] Tree
... ...
src/components/base/popper.js
  Show/Hide comments   View file @d6f644e
... ... @@ -18,20 +18,28 @@ export default {
18 18 offset: {
19 19 default: 0
20 20 },
21   - value: Boolean,
  21 + value: {
  22 + type: Boolean,
  23 + default: false
  24 + },
22 25 transition: String,
23 26 options: {
24 27 type: Object,
25 28 default () {
26 29 return {
27 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 45 watch: {
... ... @@ -59,8 +67,8 @@ export default {
59 67 }
60 68  
61 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 73 if (!popper || !reference) return;
66 74  
... ...
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @d6f644e
1 1 <template>
2 2 <div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
3   - <div :class="[prefixCls + '-rel']" v-el:reference>
  3 + <div :class="[prefixCls + '-rel']" ref="reference">
4 4 <slot></slot>
5 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 12 </div>
11   - </div>
  13 + </transition>
12 14 </div>
13 15 </template>
14 16 <script>
... ...
src/index.js
  Show/Hide comments   View file @d6f644e
... ... @@ -29,7 +29,7 @@ import InputNumber from &#39;./components/input-number&#39;;
29 29 import Progress from './components/progress';
30 30 import Radio from './components/radio';
31 31 import Rate from './components/rate';
32   -// import Slider from './components/slider';
  32 +import Slider from './components/slider';
33 33 // import Spin from './components/spin';
34 34 import Steps from './components/steps';
35 35 import Switch from './components/switch';
... ... @@ -38,7 +38,7 @@ import Tabs from &#39;./components/tabs&#39;;
38 38 import Tag from './components/tag';
39 39 import Timeline from './components/timeline';
40 40 // import TimePicker from './components/time-picker';
41   -// import Tooltip from './components/tooltip';
  41 +import Tooltip from './components/tooltip';
42 42 // import Transfer from './components/transfer';
43 43 import Tree from './components/tree';
44 44 import Upload from './components/upload';
... ... @@ -94,7 +94,7 @@ const iview = {
94 94 Rate,
95 95 Row,
96 96 // iSelect: Select,
97   - // Slider,
  97 + Slider,
98 98 // Spin,
99 99 Step: Steps.Step,
100 100 Steps,
... ... @@ -106,7 +106,7 @@ const iview = {
106 106 Timeline,
107 107 TimelineItem: Timeline.Item,
108 108 // TimePicker,
109   - // Tooltip,
  109 + Tooltip,
110 110 // Transfer,
111 111 Tree,
112 112 Upload
... ...
test/app.vue
  Show/Hide comments   View file @d6f644e
... ... @@ -35,6 +35,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
35 35 <li><router-link to="/rate">Rate</router-link></li>
36 36 <li><router-link to="/circle">Circle</router-link></li>
37 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 40 </ul>
39 41 </nav>
40 42 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @d6f644e
... ... @@ -104,6 +104,14 @@ const router = new VueRouter({
104 104 {
105 105 path: '/tabs',
106 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 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 5 </template>
65 6 <script>
66   - import { Tooltip, iButton, Message } from 'iview';
67 7 export default {
68   - components: { Tooltip, iButton },
69   - methods: {
70   - hide () {
71   - Message.info('hide')
72   - }
73   - }
  8 +
74 9 }
75 10 </script>
... ...