optimize Poptip focus trigger when using input
optimize Poptip focus trigger when using input
This commit is contained in:
梁灏
parent
75e5c6a51e
commit
071506fc66
2 changed files with 51 additions and 182 deletions
|
|
@ -8,8 +8,8 @@
|
||||||
:class="[prefixCls + '-rel']"
|
:class="[prefixCls + '-rel']"
|
||||||
v-el:reference
|
v-el:reference
|
||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
@mousedown="handleFocus"
|
@mousedown="handleFocus(false)"
|
||||||
@mouseup="handleBlur">
|
@mouseup="handleBlur(false)">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
|
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
|
||||||
|
|
@ -91,7 +91,8 @@
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
prefixCls: prefixCls,
|
prefixCls: prefixCls,
|
||||||
showTitle: true
|
showTitle: true,
|
||||||
|
isInput: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -133,14 +134,14 @@
|
||||||
}
|
}
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
},
|
},
|
||||||
handleFocus () {
|
handleFocus (fromInput = true) {
|
||||||
if (this.trigger !== 'focus' || this.confirm) {
|
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
},
|
},
|
||||||
handleBlur () {
|
handleBlur (fromInput = true) {
|
||||||
if (this.trigger !== 'focus' || this.confirm) {
|
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
|
|
@ -164,12 +165,41 @@
|
||||||
ok () {
|
ok () {
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
this.$emit('on-ok');
|
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) {
|
if (!this.confirm) {
|
||||||
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
|
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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<template>
|
||||||
<Tooltip content="这里是提示文字">
|
<div style="margin: 100px">
|
||||||
当鼠标经过这段文字时，会显示一个气泡框
|
<Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
|
||||||
</Tooltip>
|
<i-button>hover 激活</i-button>
|
||||||
<div class="tooltip_out">
|
</Poptip>
|
||||||
<!--<Tooltip placement="top" content="Tooltip 文字提示">-->
|
<Poptip title="提示标题" placement="bottom" content="提示内容">
|
||||||
<!--<strong>-->
|
<i-button>click 激活</i-button>
|
||||||
<!--<a>Link</a>-->
|
</Poptip>
|
||||||
<!--</strong>-->
|
<Poptip trigger="focus" title="提示标题" content="提示内容">
|
||||||
<!--</Tooltip>-->
|
<i-input type="textarea"></i-input>
|
||||||
<!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
|
<!--<i-button>focus 激活</i-button>-->
|
||||||
<!--<i-button>hover 激活</i-button>-->
|
</Poptip>
|
||||||
<!--</Poptip>-->
|
<Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
|
||||||
<!--<Poptip content="提示内容" title="tip">-->
|
<i-input></i-input>
|
||||||
<!--<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>
|
|
||||||
</Poptip>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
|
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue