Skip to content

E
Element
Commit 1c1417f5 authored by qingwei.li's avatar qingwei.li
Browse files
Options

update popover and tooltip

parent 82b4582c
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 122 deletions
examples/docs/popover.md
View file @ 1c1417f5
......@@ -117,7 +117,7 @@
<div class="demo-box demo-popover">
<el-popover
v-ref:popover1
ref="popover1"
placement="top-start"
title="标题"
width="200"
......@@ -126,7 +126,7 @@
</el-popover>
<el-popover
v-ref:popover2
ref="popover2"
placement="bottom"
title="标题"
width="200"
......@@ -135,7 +135,7 @@
</el-popover>
<el-popover
v-ref:popover3
ref="popover3"
placement="right"
title="标题"
width="200"
......@@ -146,13 +146,13 @@
<el-button v-popover:popover1>hover 激活</el-button>
<el-button v-popover:popover2>click 激活</el-button>
<el-input :value="model" v-popover:popover3 placeholder="focus 激活"></el-input>
<el-input v-model="model" v-popover:popover3 placeholder="focus 激活"></el-input>
</div>
```html
<el-popover
v-ref:popover1
ref="popover1"
placement="top-start"
title="标题"
width="200"
......@@ -161,7 +161,7 @@
</el-popover>
<el-popover
v-ref:popover2
ref="popover2"
placement="bottom"
title="标题"
width="200"
......@@ -170,7 +170,7 @@
</el-popover>
<el-popover
v-ref:popover3
ref="popover3"
placement="right"
title="标题"
width="200"
......@@ -188,7 +188,7 @@
<div class="demo-box demo-popover">
<el-popover
v-ref:popover4
ref="popover4"
placement="right"
width="400"
trigger="click">
......@@ -204,7 +204,7 @@
```html
<el-popover
v-ref:popover4
ref="popover4"
placement="right"
width="400"
trigger="click">
......@@ -224,7 +224,7 @@
<div class="demo-box demo-popover">
<el-popover
v-ref:popover5
ref="popover5"
placement="top"
width="160"
:visible.sync="visible2">
......@@ -240,7 +240,7 @@
```html
<el-popover
v-ref:popover5
ref="popover5"
placement="top"
width="160"
:visible.sync="visible2">
......
examples/docs/tooltip.md
View file @ 1c1417f5
......@@ -30,73 +30,49 @@
}
</style>
<script>
module.exports = {
data() {
return {
value: true
}
},
computed: {
effect() {
return this.value ? 'dark' : 'light';
}
}
}
</script>
<el-switch
v-model="value"
on-text="黑色"
off-text="白色"
on-color="#1f2d3d"
off-color="#ccc">
</el-switch>
<div class="box">
<div class="top">
<el-tooltip class="item" :effect="effect" content="Top Left 提示文字" placement="top-start">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Top Center 提示文字" placement="top">
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Top Right 提示文字" placement="top-end">
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
<el-button>上右</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip class="item" :effect="effect" content="Left Top 提示文字" placement="left-start">
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-button>左上</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Left Center 提示文字" placement="left">
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
<el-button>左边</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Left Bottom 提示文字" placement="left-end">
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
<el-button>左下</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start">
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-button>右上</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right">
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<el-button>右边</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end">
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
<el-button>右下</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start">
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-button>下左</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom">
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
<el-button>下边</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end">
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
<el-button>下右</el-button>
</el-tooltip>
</div>
......
package.json
View file @ 1c1417f5
......@@ -9,7 +9,7 @@
],
"scripts": {
"dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
"dist": "rm -rf lib && cooking build -p && cooking build -c scripts/cooking.component.js -p",
"dist": "rm -rf lib && cooking build -c scripts/cooking.conf.js -p && cooking build -c scripts/cooking.component.js -p",
"deploy": "cooking build -c scripts/cooking.demo.js -p",
"gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
"prepublish": "make dist"
......
packages/popover/src/main.vue
View file @ 1c1417f5
<template>
<div
class="el-popover"
v-el:popper
v-show="visible"
:transition="transition"
:style="{ width: width + 'px' }">
<div class="el-popover__title" v-if="title" v-text="title"></div>
<slot>{{ content }}</slot>
</div>
<transition :name="transition">
<div
class="el-popover"
ref="popper"
v-show="showPopper"
:style="{ width: width + 'px' }">
<div class="el-popover__title" v-if="title" v-text="title"></div>
<slot>{{ content }}</slot>
</div>
</transition>
</template>
<script>
......@@ -16,10 +17,8 @@ import Vue from 'vue';
import { on, off } from 'wind-dom/src/event';
Vue.directive('popover', {
update() {
this.vm.$nextTick(() => {
this.vm.$refs[this.arg].reference = this.el;
});
bind(el, binding, vnode) {
vnode.context.$refs[binding.arg].$refs.reference = el;
}
});
......@@ -36,9 +35,7 @@ export default {
},
title: String,
content: String,
reference: {
default: 'body'
},
reference: {},
width: {},
visibleArrow: {
default: true
......@@ -56,61 +53,64 @@ export default {
}
},
ready() {
mounted() {
let _timer;
const reference = this.reference || this.$refs.reference;
this.$nextTick(() => {
if (this.trigger === 'click') {
on(this.reference, 'click', () => { this.visible = !this.visible; });
on(reference, 'click', () => { this.showPopper = !this.showPopper; });
on(document, 'click', (e) => {
if (!this.$el ||
!this.reference ||
!reference ||
this.$el.contains(e.target) ||
this.reference.contains(e.target)) return;
this.visible = false;
reference.contains(e.target)) return;
this.showPopper = false;
});
} else if (this.trigger === 'hover') {
on(this.reference, 'mouseenter', () => {
this.visible = true;
on(reference, 'mouseenter', () => {
this.showPopper = true;
clearTimeout(_timer);
});
on(this.reference, 'mouseleave', () => {
on(reference, 'mouseleave', () => {
_timer = setTimeout(() => {
this.visible = false;
this.showPopper = false;
}, 200);
});
} else {
if (this.reference.hasChildNodes()) {
const children = this.reference.childNodes;
if (reference.hasChildNodes()) {
const children = reference.childNodes;
for (let i = 0; i < children.length; i++) {
if (children[i].nodeName === 'INPUT') {
on(children[i], 'focus', () => { this.visible = true; });
on(children[i], 'blur', () => { this.visible = false; });
on(children[i], 'focus', () => { this.showPopper = true; });
on(children[i], 'blur', () => { this.showPopper = false; });
break;
}
}
} else if (
this.reference.nodeName === 'INPUT' ||
this.reference.nodeName === 'TEXTAREA'
reference.nodeName === 'INPUT' ||
reference.nodeName === 'TEXTAREA'
) {
on(this.reference, 'focus', () => { this.visible = true; });
on(this.reference, 'blur', () => { this.visible = false; });
on(reference, 'focus', () => { this.showPopper = true; });
on(reference, 'blur', () => { this.showPopper = false; });
} else {
on(this.reference, 'mousedown', () => { this.visible = true; });
on(this.reference, 'mouseup', () => { this.visible = false; });
on(reference, 'mousedown', () => { this.showPopper = true; });
on(reference, 'mouseup', () => { this.showPopper = false; });
}
}
});
},
destroyed() {
off(this.reference, 'mouseup');
off(this.reference, 'mousedown');
off(this.reference, 'focus');
off(this.reference, 'blur');
off(this.reference, 'mouseleave');
off(this.reference, 'mouseenter');
const reference = this.reference || this.$refs.reference;
off(reference, 'mouseup');
off(reference, 'mousedown');
off(reference, 'focus');
off(reference, 'blur');
off(reference, 'mouseleave');
off(reference, 'mouseenter');
}
};
</script>
packages/theme-default/src/common/transition.css
View file @ 1c1417f5
......@@ -6,11 +6,16 @@
transition: var(--fade-transition);
}
.fade-in-linear-transition {
.fade-in-linear-enter-active {
opacity: 1;
transition: var(--fade-linear-transition);
}
.fade-in-linear-leave-active {
opacity: 0;
transition: var(--fade-linear-transition);
}
.fade-in-enter,
.fade-in-leave,
.fade-in-linear-enter,
......
packages/tooltip/src/main.vue
View file @ 1c1417f5
<template>
<div
class="el-tooltip"
@mouseenter="visible = true"
@mouseleave="visible = false">
<div class="el-tooltip__rel" v-el:reference>
@mouseenter="showPopper = true"
@mouseleave="showPopper = false">
<div class="el-tooltip__rel" ref="reference">
<slot></slot>
</div>
<div
class="el-tooltip__popper"
:class="['is-' + effect]"
v-el:popper
v-show="!disabled && visible"
:transition="transition">
<slot name="content"><div v-text="content"></div></slot>
</div>
<transition :name="transition">
<div
class="el-tooltip__popper"
:class="['is-' + effect]"
ref="popper"
v-show="!disabled && showPopper">
<slot name="content"><div v-text="content"></div></slot>
</div>
</transition>
</div>
</template>
......
src/utils/vue-popper.js
View file @ 1c1417f5
......@@ -34,9 +34,21 @@ export default {
}
},
data() {
return {
showPopper: false
};
},
watch: {
'visible'(val) {
if (this.popperDestroying) return;
visible: {
immediate: true,
handler(val) {
this.showPopper = val;
}
},
showPopper(val) {
val ? this.updatePopper() : this.destroyPopper();
}
},
......@@ -47,32 +59,32 @@ export default {
return;
}
this.popper = this.popper || this.$refs.popper;
this.reference = this.reference || this.$refs.reference;
if (!this.popper || !this.reference) {
return;
}
const options = this.options;
const popper = this.popper || this.$refs.popper;
const reference = this.reference || this.$refs.reference;
if (!popper || !reference) return;
if (this.visibleArrow) {
this.appendArrow(this.popper);
this.appendArrow(popper);
}
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
this.popperJS.destroy();
}
this.$set('options.placement', this.placement);
this.$set('options.offset', this.offset);
this.popperJS = new PopperJS(
this.reference,
this.popper,
this.options
);
this.popperJS.onCreate(popper => {
this.resetTransformOrigin(popper);
this.$emit('created', this);
options.placement = this.placement;
options.offset = this.offset;
this.$nextTick(() => {
this.popperJS = new PopperJS(
reference,
popper,
options
);
this.popperJS.onCreate(popper => {
this.resetTransformOrigin(popper);
this.$emit('created', this);
});
});
},
......@@ -85,7 +97,7 @@ export default {
},
doDestroy() {
if (this.visible) return;
if (this.showPopper) return;
this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
this.popperJS.destroy();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment