other / mew-iview

Commit fcf3cace8e7eee39ff90edc13ee1663b7f8c24c5

Authored by 梁灏
1 parent 1b737fdc

Poptip & Tooltip add transfer prop 

Using transfer prop, the dom will be transfered to body.
Showing 7 changed files with 68 additions and 65 deletions   Show diff stats
Inline Side-by-side
examples/components/test.vue
  Show/Hide comments   View file @fcf3cac
1 1 <template>
2   - <Select v-model="model1" style="width:200px">
3   - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
4   - </Select>
  2 + <Poptip trigger="hover" title="提示标题" :transfer="true" placement="left" content="提示内容">
  3 + <Button>hover 激活</Button>
  4 + </Poptip>
5 5 </template>
6 6 <script>
7 7 export default {
8   - data () {
9   - return {
10   - cityList: [
11   - {
12   - value: 'beijing',
13   - label: '北京市'
14   - },
15   - {
16   - value: 'shanghai',
17   - label: '上海市'
18   - },
19   - {
20   - value: 'shenzhen',
21   - label: '深圳市'
22   - },
23   - {
24   - value: 'hangzhou',
25   - label: '杭州市'
26   - },
27   - {
28   - value: 'nanjing',
29   - label: '南京市'
30   - },
31   - {
32   - value: 'chongqing',
33   - label: '重庆市'
34   - }
35   - ],
36   - model1: ''
37   - }
38   - }
  8 +
39 9 }
40   -</script>
41 10 \ No newline at end of file
  11 +</script>
... ...
examples/routers/poptip.vue
  Show/Hide comments   View file @fcf3cac
1 1 <template>
2 2 <div>
3   - <Poptip trigger="hover" title="提示标题" content="提示内容">
  3 + <Poptip trigger="hover" transfer title="提示标题" content="提示内容">
4 4 <Button>hover 激活</Button>
5 5 </Poptip>
6 6 <Poptip title="提示标题" content="提示内容">
... ...
examples/routers/table.vue
  Show/Hide comments   View file @fcf3cac
... ... @@ -8,6 +8,7 @@
8 8 :data="data3"></Table>
9 9 </template>
10 10 <script>
  11 + import test from '../components/test.vue';
11 12 export default {
12 13 data () {
13 14 return {
... ... @@ -59,20 +60,7 @@
59 60 fixed: 'right',
60 61 width: 120,
61 62 render: (h, params) => {
62   - return h('div', [
63   - h('Button', {
64   - props: {
65   - type: 'text',
66   - size: 'small'
67   - }
68   - }, '查看'),
69   - h('Button', {
70   - props: {
71   - type: 'text',
72   - size: 'small'
73   - }
74   - }, '编辑')
75   - ]);
  63 + return h(test);
76 64 }
77 65 }
78 66 ],
... ...
examples/routers/tooltip.vue
  Show/Hide comments   View file @fcf3cac
1 1 <template>
2   - <Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
3   - <Button @click="disabled = true">延时1秒显示</Button>
4   - </Tooltip>
  2 + <div>
  3 + <Tooltip placement="top" transfer content="Tooltip 文字提示" :delay="1000">
  4 + <Button @click="disabled = true">延时1秒显示</Button>
  5 + </Tooltip>
  6 + <Tooltip placement="top" transfer content="Tooltip 文字提示">
  7 + <Button @click="disabled = true">延时1秒显示</Button>
  8 + </Tooltip>
  9 + </div>
5 10 </template>
6 11 <script>
7 12 export default {
... ...
src/components/poptip/poptip.vue
  Show/Hide comments   View file @fcf3cac
... ... @@ -13,7 +13,14 @@
13 13 <slot></slot>
14 14 </div>
15 15 <transition name="fade">
16   - <div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
  16 + <div
  17 + :class="[prefixCls + '-popper']"
  18 + :style="styles"
  19 + ref="popper"
  20 + v-show="visible"
  21 + @mouseenter="handleMouseenter"
  22 + @mouseleave="handleMouseleave"
  23 + v-transfer-dom:forbidden="transfer">
17 24 <div :class="[prefixCls + '-content']">
18 25 <div :class="[prefixCls + '-arrow']"></div>
19 26 <div :class="[prefixCls + '-inner']" v-if="confirm">
... ... @@ -41,6 +48,7 @@
41 48 import Popper from '../base/popper';
42 49 import iButton from '../button/button.vue';
43 50 import clickoutside from '../../directives/clickoutside';
  51 + import TransferDom from '../../directives/transfer-dom';
44 52 import { oneOf } from '../../utils/assist';
45 53 import Locale from '../../mixins/locale';
46 54  
... ... @@ -49,7 +57,7 @@
49 57 export default {
50 58 name: 'Poptip',
51 59 mixins: [ Popper, Locale ],
52   - directives: { clickoutside },
  60 + directives: { clickoutside, TransferDom },
53 61 components: { iButton },
54 62 props: {
55 63 trigger: {
... ... @@ -83,6 +91,10 @@
83 91 },
84 92 cancelText: {
85 93 type: String
  94 + },
  95 + transfer: {
  96 + type: Boolean,
  97 + default: false
86 98 }
87 99 },
88 100 data () {
... ... @@ -161,13 +173,21 @@
161 173 if (this.trigger !== 'hover' || this.confirm) {
162 174 return false;
163 175 }
164   - this.visible = true;
  176 + if (this.enterTimer) clearTimeout(this.enterTimer);
  177 + this.enterTimer = setTimeout(() => {
  178 + this.visible = true;
  179 + }, 100);
165 180 },
166 181 handleMouseleave () {
167 182 if (this.trigger !== 'hover' || this.confirm) {
168 183 return false;
169 184 }
170   - this.visible = false;
  185 + if (this.enterTimer) {
  186 + clearTimeout(this.enterTimer);
  187 + this.enterTimer = setTimeout(() => {
  188 + this.visible = false;
  189 + }, 100);
  190 + }
171 191 },
172 192 cancel () {
173 193 this.visible = false;
... ...
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @fcf3cac
... ... @@ -4,7 +4,13 @@
4 4 <slot></slot>
5 5 </div>
6 6 <transition name="fade">
7   - <div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
  7 + <div
  8 + :class="[prefixCls + '-popper']"
  9 + ref="popper"
  10 + v-show="!disabled && (visible || always)"
  11 + @mouseenter="handleShowPopper"
  12 + @mouseleave="handleClosePopper"
  13 + v-transfer-dom:forbidden="transfer">
8 14 <div :class="[prefixCls + '-content']">
9 15 <div :class="[prefixCls + '-arrow']"></div>
10 16 <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
... ... @@ -15,12 +21,14 @@
15 21 </template>
16 22 <script>
17 23 import Popper from '../base/popper';
  24 + import TransferDom from '../../directives/transfer-dom';
18 25 import { oneOf } from '../../utils/assist';
19 26  
20 27 const prefixCls = 'ivu-tooltip';
21 28  
22 29 export default {
23 30 name: 'Tooltip',
  31 + directives: { TransferDom },
24 32 mixins: [Popper],
25 33 props: {
26 34 placement: {
... ... @@ -35,7 +43,7 @@
35 43 },
36 44 delay: {
37 45 type: Number,
38   - default: 0
  46 + default: 100
39 47 },
40 48 disabled: {
41 49 type: Boolean,
... ... @@ -48,6 +56,10 @@
48 56 always: {
49 57 type: Boolean,
50 58 default: false
  59 + },
  60 + transfer: {
  61 + type: Boolean,
  62 + default: false
51 63 }
52 64 },
53 65 data () {
... ... @@ -57,14 +69,19 @@
57 69 },
58 70 methods: {
59 71 handleShowPopper() {
  72 + if (this.timeout) clearTimeout(this.timeout);
60 73 this.timeout = setTimeout(() => {
61 74 this.visible = true;
62 75 }, this.delay);
63 76 },
64 77 handleClosePopper() {
65   - clearTimeout(this.timeout);
66   - if (!this.controlled) {
67   - this.visible = false;
  78 + if (this.timeout) {
  79 + clearTimeout(this.timeout);
  80 + if (!this.controlled) {
  81 + this.timeout = setTimeout(() => {
  82 + this.visible = false;
  83 + }, 100);
  84 + }
68 85 }
69 86 }
70 87 }
... ...
src/directives/transfer-dom.js
  Show/Hide comments   View file @fcf3cac
... ... @@ -15,7 +15,8 @@ function getTarget (node) {
15 15 }
16 16  
17 17 const directive = {
18   - inserted (el, { value }, vnode) {
  18 + inserted (el, { value, arg }, vnode) {
  19 + if (arg.forbidden) return false;
19 20 el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
20 21 const parentNode = el.parentNode;
21 22 if (!parentNode) return;
... ... @@ -36,7 +37,8 @@ const directive = {
36 37 }
37 38 }
38 39 },
39   - componentUpdated (el, { value }) {
  40 + componentUpdated (el, { value, arg }) {
  41 + if (arg.forbidden) return false;
40 42 // need to make sure children are done updating (vs. `update`)
41 43 const ref$1 = el.__transferDomData;
42 44 if (!ref$1) return;
... ... @@ -60,7 +62,8 @@ const directive = {
60 62 getTarget(value).appendChild(el);
61 63 }
62 64 },
63   - unbind: function unbind (el, binding) {
  65 + unbind (el, { arg } ) {
  66 + if (arg.forbidden) return false;
64 67 el.className = el.className.replace('v-transfer-dom', '');
65 68 const ref$1 = el.__transferDomData;
66 69 if (!ref$1) return;
... ...