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

add Poptip component

Browse source 
add Poptip component
This commit is contained in:
梁灏 2016-10-27 10:30:32 +08:00
parent 4dfacfca66
commit 9699c270dc
14 changed files with 420 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/base/popper.js
View file

@ -28,22 +28,21 @@ export default {
boundariesElement: 'body'
}
}
},
visible: {
type: Boolean,
default: false
}
},
data() {
return {
showPopper: false
};
},
watch: {
value: {
immediate: true,
handler(val) {
this.showPopper = val;
this.visible = val;
this.$emit('input', val);
}
},
showPopper(val) {
visible(val) {
val ? this.updatePopper() : this.destroyPopper();
this.$emit('input', val);
}
@ -78,7 +77,7 @@ export default {
this.popperJS ? this.popperJS.update() : this.createPopper();
},
doDestroy() {
if (this.showPopper) return;
if (this.visible) return;
this.popperJS.destroy();
this.popperJS = null;
},

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

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

162
components/poptip/poptip.vue Normal file
View file

@ -0,0 +1,162 @@
<template>
<div
:class="classes"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
v-clickoutside="handleClose">
<div
:class="[`${prefixCls}-rel`]"
v-el:reference
@click="handleClick"
@mousedown="handleFocus"
@mouseup="handleBlur">
<slot></slot>
</div>
<div :class="[`${prefixCls}-popper`]" :style="styles" transition="fade" v-el:popper v-show="visible">
<div :class="[`${prefixCls}-content`]">
<div :class="[`${prefixCls}-arrow`]"></div>
<div :class="[`${prefixCls}-inner`]" v-if="confirm">
<div :class="[`${prefixCls}-body`]">
<i class="ivu-icon ivu-icon-help-circled"></i>
<div :class="[`${prefixCls}-body-message`]"><slot name="title">{{ title }}</slot></div>
</div>
<div :class="[`${prefixCls}-footer`]">
<Button type="ghost" size="small" @click="cancel">{{ cancelText }}</Button>
<Button type="primary" size="small" @click="ok">{{ okText }}</Button>
</div>
</div>
<div :class="[`${prefixCls}-inner`]" v-if="!confirm">
<div :class="[`${prefixCls}-title`]" v-if="!!title"><slot name="title">{{ title }}</slot></div>
<div :class="[`${prefixCls}-body`]"><slot name="content">{{ content }}</slot></div>
</div>
</div>
</div>
</div>
</template>
<script>
import Popper from '../base/popper';
import Button from '../button/button.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-poptip';
export default {
mixins: [Popper],
directives: { clickoutside },
components: { Button },
props: {
trigger: {
validator (value) {
return oneOf(value, ['click', 'focus', 'hover']);
},
default: 'click'
},
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: 'top'
},
title: {
type: [String, Number]
},
content: {
type: [String, Number],
default: ''
},
width: {
type: [String, Number]
},
confirm: {
type: Boolean,
default: false
},
okText: {
type: String,
default: '确定'
},
cancelText: {
type: String,
default: '取消'
}
},
data () {
return {
prefixCls: prefixCls
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-confirm`]: this.confirm
}
]
},
styles () {
let style = {};
if (!!this.width) {
style.width = `${this.width}px`;
}
return style;
}
},
methods: {
handleClick () {
if (this.confirm) {
this.visible = !this.visible;
return true;
}
if (this.trigger !== 'click') {
return false;
}
this.visible = !this.visible;
},
handleClose () {
if (this.confirm) {
this.visible = false;
return true;
}
if (this.trigger !== 'click') {
return false;
}
this.visible = false;
},
handleFocus () {
if (this.trigger !== 'focus' || this.confirm) {
return false;
}
this.visible = true;
},
handleBlur () {
if (this.trigger !== 'focus' || this.confirm) {
return false;
}
this.visible = false;
},
handleMouseenter () {
if (this.trigger !== 'hover' || this.confirm) {
return false;
}
this.visible = true;
},
handleMouseleave () {
if (this.trigger !== 'hover' || this.confirm) {
return false;
}
this.visible = false;
},
cancel () {
this.visible = false;
this.$emit('on-cancel');
},
ok () {
this.visible = false;
this.$emit('on-ok');
}
}
}
</script>

6
components/tooltip/tooltip.vue
View file

@ -3,7 +3,7 @@
<div :class="[`${prefixCls}-rel`]" v-el:reference>
<slot></slot>
</div>
<div :class="[`${prefixCls}-popper`]" transition="fade" v-el:popper v-show="!disabled && showPopper">
<div :class="[`${prefixCls}-popper`]" transition="fade" v-el:popper v-show="!disabled && visible">
<div :class="[`${prefixCls}-content`]">
<div :class="[`${prefixCls}-arrow`]"></div>
<div :class="[`${prefixCls}-inner`]"><slot name="content">{{ content }}</slot></div>
@ -47,12 +47,12 @@
methods: {
handleShowPopper() {
this.timeout = setTimeout(() => {
this.showPopper = true;
this.visible = true;
}, this.delay);
},
handleClosePopper() {
clearTimeout(this.timeout);
this.showPopper = false;
this.visible = false;
}
}
}