chenhaodong / mew-iview

Commit 071506fc664fa4de3aea3931224df910561789bd

Authored by 梁灏
1 parent 75e5c6a5

optimize Poptip focus trigger when using input 

optimize Poptip focus trigger when using input
Showing 2 changed files with 51 additions and 182 deletions   Show diff stats
Inline Side-by-side
src/components/poptip/poptip.vue
  Show/Hide comments   View file @071506f
@@ -8,8 +8,8 @@ @@ -8,8 +8,8 @@
8 :class="[prefixCls + '-rel']" 8 :class="[prefixCls + '-rel']"
9 v-el:reference 9 v-el:reference
10 @click="handleClick" 10 @click="handleClick"
11 - @mousedown="handleFocus"  
12 - @mouseup="handleBlur"> 11 + @mousedown="handleFocus(false)"
  12 + @mouseup="handleBlur(false)">
13 <slot></slot> 13 <slot></slot>
14 </div> 14 </div>
15 <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible"> 15 <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
@@ -91,7 +91,8 @@ @@ -91,7 +91,8 @@
91 data () { 91 data () {
92 return { 92 return {
93 prefixCls: prefixCls, 93 prefixCls: prefixCls,
94 - showTitle: true 94 + showTitle: true,
  95 + isInput: false
95 }; 96 };
96 }, 97 },
97 computed: { 98 computed: {
@@ -133,14 +134,14 @@ @@ -133,14 +134,14 @@
133 } 134 }
134 this.visible = false; 135 this.visible = false;
135 }, 136 },
136 - handleFocus () {  
137 - if (this.trigger !== 'focus' || this.confirm) { 137 + handleFocus (fromInput = true) {
  138 + if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
138 return false; 139 return false;
139 } 140 }
140 this.visible = true; 141 this.visible = true;
141 }, 142 },
142 - handleBlur () {  
143 - if (this.trigger !== 'focus' || this.confirm) { 143 + handleBlur (fromInput = true) {
  144 + if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
144 return false; 145 return false;
145 } 146 }
146 this.visible = false; 147 this.visible = false;
@@ -164,12 +165,41 @@ @@ -164,12 +165,41 @@
164 ok () { 165 ok () {
165 this.visible = false; 166 this.visible = false;
166 this.$emit('on-ok'); 167 this.$emit('on-ok');
  168 + },
  169 + getInputChildren () {
  170 + const $input = this.$els.reference.querySelectorAll('input');
  171 + const $textarea = this.$els.reference.querySelectorAll('textarea');
  172 + let $children = null;
  173 +
  174 + if ($input.length) {
  175 + $children = $input[0];
  176 + } else if ($textarea.length) {
  177 + $children = $textarea[0];
  178 + }
  179 +
  180 + return $children;
167 } 181 }
168 }, 182 },
169 - ready () { 183 + compiled () {
170 if (!this.confirm) { 184 if (!this.confirm) {
171 this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`; 185 this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
172 } 186 }
  187 + // if trigger and children is input or textarea,listen focus & blur event
  188 + if (this.trigger === 'focus') {
  189 + const $children = this.getInputChildren();
  190 + if ($children) {
  191 + $children.addEventListener('focus', this.handleFocus, false);
  192 + $children.addEventListener('blur', this.handleBlur, false);
  193 + this.isInput = true;
  194 + }
  195 + }
  196 + },
  197 + beforeDestroy () {
  198 + const $children = this.getInputChildren();
  199 + if ($children) {
  200 + $children.removeEventListener('focus', this.handleFocus, false);
  201 + $children.removeEventListener('blur', this.handleBlur, false);
  202 + }
173 } 203 }
174 }; 204 };
175 </script> 205 </script>
test/routers/poptip.vue
  Show/Hide comments   View file @071506f
1 -<style>  
2 - .tooltip_out{  
3 - padding: 150px;  
4 - }  
5 - body{  
6 - height: 1000px;  
7 - padding: 10px;  
8 - }  
9 - .api table{  
10 - font-family: Consolas,Menlo,Courier,monospace;  
11 - font-size: 13px;  
12 - border-collapse: collapse;  
13 - border-spacing: 0;  
14 - empty-cells: show;  
15 - border: 1px solid #e9e9e9;  
16 - width: 100%;  
17 - margin-bottom: 24px;  
18 - }  
19 - .api table th{  
20 - background: #f7f7f7;  
21 - white-space: nowrap;  
22 - color: #5c6b77;  
23 - font-weight: 600;  
24 - }  
25 - .api table td, .api table th{  
26 - border: 1px solid #e9e9e9;  
27 - padding: 8px 16px;  
28 - text-align: left;  
29 - }  
30 - .tip{  
31 - width: 24px;  
32 - position: fixed;  
33 - top: 10px;  
34 - right: 10px;  
35 - }  
36 - .tip-inner{  
37 - width: 24px;  
38 - height: 24px;  
39 - line-height: 22px;  
40 - text-align: center;  
41 - background: #fff;  
42 - border: 1px solid #3399ff;  
43 - color: #3399ff;  
44 - border-radius: 50%;  
45 - cursor: pointer;  
46 - }  
47 - .tip-content{  
48 - width: 200px;  
49 - height: 100px;  
50 - white-space: normal;  
51 - }  
52 -</style>  
53 <template> 1 <template>
54 - <Tooltip content="这里是提示文字">  
55 - 当鼠标经过这段文字时，会显示一个气泡框  
56 - </Tooltip>  
57 - <div class="tooltip_out">  
58 - <!--<Tooltip placement="top" content="Tooltip 文字提示">-->  
59 - <!--<strong>-->  
60 - <!--<a>Link</a>-->  
61 - <!--</strong>-->  
62 - <!--</Tooltip>-->  
63 - <!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->  
64 - <!--<i-button>hover 激活</i-button>-->  
65 - <!--</Poptip>-->  
66 - <!--<Poptip content="提示内容" title="tip">-->  
67 - <!--<i-button>click 激活</i-button>-->  
68 - <!--</Poptip>-->  
69 - <!--<Poptip content="提示内容">-->  
70 - <!--<div slot="title"><i>自定义标题</i></div>-->  
71 - <!--<i-button>click 激活</i-button>-->  
72 - <!--</Poptip>-->  
73 - <!--<Tooltip class="tip" placement="left-start" trigger="hover">-->  
74 - <!--<div class="tip-inner">-->  
75 - <!--<Icon type="information"></Icon>-->  
76 - <!--</div>-->  
77 - <!--<div class="tip-content" slot="content">-->  
78 - <!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->  
79 - <!--</div>-->  
80 - <!--</Tooltip>-->  
81 - <!--<Poptip>-->  
82 - <!--<a>click 激活</a>-->  
83 - <!--<div slot="title"><i>自定义标题</i></div>-->  
84 - <!--<div slot="content">-->  
85 - <!--<a>关闭提示框</a>-->  
86 - <!--</div>-->  
87 - <!--</Poptip>-->  
88 - <!--<Poptip placement="right" width="300">-->  
89 - <!--<i-button type="ghost">click 激活</i-button>-->  
90 - <!--<div class="api" slot="content">-->  
91 - <!--<table>-->  
92 - <!--<thead>-->  
93 - <!--<tr>-->  
94 - <!--<th>属性</th>-->  
95 - <!--<th>说明</th>-->  
96 - <!--<th>类型</th>-->  
97 - <!--<th>默认值</th>-->  
98 - <!--</tr>-->  
99 - <!--</thead>-->  
100 - <!--<tbody>-->  
101 - <!--<tr>-->  
102 - <!--<td>content</td>-->  
103 - <!--<td>显示的内容</td>-->  
104 - <!--<td>String | Number</td>-->  
105 - <!--<td>空</td>-->  
106 - <!--</tr>-->  
107 - <!--<tr>-->  
108 - <!--<td>placement</td>-->  
109 - <!--<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>-->  
110 - <!--<td>String</td>-->  
111 - <!--<td>bottom</td>-->  
112 - <!--</tr>-->  
113 - <!--<tr>-->  
114 - <!--<td>disabled</td>-->  
115 - <!--<td>是否禁用提示框</td>-->  
116 - <!--<td>Boolean</td>-->  
117 - <!--<td>false</td>-->  
118 - <!--</tr>-->  
119 - <!--<tr>-->  
120 - <!--<td>delay</td>-->  
121 - <!--<td>延迟显示，单位毫秒</td>-->  
122 - <!--<td>Number</td>-->  
123 - <!--<td>0</td>-->  
124 - <!--</tr>-->  
125 - <!--</tbody>-->  
126 - <!--</table>-->  
127 - <!--</div>-->  
128 - <!--</Poptip>-->  
129 - <!--<Poptip title="标题" content="内容">-->  
130 - <!--<Button>click 触发</Button>-->  
131 - <!--</Poptip>-->  
132 - <!--<Poptip title="标题" content="内容" trigger="hover">-->  
133 - <!--<Button>hover 触发</Button>-->  
134 - <!--</Poptip>-->  
135 - <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel" @on-popper-hide="hide">  
136 - <a><strong>Delete</strong></a> 2 + <div style="margin: 100px">
  3 + <Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
  4 + <i-button>hover 激活</i-button>
  5 + </Poptip>
  6 + <Poptip title="提示标题" placement="bottom" content="提示内容">
  7 + <i-button>click 激活</i-button>
  8 + </Poptip>
  9 + <Poptip trigger="focus" title="提示标题" content="提示内容">
  10 + <i-input type="textarea"></i-input>
  11 + <!--<i-button>focus 激活</i-button>-->
  12 + </Poptip>
  13 + <Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
  14 + <i-input></i-input>
137 </Poptip> 15 </Poptip>
138 - <!--<Poptip title="标题" content="内容" trigger="focus">-->  
139 - <!--<input type="text">-->  
140 - <!--</Poptip>-->  
141 - <!--<Poptip title="标题" content="内容" trigger="focus">-->  
142 - <!--<Button>focus 触发</Button>-->  
143 - <!--</Poptip>-->  
144 - <!--<Tooltip content="这里是提示文字">-->  
145 - <!--当鼠标经过这段文字时，会显示一个气泡框-->  
146 - <!--</Tooltip>-->  
147 - <!--<Poptip>-->  
148 - <!--<a>click 激活</a>-->  
149 - <!--<div slot="content">-->  
150 - <!--<a>关闭提示框</a>-->  
151 - <!--</div>-->  
152 - <!--</Poptip>-->  
153 </div> 16 </div>
154 </template> 17 </template>
155 <script> 18 <script>
156 - import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';  
157 -  
158 export default { 19 export default {
159 - components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },  
160 - props: {  
161 -  
162 - },  
163 - data () {  
164 - return {  
165 -  
166 - }  
167 - },  
168 - computed: {  
169 20
170 - },  
171 - methods: {  
172 - ok () {  
173 - Message.info('ok');  
174 - },  
175 - cancel () {  
176 - Message.info('cancel');  
177 - },  
178 - hide () {  
179 - Message.info('hide')  
180 - }  
181 - }  
182 } 21 }
183 </script> 22 </script>