other / 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 :class="[prefixCls + '-rel']"
9 9 v-el:reference
10 10 @click="handleClick"
11   - @mousedown="handleFocus"
12   - @mouseup="handleBlur">
  11 + @mousedown="handleFocus(false)"
  12 + @mouseup="handleBlur(false)">
13 13 <slot></slot>
14 14 </div>
15 15 <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
... ... @@ -91,7 +91,8 @@
91 91 data () {
92 92 return {
93 93 prefixCls: prefixCls,
94   - showTitle: true
  94 + showTitle: true,
  95 + isInput: false
95 96 };
96 97 },
97 98 computed: {
... ... @@ -133,14 +134,14 @@
133 134 }
134 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 139 return false;
139 140 }
140 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 145 return false;
145 146 }
146 147 this.visible = false;
... ... @@ -164,12 +165,41 @@
164 165 ok () {
165 166 this.visible = false;
166 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 184 if (!this.confirm) {
171 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 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 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 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 16 </div>
154 17 </template>
155 18 <script>
156   - import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
157   -
158 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 22 </script>
... ...