drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed Tooltip placement bug

Browse source 
fixed Tooltip placement bug
This commit is contained in:
梁灏 2016-10-26 11:45:00 +08:00
parent dce3e7536d
commit 7570318ba0
9 changed files with 112 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/base/popper.js
View file

@ -1,8 +1,8 @@
/**
* https://github.com/freeze-component/vue-popper
* */
import Popper from 'popper.js';
/**
* https://github.com/freeze-component/vue-popper
* */
export default {
props: {
placement: {
@ -19,12 +19,13 @@ export default {
default: 0
},
value: Boolean,
visibleArrow: Boolean,
transition: String,
options: {
type: Object,
default () {
return {};
return {
gpuAcceleration: false
};
}
}
},
@ -57,9 +58,6 @@ export default {
const reference = this.reference || this.$els.reference;
if (!popper || !reference) return;
if (this.visibleArrow) {
this.appendArrow(popper);
}
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
this.popperJS.destroy();
@ -102,30 +100,6 @@ export default {
let placement = popper._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
},
appendArrow(element) {
let hash;
if (this.appended) {
return;
}
this.appended = true;
for (let item in element.attributes) {
if (/^_v-/.test(element.attributes[item].name)) {
hash = element.attributes[item].name;
break;
}
}
const arrow = document.createElement('div');
if (hash) {
arrow.setAttribute(hash, '');
}
arrow.setAttribute('x-arrow', '');
arrow.className = 'popper__arrow';
element.appendChild(arrow);
}
},
beforeDestroy() {

10
components/tooltip/tooltip.vue
View file

@ -3,7 +3,7 @@
<div :class="[`${prefixCls}-rel`]" v-el:reference>
<slot></slot>
</div>
<div :class="popperClasses" transition="fade" v-el:popper v-show="!disabled && showPopper">
<div :class="[`${prefixCls}-popper`]" transition="fade" v-el:popper v-show="!disabled && showPopper">
<div :class="[`${prefixCls}-content`]">
<div :class="[`${prefixCls}-arrow`]"></div>
<div :class="[`${prefixCls}-inner`]"><slot name="content">{{ content }}</slot></div>
@ -44,14 +44,6 @@
prefixCls: prefixCls
}
},
computed: {
popperClasses () {
return [
`${prefixCls}-popper`,
`${prefixCls}-placement-${this.placement}`
]
}
},
methods: {
handleShowPopper() {
this.timeout = setTimeout(() => {

2
dist/styles/iview.all.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

8
local/routers/more.vue
View file

@ -1,8 +1,8 @@
<style scoped>
body{
padding: 50px;
height: 2000px;
}
/*body{*/
/*padding: 50px;*/
/*height: 2000px;*/
/*}*/
.example-badge{
width: 42px;
height: 42px;

48
local/routers/notice.vue
View file

@ -1,44 +1,18 @@
<style>
.tooltip_out{
border: 1px solid #ccc;
padding: 20px;
}
body{
padding: 10px;
}
</style>
<template>
<Tooltip content="Top Left 提示文字" placement="top" disabled>
<Button>上面的左面</Button>
<div slot="content">
<p>附近的是否会可接受的</p>
<p>飞机史蒂夫</p>
</div>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="bottom">
仅仅是一段文字而已，this的回复看就是风刀霜剑
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="left" delay="1000">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="right">
<Button>上面的左面</Button>
</Tooltip>
<div class="tooltip_out">
<Tooltip content="Top Left 提示文字" placement="top-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="top-end">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="bottom-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="bottom-end">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="left-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="left-end">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="right-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="right-end">
<Button>上面的左面</Button>
</Tooltip>
</div>
</template>
<script>
import { Tooltip, Button } from 'iview';

4
local/routers/page.vue
View file

@ -1,7 +1,5 @@
<style>
body{
padding: 100px;
}
</style>
<template>
<Steps :current="1" size="small">

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.9.5-rc-1",
"version": "0.9.5-rc-2",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

188
styles/components/tooltip.less
View file

@ -1,4 +1,5 @@
@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
@tooltip-arrow: ~"@{tooltip-prefix-cls}-arrow";
@tooltip-max-width: 250px;
@tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
@ -6,6 +7,11 @@
.@{tooltip-prefix-cls} {
display: inline-block;
&-rel{
display: inline-block;
position: relative;
}
&-popper{
display: block;
visibility: visible;
@ -13,6 +19,83 @@
line-height: @line-height-base;
position: absolute;
z-index: @zindex-tooltip;
&[x-placement^="top"] {
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
}
&[x-placement^="right"] {
padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
}
&[x-placement^="bottom"] {
padding: @tooltip-distance 0 @tooltip-arrow-width 0;
}
&[x-placement^="left"] {
padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
}
&[x-placement^="top"] .@{tooltip-arrow} {
bottom: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-bg;
}
&[x-placement="top"] .@{tooltip-arrow} {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&[x-placement="top-start"] .@{tooltip-arrow} {
left: 16px;
}
&[x-placement="top-end"] .@{tooltip-arrow} {
right: 16px;
}
&[x-placement^="right"] .@{tooltip-arrow} {
left: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-bg;
}
&[x-placement="right"] .@{tooltip-arrow} {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&[x-placement="right-start"] .@{tooltip-arrow} {
top: 8px;
}
&[x-placement="right-end"] .@{tooltip-arrow} {
bottom: 8px;
}
&[x-placement^="left"] .@{tooltip-arrow} {
right: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-bg;
}
&[x-placement="left"] .@{tooltip-arrow} {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&[x-placement="left-start"] .@{tooltip-arrow} {
top: 8px;
}
&[x-placement="left-end"] .@{tooltip-arrow} {
bottom: 8px;
}
&[x-placement^="bottom"] .@{tooltip-arrow} {
top: @tooltip-distance - @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-bg;
}
&[x-placement="bottom"] .@{tooltip-arrow} {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&[x-placement="bottom-start"] .@{tooltip-arrow} {
left: 16px;
}
&[x-placement="bottom-end"] .@{tooltip-arrow} {
right: 16px;
}
}
&-inner{
@ -34,109 +117,4 @@
border-color: transparent;
border-style: solid;
}
&-placement-top,
&-placement-top-start,
&-placement-top-end {
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
}
&-placement-right,
&-placement-right-start,
&-placement-right-end {
padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
}
&-placement-bottom,
&-placement-bottom-start,
&-placement-bottom-end {
padding: @tooltip-distance 0 @tooltip-arrow-width 0;
}
&-placement-left,
&-placement-left-start,
&-placement-left-end {
padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
}
&-placement-top &-arrow,
&-placement-top-start &-arrow,
&-placement-top-end &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-bg;
}
&-placement-top &-arrow {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&-placement-top-start &-arrow {
left: 16px;
}
&-placement-top-end &-arrow {
right: 16px;
}
&-placement-right &-arrow,
&-placement-right-start &-arrow,
&-placement-right-end &-arrow {
left: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-bg;
}
&-placement-right &-arrow {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&-placement-right-start &-arrow {
top: 8px;
}
&-placement-right-end &-arrow {
bottom: 8px;
}
&-placement-left &-arrow,
&-placement-left-start &-arrow,
&-placement-left-end &-arrow {
right: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-bg;
}
&-placement-left &-arrow {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&-placement-left-start &-arrow {
top: 8px;
}
&-placement-left-end &-arrow {
bottom: 8px;
}
&-placement-bottom &-arrow,
&-placement-bottom-start &-arrow,
&-placement-bottom-end &-arrow {
top: @tooltip-distance - @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-bg;
}
&-placement-bottom &-arrow {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&-placement-bottom-start &-arrow {
left: 16px;
}
&-placement-bottom-end &-arrow {
right: 16px;
}
}