🐛(tooltip / select): 优化 select 自定义选项与 tooltip 边缘三角方向问题

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.7.6",
+  "version": "1.7.7-alpha.1",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/component/src/component/popper/calcPosition.ts

@@ -14,6 +14,8 @@ const postionFns: any = {
     ) {
       innnerPosition.value = "bottom";
       top = bottom;
+    } else {
+      innnerPosition.value = "top";
     }
     return {
       top: `${top}px`,
@@ -30,6 +32,8 @@ const postionFns: any = {
     if (window.innerHeight - bottom < popper.offsetHeight + 6) {
       innnerPosition.value = "top";
       bottom = top - popper.offsetHeight - 6;
+    } else {
+      innnerPosition.value = "bottom";
     }
     return {
       top: `${bottom}px`,
@@ -47,6 +51,8 @@ const postionFns: any = {
     if (left < 0) {
       innnerPosition.value = "right";
       left = right;
+    } else {
+      innnerPosition.value = "left";
     }
     return {
       top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
@@ -63,6 +69,8 @@ const postionFns: any = {
     if (window.innerWidth < right + popper.offsetWidth + 6) {
       innnerPosition.value = "left";
       right = left - popper.offsetWidth - 6;
+    } else {
+      innnerPosition.value = "right";
     }
     return {
       top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,

package/component/src/component/popper/index.vue

@@ -9,7 +9,7 @@
         @mouseenter="handlerPopperMouseEnter"
         @mouseleave="handlerPopperMouseLeave"
       >
-        <slot>{{ content }}</slot>
+        <slot> {{ content }}</slot>
         <div class="layui-popper-arrow"></div>
       </div>
     </transition>
@@ -110,6 +110,7 @@ const doHidden = function (e?: MouseEvent) {
 };
 
 const calcPosistion = function () {
+
   postionFns[props.position] &&
     (style.value = postionFns[props.position](
       triggerRefEl.value,
@@ -120,9 +121,7 @@ const calcPosistion = function () {
 
 const updatePosistion = function () {
   if (innerVisible.value) {
-    popperRefEl.value.offsetWidth === 0
+    popperRefEl.value.offsetWidth === 0 ? nextTick(() => calcPosistion()) : calcPosistion();
-      ? nextTick(() => calcPosistion())
-      : calcPosistion();
     nextTick(() => {
       calcPosistion();
     });

package/component/src/component/select/index.vue

@@ -79,7 +79,12 @@ const getOption = (nodes: VNode[], newOptions: any[]) => {
       if (component.name == LaySelectOption.name) {
         if (item.children) {
           // @ts-ignore
-          item.props.label = item.children.default()[0].children;
+          const label = item.children.default()[0].children;
+
+          if(typeof label == "string") {
+            // @ts-ignore
+            item.props.label = label;
+          }
         }
         newOptions.push(item.props);
       }

package/component/src/component/upload/index.vue

@@ -68,6 +68,8 @@ export interface UploadProps {
   disabledPreview?: boolean;
   cut?: boolean;
   cutOptions?: CutOptions;
+  text?: string;
+  dragText?: string;
 }
 
 const getCutDownResult = () => {
@@ -103,8 +105,8 @@ const clearAllCutEffect = () => {
 };
 
 const { t } = useI18n();
-const text = computed(() => t("upload.text"));
+const text = computed(() =>{ return props.text ? props.text : t("upload.text")});
-const dragText = computed(() => t("upload.dragText"));
+const dragText = computed(() => { return props.dragText ? props.dragText : t("upload.dragText")});
 const defaultErrorMsg = computed(() => t("upload.defaultErrorMsg"));
 const urlErrorMsg = computed(() => t("upload.urlErrorMsg"));
 const numberErrorMsg = computed(() => t("upload.numberErrorMsg"));

package/document-component/src/document/zh-CN/components/select.md

@@ -16,7 +16,7 @@
   <lay-select v-model="value">
     <lay-select-option :value="1" label="学习"></lay-select-option>
     <lay-select-option :value="2" label="编码"></lay-select-option>
-    <lay-select-option :value="3" v-if="true">运动</lay-select-option>
+    <lay-select-option :value="3" label="运动"></lay-select-option>
   </lay-select>
 </template>
 
@@ -47,7 +47,7 @@ export default {
       <lay-select-option :value="2" label="编码"></lay-select-option>
       <lay-select-option :value="3" label="运动"></lay-select-option>
     </lay-select>
-    <lay-button @click="change2"> change ：{{value2}}</lay-button>
+    <lay-button @click="change2"> change ：{{value2}} </lay-button>
   </lay-space>
 </template>
 
@@ -117,15 +117,15 @@ export default {
 
 <template>
   <lay-space>
-    <lay-select v-model="value3" :show-search="true" @search="search">
+    <lay-select v-model="value3" :show-search="true">
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" :label="null"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
   </lay-select>
-    <lay-select v-model="value4" :show-search="true" :multiple="true" @search="search">
+    <lay-select v-model="value4" :show-search="true" :multiple="true">
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" :label="null"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
   </lay-select>
   </lay-space>
 </template>
@@ -290,6 +290,35 @@ export default {
 </script>
 :::
 
+::: title 定制选项
+:::
+
+::: demo 使用 `lay-select` 标签, 创建下拉选择框
+
+<template>
+  <lay-select v-model="value">
+    <lay-select-option :value="1" label="学习"></lay-select-option>
+    <lay-select-option :value="2" label="编码"></lay-select-option>
+    <lay-select-option :value="3" label="运动">运动</lay-select-option>
+  </lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const value = ref(null);
+    return {
+      value
+    }
+  }
+}
+</script>
+
+:::
+
+
 ::: title Select 属性
 :::
 

package/document-component/src/document/zh-CN/components/tooltip.md

@@ -84,21 +84,21 @@ export default {
 <template>
   <div style="padding: 100px;max-width:400px;">
     <div style="text-align: center;">
-      <lay-tooltip content="假装这里有文字提示">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示">
         <lay-button>上边</lay-button>
       </lay-tooltip>
     </div>
     <div>
-      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
         <lay-button style="float:left;">左边</lay-button>
       </lay-tooltip>
-      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
         <lay-button style="float:right;">右边</lay-button>
       </lay-tooltip>
       <div style="clear: both;"></div>
     </div>
     <div style="text-align: center;">
-      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
+      <lay-tooltip  trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
         <lay-button>下边</lay-button>
       </lay-tooltip>
     </div>

package/document-component/src/document/zh-CN/components/upload.md

@@ -260,6 +260,8 @@ export default {
 | disabledPreview | 设置文件预览插槽区域为禁用状态 | boolean  | false  | -- |
 | cut | 是否开启选择图片后检测,设置true可开启 | boolean  | false  | -- |
 | cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object  | { layerOption,copperOption }  | -- |
+| text        | 普通上传描述     | string  | --        | -- |
+| dragText        | 拖拽上传描述     | string  | --        | -- |
 
 :::