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

add Tooltip component

Browse source 
add Tooltip component
This commit is contained in:
梁灏 2016-10-26 10:03:16 +08:00
parent 20559d34be
commit dce3e7536d
11 changed files with 403 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
components/base/popper.js Normal file
View file

@ -0,0 +1,136 @@
import Popper from 'popper.js';
/**
* https://github.com/freeze-component/vue-popper
* */
export default {
props: {
placement: {
type: String,
default: 'bottom'
},
boundariesPadding: {
type: Number,
default: 5
},
reference: Object,
popper: Object,
offset: {
default: 0
},
value: Boolean,
visibleArrow: Boolean,
transition: String,
options: {
type: Object,
default () {
return {};
}
}
},
data() {
return {
showPopper: false
};
},
watch: {
value: {
immediate: true,
handler(val) {
this.showPopper = val;
this.$emit('input', val);
}
},
showPopper(val) {
val ? this.updatePopper() : this.destroyPopper();
this.$emit('input', val);
}
},
methods: {
createPopper() {
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
return;
}
const options = this.options;
const popper = this.popper || this.$els.popper;
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();
}
options.placement = this.placement;
options.offset = this.offset;
this.$nextTick(() => {
this.popperJS = new Popper(
reference,
popper,
options
);
this.popperJS.onCreate(popper => {
this.resetTransformOrigin(popper);
this.$emit('created', this);
});
});
},
updatePopper() {
if (this.popperJS) {
this.popperJS.update();
} else {
this.createPopper();
}
},
doDestroy() {
if (this.showPopper) return;
this.popperJS.destroy();
this.popperJS = null;
},
destroyPopper() {
if (this.popperJS) {
this.resetTransformOrigin(this.popperJS);
}
},
resetTransformOrigin(popper) {
let placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};
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() {
if (this.popperJS) {
this.popperJS.destroy();
}
}
};

3
components/tooltip/index.js Normal file
View file

@ -0,0 +1,3 @@
import Tooltip from './tooltip.vue';
export default Tooltip;

67
components/tooltip/tooltip.vue Normal file
View file

@ -0,0 +1,67 @@
<template>
<div :class="[`${prefixCls}`]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
<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}-content`]">
<div :class="[`${prefixCls}-arrow`]"></div>
<div :class="[`${prefixCls}-inner`]"><slot name="content">{{ content }}</slot></div>
</div>
</div>
</div>
</template>
<script>
import Popper from '../base/popper';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-tooltip';
export default {
mixins: [Popper],
props: {
placement: {
validator (value) {
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
},
default: 'bottom'
},
content: {
type: [String, Number],
default: ''
},
delay: {
type: Number,
default: 0
},
disabled: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls
}
},
computed: {
popperClasses () {
return [
`${prefixCls}-popper`,
`${prefixCls}-placement-${this.placement}`
]
}
},
methods: {
handleShowPopper() {
this.timeout = setTimeout(() => {
this.showPopper = true;
}, this.delay);
},
handleClosePopper() {
clearTimeout(this.timeout);
this.showPopper = false;
}
}
}
</script>

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

4
index.js
View file

@ -25,6 +25,7 @@ import Notice from './components/notice';
import LoadingBar from './components/loading-bar';
import Modal from './components/modal';
import { Select, Option, OptionGroup } from './components/select';
import Tooltip from './components/tooltip';
const iview = {
Button,
@ -63,7 +64,8 @@ const iview = {
Modal,
iSelect: Select,
iOption: Option,
iOptionGroup: OptionGroup
iOptionGroup: OptionGroup,
Tooltip
};
module.exports = iview;

92
local/routers/notice.vue
View file

@ -1,69 +1,63 @@
<template>
<Alert type="success" show-icon closable>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Button @click="open">open</Button>
<Button @click="close">close key = key111</Button>
<Button @click="destroy">destroy</Button>
<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>
<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>
</template>
<script>
import { Notice, Button, Message, Alert } from 'iview';
import { Tooltip, Button } from 'iview';
export default {
components: { Notice, Button, Alert },
components: { Tooltip, Button },
props: {
},
data () {
return {
key: 'key111'
}
},
computed: {
},
methods: {
open () {
const title = '这是通知的标题';
const desc = '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述';
Notice.open({
title: title,
desc: desc,
});
Notice.info({
title: title,
desc: desc,
});
Notice.success({
title: title,
desc: desc,
key: this.key
});
Notice.warning({
title: title,
desc: desc,
});
Notice.error({
title: title,
desc: desc,
});
Message.info('放假海口市', 0);
},
close () {
Notice.close(this.key);
},
destroy () {
Notice.destroy();
}
},
ready () {
// this.open();
Notice.config({
top: 1,
duration: 0
})
}
}
</script>

2
package.json
View file

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

3
styles/components/index.less
View file

@ -21,4 +21,5 @@
@import "steps";
@import "modal";
@import "select";
@import "select-dropdown";
@import "select-dropdown";
@import "tooltip";

142
styles/components/tooltip.less Normal file
View file

@ -0,0 +1,142 @@
@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
@tooltip-max-width: 250px;
@tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
.@{tooltip-prefix-cls} {
display: inline-block;
&-popper{
display: block;
visibility: visible;
font-size: @font-size-small;
line-height: @line-height-base;
position: absolute;
z-index: @zindex-tooltip;
}
&-inner{
max-width: @tooltip-max-width;
min-height: 34px;
padding: 8px 10px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
}
&-arrow{
position: absolute;
width: 0;
height: 0;
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;
}
}

4
styles/themes/default/custom.less
View file

@ -11,6 +11,7 @@
@link-hover-color : tint(@link-color, 20%);
@link-active-color : shade(@link-color, 5%);
@selected-color : fade(@primary-color, 90%);
@tooltip-color : #fff;
// Base
@body-background : #fff;
@ -18,6 +19,7 @@
@code-family : Consolas,Menlo,Courier,monospace;
@text-color : #525558;
@font-size-base : 14px;
@font-size-small : 12px;
@line-height-base : 1.5;
@line-height-computed : floor((@font-size-base * @line-height-base));
@border-radius-base : 6px;
@ -31,6 +33,7 @@
// Background color
@background-color-base : #f7f7f7; // base
@background-color-select-hover: @input-disabled-bg;
@tooltip-bg : #373737;
// Shadow
@shadow-color : rgba(100, 100, 100, .2);
@ -108,6 +111,7 @@
@zindex-modal : 1000;
@zindex-message : 1010;
@zindex-notification : 1010;
@zindex-tooltip : 1060;
@zindex-loading-bar : 2000;
// Animation