Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

example/docs/zh-CN/components/tooltip.md

@@ -124,7 +124,6 @@
 | position    | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
 | isDark      | 是否为黑色主题 | `true`(默认值)、`false`(浅色)   |
 | disabled    | 是否禁用 | `false`(默认值)、`true`(禁用)   ||
-| visible     | 控制是否显示 | `true`(默认值)、`false`   ||
 | isCanHide   | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false`   ||
 
 :::

src/component/popper/index.vue

@@ -34,7 +34,6 @@ export interface LayPopperProps {
     enterable?: boolean;
     isDark?: boolean;
     disabled?: boolean;
-    visible?: boolean;
     isCanHide?: boolean;
 }
 
@@ -44,13 +43,11 @@ const props = withDefaults(defineProps<LayPopperProps>(),
     isDark: true,
     disabled: false,
     enterable: true,
-    visible: true,
     isCanHide: true,
     trigger: "hover",
   }
 );
 
-const emit = defineEmits(["update:visible"]);
 
 const EVENT_MAP: any = {
   hover: ["mouseenter", null, "mouseleave", false],
@@ -66,19 +63,24 @@ const style = ref<CSSProperties>({ top: -window.innerHeight + "px", left: 0 });
 const checkTarget = ref(false);
 const popper = ref<HTMLDivElement>({} as HTMLDivElement);
 const innnerPosition = ref(props.position);
-const innerVisible = ref(props.visible ?? true);
+const innerVisible = ref(!props.isCanHide);
-const isExist = ref(false);
+const isExist = ref(!props.isCanHide);
+
+watch(() => props.isCanHide, (val) => {
+  innerVisible.value = !val;
+});
 
 watch(innerVisible, (val) => {
   invokeShowPosistion();
-  emit("update:visible", val);
 });
+
 watch(popper, (val) => {
   if (props.trigger === 'hover' && props.enterable) {
     on(popper.value, EVENT_MAP['hover'][0], doShow);
     on(popper.value, EVENT_MAP['hover'][2], doHidden);
   }
 });
+
 watch(
   () => props.content,
   (val) => {
@@ -88,23 +90,27 @@ watch(
 
 const doShow = function () {
   if (!props.disabled) {
-    innerVisible.value = true;
+    if (!isExist.value) {
-    isExist.value = true;
+        isExist.value = true;
+        setTimeout(()=>innerVisible.value = true, 0);
+    } else {
+        innerVisible.value = true;
+    }
   }
 };
 
 const doHidden = function (e: MouseEvent) {
-  // ||(props.enterable && popper.value.contains(e.target as Node))
+  if (checkTarget.value && props.el.contains(e.target)) {
-  if (
-    (checkTarget.value && props.el.contains(e.target)) 
-  )
     return;
-  // style.value = {top: (-window.innerHeight) + 'px',left:0};
-  // popper.value.remove();
-  if (props.isCanHide !== false) {
-    innerVisible.value = false;
   }
+  
+  // isCanHide参数由外控制
+  if (props.isCanHide === false) {
+    return;
+  }
+  innerVisible.value = false;
   innnerPosition.value = props.position;
+  style.value = { top: -window.innerHeight + "px", left: 0 }
 };
 
 // 计算位置显示

src/component/slider/index.vue

@@ -6,14 +6,19 @@
       class="layui-slider-vrange"
       v-if="range"
     >
-      <div
+        <lay-tooltip :content="'' + verticalRangeValue[1]" :is-can-hide="tooptipHide">
-        :style="{ bottom: verticalRangeValue[1] + '%' }"
+            <div
-        class="layui-slider-vertical-btn"
+                :style="{ bottom: verticalRangeValue[1] + '%' }"
-      ></div>
+                class="layui-slider-vertical-btn"
-      <div
+            ></div>
-        :style="{ bottom: verticalRangeValue[0] + '%' }"
+        </lay-tooltip>
-        class="layui-slider-vertical-btn"
+        <lay-tooltip :content="'' + verticalRangeValue[0]" :is-can-hide="tooptipHide">
-      ></div>
+            <div
+                :style="{ bottom: verticalRangeValue[0] + '%' }"
+                class="layui-slider-vertical-btn"
+            ></div>
+        </lay-tooltip>
+        
       <div class="layui-slider-vertical-line"></div>
       <div
         :style="{
@@ -31,7 +36,7 @@
       :class="[props.disabled ? 'layui-slider-disabled' : '']"
       v-else
     >
-      <lay-tooltip :content="modelValue + ''">
+      <lay-tooltip :content="modelValue + ''"  :is-can-hide="tooptipHide">
         <div
           :style="{ bottom: modelValue + '%' }"
           class="layui-slider-vertical-btn"
@@ -54,13 +59,13 @@
       class="layui-slider-srange"
       v-if="range"
     >
-      <lay-tooltip :content="rangeValue[0] + ''">
+      <lay-tooltip :content="rangeValue[0] + ''"  :is-can-hide="tooptipHide">
         <div
           :style="{ left: rangeValue[0] + '%' }"
           class="layui-slider-btn-v"
         ></div>
       </lay-tooltip>
-      <lay-tooltip :content="rangeValue[1] + ''">
+      <lay-tooltip :content="rangeValue[1] + ''"  :is-can-hide="tooptipHide">
         <div
           :style="{ left: rangeValue[1] + '%' }"
           class="layui-slider-btn-v"
@@ -84,7 +89,7 @@
       :class="[props.disabled ? 'layui-slider-disabled' : '']"
       v-else
     >
-      <lay-tooltip :visible="true" :content="'' + modelValue">
+      <lay-tooltip :content="'' + modelValue" :is-can-hide="tooptipHide">
         <div
           :style="{ left: modelValue + '%' }"
           class="layui-slider-btn-v"
@@ -147,6 +152,7 @@ function throttle(func: Function) {
 }
 const moveAction = throttle(handle_mousemove);
 
+const tooptipHide = ref<Boolean>(true);
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function handle_mousedown() {
   on("selectstart", window, handle_select, { once: true });
@@ -155,6 +161,7 @@ function handle_mousedown() {
 }
 
 function handle_mousemove(e: MouseEvent) {
+  tooptipHide.value = false;
   if (props.disabled === true) {
     return false;
   }
@@ -181,6 +188,7 @@ function handle_mouseup() {
   // off('selectstart', document, handle_select)
   off("mouseup", window, handle_mouseup);
   off("mousemove", window, moveAction);
+  tooptipHide.value = true;
   currbtn = -1;
 }
 

src/component/tooltip/index.vue

@@ -28,10 +28,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
     isCanHide: {
       type: Boolean,
       default: true,