theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[临时修复]解决tooltip数据不更新的问题

Browse Source
This commit is contained in:
xumi 2021-12-13 22:53:13 +08:00
parent 5c11b731d5
commit 9d829729f4
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/module/popper/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition v-show="visible"> <transition v-if="visible">
<div :class="['layui-popper', {'layui-dark' : isDark}]" :style="style" :position="innnerPosition"> <div :class="['layui-popper', {'layui-dark' : isDark}]" :style="style" :position="innnerPosition">
<slot>{{content}}</slot> <slot>{{content}}</slot>
<div class="layui-popper-arrow"></div> <div class="layui-popper-arrow"></div>
@ -16,7 +16,7 @@
<script setup lang="ts"> <script setup lang="ts">
import "./index.less"; import "./index.less";
import postionFns from "./calcPosition"; import postionFns from "./calcPosition";
import { getCurrentInstance, CSSProperties, ref, watch, onUpdated, defineEmits, onMounted} from "vue"; import { getCurrentInstance, CSSProperties, ref, watch, onUpdated, defineEmits, onMounted, des} from "vue";
import {on} from "../../tools/domUtil"; import {on} from "../../tools/domUtil";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -65,12 +65,13 @@
const doHidden = function(e : MouseEvent){ const doHidden = function(e : MouseEvent){
if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target))) return; if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target))) return;
style.value = {top: (-window.innerHeight) + 'px',left:0}; style.value = {top: (-window.innerHeight) + 'px',left:0};
visible.value = false; popper.value.remove();
// visible.value = false;
innnerPosition.value = props.position; innnerPosition.value = props.position;
} }
// 事件绑定 // 事件绑定
on(props.el, triggerArr[0], doShow); // on(props.el, triggerArr[0], doShow);
on(triggerArr[1]??props.el, triggerArr[2], doHidden); on(triggerArr[1]??props.el, triggerArr[2], doHidden);
checkTarget.value = triggerArr[3]; checkTarget.value = triggerArr[3];

10
src/module/tooltip/index.vue
View File

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import usePopper from "../popper/usePopper"; import usePopper from "../popper/usePopper";
import { defineComponent} from "vue"; import { on } from "../../tools/domUtil";
import { defineComponent, h, render} from "vue";
import popper from "../popper/index.vue";
export default defineComponent({ export default defineComponent({
name: "LayTooltip", name: "LayTooltip",
props: { props: {
@ -23,7 +25,11 @@ export default defineComponent({
mounted() { mounted() {
const _this = this; const _this = this;
this.$nextTick(() => { this.$nextTick(() => {
usePopper.createPopper(_this.$el, _this.$props, "hover"); on(_this.$el, 'mouseenter', () => {
const container: HTMLDivElement = document.createElement("div");
render(h(popper, {...this.$props, el: this.$el}), container);
container.firstElementChild && document.body.appendChild(container.firstElementChild);
})
}); });
}, },
}); });