🐛(component): 尝试解决layer.open 内容自适应

ISSUES CLOSED: #I5E4OM

package/document-layer/src/document/zh-CN/demo.md

@@ -125,6 +125,7 @@ const load4 = function() {
             <button @click="openResize">尺寸拉伸</button>
             <button @click="openIndex">设置层级</button>
             <button @click="openAreaAuto">内容适应</button>
+            <button @click="openAreaAuto2">内容适应2</button>
         </lay-col>
     </lay-row>
 </template>
@@ -220,6 +221,16 @@ const openAreaAuto = function(){
         content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
     })
 }
+
+const openAreaAuto2 = function(){
+    layer.open({
+        type:1,
+        title:"area:auto",
+        offset:['10px','50%'],
+        isHtmlFragment:true,
+        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
+    })
+}
 </script>
 
 :::

package/layer/src/component/index.vue

@@ -40,6 +40,7 @@ import {
 import useMove from "../composable/useMove";
 import useResize from "../composable/useResize";
 import { zIndexKey } from "../tokens";
+import { arrayExpression } from "@babel/types";
 
 export interface LayModalProps {
   id?: string;
@@ -111,9 +112,9 @@ const props = withDefaults(defineProps<LayModalProps>(), {
   resize: false,
   isHtmlFragment: false,
   isOutAnim: true,
-  destroy: () => {},
+  destroy: () => { },
-  success: () => {},
+  success: () => { },
-  end: () => {},
+  end: () => { },
   yesText: "确定",
   isFunction: false,
   isMessage: false,
@@ -171,6 +172,9 @@ const firstOpenDelayCalculation = function () {
         props
       );
     }
+    if (props.isHtmlFragment && props.area === 'auto') {
+      area.value = ['auto', 'auto'];
+    }
     offset.value = calculateOffset(props.offset, area.value, props.type);
     w.value = area.value[0];
     h.value = area.value[1];
@@ -393,13 +397,35 @@ const supportMove = function () {
  * <p>
  */
 const styles = computed<any>(() => {
-  return {
+  let style = {
     top: t.value,
     left: l.value,
     width: w.value,
     height: h.value,
     zIndex: index.value,
   };
+  if (props.isHtmlFragment && props.area === 'auto') {
+    // @ts-ignore
+    style.maxWidth = 'calc(100% - 2px)';
+    // @ts-ignore
+    style.maxHeight = 'calc(100% - 51px)';
+    style.top = '50%';
+    style.left = '50%';
+    if (Array.isArray(offset.value)) {
+      if (offset.value[0].indexOf('px') > -1) {
+        style.top = offset.value[0];
+      }
+      if (offset.value[1].indexOf('px') > -1) {
+        style.left = offset.value[1];
+      }
+      if (offset.value[0].indexOf('%') > -1 || offset.value[1].indexOf('%') > -1) {
+        // @ts-ignore
+        style.transform = `translate(-${style.left.indexOf('%')>-1?style.left:0},-${style.top.indexOf('%')>-1?style.top:0})`;
+      }
+    }
+
+  }
+  return style
 });
 
 /**
@@ -566,33 +592,15 @@ defineExpose({ reset, open, close });
 <template>
   <div>
     <!-- 遮盖层 -->
-    <Shade
+    <Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
-      :index="index"
-      :visible="shadeVisible"
-      :opacity="shadeOpacity"
-      @shadeClick="shadeHandle"
-    ></Shade>
     <!-- 动画容器 -->
-    <transition
+    <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
-      :enter-active-class="enterActiveClass"
-      :leave-active-class="leaveActiveClass"
-    >
       <!-- 弹出层 -->
-      <div
+      <div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
-        ref="layero"
-        class="layui-layer layui-layer-border"
-        :class="boxClasses"
-        :style="styles"
-        v-if="visible"
-      >
         <!-- 标题 -->
         <Title v-if="showTitle" :title="title"></Title>
         <!-- 内容 -->
-        <div
+        <div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
-          class="layui-layer-content"
-          :style="{ height: contentHeight }"
-          :class="contentClasses"
-        >
           <template v-if="type === 0 || type === 1 || type === 4">
             <i v-if="icon" :class="iconClass"></i>
             <slot v-if="slots.default"></slot>
@@ -604,39 +612,22 @@ defineExpose({ reset, open, close });
             </template>
           </template>
           <Iframe v-if="type === 2" :src="props.content"></Iframe>
-          <Photos
+          <Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex"
-            v-if="type === 5"
+            @resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
-            :imgList="props.imgList"
-            :startIndex="props.startIndex"
-            @resetCalculationPohtosArea="resetCalculationPohtosArea"
-          ></Photos>
         </div>
         <!-- 工具栏 -->
         <span class="layui-layer-setwin" v-if="type != 3 && type != 5">
-          <a
+          <a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
-            v-if="maxmin && !max"
+            href="javascript:;" @click="minHandle">
-            class="layui-layer-min"
-            :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
-            href="javascript:;"
-            @click="minHandle"
-          >
             <cite v-if="!min"></cite>
           </a>
-          <a
+          <a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
-            v-if="maxmin && !min"
+            href="javascript:;" @click="maxHandle"></a>
-            class="layui-layer-ico layui-layer-max"
-            :class="[max ? 'layui-layer-maxmin' : '']"
-            href="javascript:;"
-            @click="maxHandle"
-          ></a>
           <CloseBtn v-if="closeBtn" @closeHandle="closeHandle"></CloseBtn>
         </span>
         <!-- 操作栏 -->
-        <div
+        <div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
-          v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
+          :class="[`layui-layer-btn-${btnAlign}`]">
-          class="layui-layer-btn"
-          :class="[`layui-layer-btn-${btnAlign}`]"
-        >
           <template v-if="btn && btn.length > 0">
             <template v-for="(b, index) in btn" :key="index">
               <a :class="[`layui-layer-btn${index}`]" @click="b.callback(id)">{{