From 071506fc664fa4de3aea3931224df910561789bd Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Mon, 16 Jan 2017 19:13:59 +0800
Subject: [PATCH] optimize Poptip focus trigger when using input
---
src/components/poptip/poptip.vue | 46 ++++++++++++++++++++++++++++++++++++++--------
test/routers/poptip.vue | 187 +++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2 files changed, 51 insertions(+), 182 deletions(-)
diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue
index bea3e60..9d33385 100644
--- a/src/components/poptip/poptip.vue
+++ b/src/components/poptip/poptip.vue
@@ -8,8 +8,8 @@
:class="[prefixCls + '-rel']"
v-el:reference
@click="handleClick"
- @mousedown="handleFocus"
- @mouseup="handleBlur">
+ @mousedown="handleFocus(false)"
+ @mouseup="handleBlur(false)">
<slot></slot>
</div>
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
@@ -91,7 +91,8 @@
data () {
return {
prefixCls: prefixCls,
- showTitle: true
+ showTitle: true,
+ isInput: false
};
},
computed: {
@@ -133,14 +134,14 @@
}
this.visible = false;
},
- handleFocus () {
- if (this.trigger !== 'focus' || this.confirm) {
+ handleFocus (fromInput = true) {
+ if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = true;
},
- handleBlur () {
- if (this.trigger !== 'focus' || this.confirm) {
+ handleBlur (fromInput = true) {
+ if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = false;
@@ -164,12 +165,41 @@
ok () {
this.visible = false;
this.$emit('on-ok');
+ },
+ getInputChildren () {
+ const $input = this.$els.reference.querySelectorAll('input');
+ const $textarea = this.$els.reference.querySelectorAll('textarea');
+ let $children = null;
+
+ if ($input.length) {
+ $children = $input[0];
+ } else if ($textarea.length) {
+ $children = $textarea[0];
+ }
+
+ return $children;
}
},
- ready () {
+ compiled () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
}
+ // if trigger and children is input or textarea,listen focus & blur event
+ if (this.trigger === 'focus') {
+ const $children = this.getInputChildren();
+ if ($children) {
+ $children.addEventListener('focus', this.handleFocus, false);
+ $children.addEventListener('blur', this.handleBlur, false);
+ this.isInput = true;
+ }
+ }
+ },
+ beforeDestroy () {
+ const $children = this.getInputChildren();
+ if ($children) {
+ $children.removeEventListener('focus', this.handleFocus, false);
+ $children.removeEventListener('blur', this.handleBlur, false);
+ }
}
};
</script>
diff --git a/test/routers/poptip.vue b/test/routers/poptip.vue
index d75277c..8cf282b 100644
--- a/test/routers/poptip.vue
+++ b/test/routers/poptip.vue
@@ -1,183 +1,22 @@
-<style>
- .tooltip_out{
- padding: 150px;
- }
- body{
- height: 1000px;
- padding: 10px;
- }
- .api table{
- font-family: Consolas,Menlo,Courier,monospace;
- font-size: 13px;
- border-collapse: collapse;
- border-spacing: 0;
- empty-cells: show;
- border: 1px solid #e9e9e9;
- width: 100%;
- margin-bottom: 24px;
- }
- .api table th{
- background: #f7f7f7;
- white-space: nowrap;
- color: #5c6b77;
- font-weight: 600;
- }
- .api table td, .api table th{
- border: 1px solid #e9e9e9;
- padding: 8px 16px;
- text-align: left;
- }
- .tip{
- width: 24px;
- position: fixed;
- top: 10px;
- right: 10px;
- }
- .tip-inner{
- width: 24px;
- height: 24px;
- line-height: 22px;
- text-align: center;
- background: #fff;
- border: 1px solid #3399ff;
- color: #3399ff;
- border-radius: 50%;
- cursor: pointer;
- }
- .tip-content{
- width: 200px;
- height: 100px;
- white-space: normal;
- }
-</style>
<template>
- <Tooltip content="这里是提示文字">
- 当鼠标经过这段文字时，会显示一个气泡框
- </Tooltip>
- <div class="tooltip_out">
- <!--<Tooltip placement="top" content="Tooltip 文字提示">-->
- <!--<strong>-->
- <!--<a>Link</a>-->
- <!--</strong>-->
- <!--</Tooltip>-->
- <!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
- <!--<i-button>hover 激活</i-button>-->
- <!--</Poptip>-->
- <!--<Poptip content="提示内容" title="tip">-->
- <!--<i-button>click 激活</i-button>-->
- <!--</Poptip>-->
- <!--<Poptip content="提示内容">-->
- <!--<div slot="title"><i>自定义标题</i></div>-->
- <!--<i-button>click 激活</i-button>-->
- <!--</Poptip>-->
- <!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
- <!--<div class="tip-inner">-->
- <!--<Icon type="information"></Icon>-->
- <!--</div>-->
- <!--<div class="tip-content" slot="content">-->
- <!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
- <!--</div>-->
- <!--</Tooltip>-->
- <!--<Poptip>-->
- <!--<a>click 激活</a>-->
- <!--<div slot="title"><i>自定义标题</i></div>-->
- <!--<div slot="content">-->
- <!--<a>关闭提示框</a>-->
- <!--</div>-->
- <!--</Poptip>-->
- <!--<Poptip placement="right" width="300">-->
- <!--<i-button type="ghost">click 激活</i-button>-->
- <!--<div class="api" slot="content">-->
- <!--<table>-->
- <!--<thead>-->
- <!--<tr>-->
- <!--<th>属性</th>-->
- <!--<th>说明</th>-->
- <!--<th>类型</th>-->
- <!--<th>默认值</th>-->
- <!--</tr>-->
- <!--</thead>-->
- <!--<tbody>-->
- <!--<tr>-->
- <!--<td>content</td>-->
- <!--<td>显示的内容</td>-->
- <!--<td>String | Number</td>-->
- <!--<td>空</td>-->
- <!--</tr>-->
- <!--<tr>-->
- <!--<td>placement</td>-->
- <!--<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>-->
- <!--<td>String</td>-->
- <!--<td>bottom</td>-->
- <!--</tr>-->
- <!--<tr>-->
- <!--<td>disabled</td>-->
- <!--<td>是否禁用提示框</td>-->
- <!--<td>Boolean</td>-->
- <!--<td>false</td>-->
- <!--</tr>-->
- <!--<tr>-->
- <!--<td>delay</td>-->
- <!--<td>延迟显示，单位毫秒</td>-->
- <!--<td>Number</td>-->
- <!--<td>0</td>-->
- <!--</tr>-->
- <!--</tbody>-->
- <!--</table>-->
- <!--</div>-->
- <!--</Poptip>-->
- <!--<Poptip title="标题" content="内容">-->
- <!--<Button>click 触发</Button>-->
- <!--</Poptip>-->
- <!--<Poptip title="标题" content="内容" trigger="hover">-->
- <!--<Button>hover 触发</Button>-->
- <!--</Poptip>-->
- <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel" @on-popper-hide="hide">
- <a><strong>Delete</strong></a>
+ <div style="margin: 100px">
+ <Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
+ <i-button>hover 激活</i-button>
+ </Poptip>
+ <Poptip title="提示标题" placement="bottom" content="提示内容">
+ <i-button>click 激活</i-button>
+ </Poptip>
+ <Poptip trigger="focus" title="提示标题" content="提示内容">
+ <i-input type="textarea"></i-input>
+ <!--<i-button>focus 激活</i-button>-->
+ </Poptip>
+ <Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
+ <i-input></i-input>
</Poptip>
- <!--<Poptip title="标题" content="内容" trigger="focus">-->
- <!--<input type="text">-->
- <!--</Poptip>-->
- <!--<Poptip title="标题" content="内容" trigger="focus">-->
- <!--<Button>focus 触发</Button>-->
- <!--</Poptip>-->
- <!--<Tooltip content="这里是提示文字">-->
- <!--当鼠标经过这段文字时，会显示一个气泡框-->
- <!--</Tooltip>-->
- <!--<Poptip>-->
- <!--<a>click 激活</a>-->
- <!--<div slot="content">-->
- <!--<a>关闭提示框</a>-->
- <!--</div>-->
- <!--</Poptip>-->
</div>
</template>
<script>
- import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
-
export default {
- components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
- props: {
-
- },
- data () {
- return {
-
- }
- },
- computed: {
- },
- methods: {
- ok () {
- Message.info('ok');
- },
- cancel () {
- Message.info('cancel');
- },
- hide () {
- Message.info('hide')
- }
- }
}
</script>
--
libgit2 0.21.4