📝: 更新文档

2022-07-06 22:24:25 +08:00
parent f3b2d137b3
commit b4e67b46c6
13 changed files with 459 additions and 201 deletions
--- a/package/component/package.json
+++ b/package/component/package.json
@@ -34,7 +34,7 @@
  },
  "dependencies": {
    "@layui/icons-vue": "^1.0.9",
-    "@layui/layer-vue": "^1.3.18",
+    "@layui/layer-vue": "^1.4.0",
    "@vueuse/core": "^8.7.3",
    "async-validator": "^4.1.1",
    "cropperjs": "^1.5.12",
--- a/package/document-component/src/document/zh-CN/components/modal.md
+++ b/package/document-component/src/document/zh-CN/components/modal.md
@@ -4,7 +4,7 @@
 ::: title 基本介绍
 :::

-::: describe 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。
+::: describe 需要用户处理事务，又不希望跳转页面以致打断工作流程时，承载相应的操作。
 :::

 ::: title 基本使用
--- a/package/document-component/src/document/zh-CN/components/msg.md
+++ b/package/document-component/src/document/zh-CN/components/msg.md
@@ -52,7 +52,7 @@ import { layer } from "@layui/layer-vue"
 export default {
  setup() {
    const openSuccess = function() {
-        layer.msg("成功消息", { icon : 1, time: 100000})
+        layer.msg("成功消息", { icon : 1, time: 1000})
    }
    const openFailure = function() {
        layer.msg("失败消息", { icon : 2, time: 1000})
--- a/package/document-component/src/document/zh-CN/components/notifiy.md
+++ b/package/document-component/src/document/zh-CN/components/notifiy.md
@@ -0,0 +1,133 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 全局展示通知提醒信息。
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <lay-row :space="30" >
+    <lay-col :span="24">
+      <lay-button type="primary" @click="baseNotifiy">右上位置</lay-button>
+      <lay-button type="primary" @click="baseNotifiyRB">右下位置</lay-button>
+      <lay-button type="primary" @click="baseNotifiyLT">左上位置</lay-button>
+      <lay-button type="primary" @click="baseNotifiyLB">左下位置</lay-button>
+    </lay-col>
+  </lay-row>
+</template>
+
+<script>
+import { layer } from  "@layui/layer-vue"
+
+const baseNotifiy = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"默认就是右上，也是用得最多的"
+    })
+}
+const baseNotifiyRB = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"我出现在右下",
+      offset:'rb',
+    })
+}
+const baseNotifiyLT = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"我出现在左上",
+      offset:'lt',
+    })
+}
+const baseNotifiyLB = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"我出现在左下",
+      offset:'lb',
+    })
+}
+</script>
+
+:::
+
+::: title 指定图标
+:::
+
+::: demo
+
+<template>
+  <lay-row :space="30" >
+    <lay-col :span="24">
+      <lay-button type="primary" @click="NotifiySuccess">成功通知</lay-button>
+      <lay-button type="primary" @click="NotifiyFailure">失败通知</lay-button>
+      <lay-button type="primary" @click="NotifiyWarm">警告通知</lay-button>
+      <lay-button type="primary" @click="NotifiyInfo">锁定通知</lay-button>
+    </lay-col>
+  </lay-row>
+</template>
+
+<script>
+import { layer } from  "@layui/layer-vue"
+
+const NotifiySuccess=function(){
+    layer.notifiy({
+      title:"Success",
+      content:"默认就是右上，也是用得最多的",
+      icon:1
+    })
+}
+const NotifiyFailure=function(){
+    layer.notifiy({
+      title:"Error",
+      content:"默认就是右上，也是用得最多的",
+      icon:2
+    })
+}
+const NotifiyWarm=function(){
+    layer.notifiy({
+      title:"Warming",
+      content:"默认就是右上，也是用得最多的",
+      icon:3
+    })
+}
+const NotifiyInfo=function(){
+    layer.notifiy({
+      title:"Question",
+      content:"默认就是右上，也是用得最多的",
+      icon:4
+    })
+}
+</script>
+
+:::
+
+::: title 组件方法
+:::
+
+```
+layer.notifiy(options)
+```
+
+::: title 组件属性
+:::
+
+::: table
+
+| 属性                | 描述   | 备注 |
+| ------------------- | ------ | ----|
+| options | 选配属性 | { time: 加载时长, icon: 图标 }   |
+
+:::
+
+::: contributor msg
+:::  
+
+::: previousNext msg
+:::
--- a/package/document-component/src/document/zh-CN/components/photo.md
+++ b/package/document-component/src/document/zh-CN/components/photo.md
@@ -0,0 +1,66 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 预览图片。
+:::
+
+::: title 指定图标
+:::
+
+::: demo
+
+<template>
+   <lay-button @click="signleImg">图片查看</lay-button>
+   <lay-button @click="signleImg2">图片标题</lay-button>
+   <lay-button @click="groupImg">图片分组</lay-button>
+</template>
+
+<script>
+import { layer } from  "@layui/layui-vue"
+
+const signleImg = function() {
+    layer.photos("http://www.pearadmin.com/assets/images/un1.svg")
+}
+const signleImg2 = function() {
+    layer.photos({
+      imgList:[{src:'http://www.pearadmin.com/assets/images/un2.svg',alt:'layer for vue'}]
+    })
+}
+const groupImg = function() {
+  layer.photos({
+    imgList:[
+      { src:'http://www.pearadmin.com/assets/images/un8.svg', alt:'图片1'},
+      { src:'http://www.pearadmin.com/assets/images/un32.svg', alt:'图片2'}
+    ]
+  })
+}
+</script>
+
+:::
+
+::: title 组件方法
+:::
+
+```
+layer.photos(options)
+```
+
+::: title 组件属性
+:::
+
+::: table
+
+| 属性                | 描述   | 备注 |
+| ------------------- | ------ | ----|
+| options | 选配属性 | { time: 加载时长, icon: 图标 }   |
+
+:::
+
+::: contributor msg
+:::  
+
+::: previousNext msg
+:::
--- a/package/document-component/src/router/zh-CN.ts
+++ b/package/document-component/src/router/zh-CN.ts
@@ -400,15 +400,25 @@ const zhCN = [
            meta: { title: "页头" },
          },
          {
-            path: "/zh-CN/components/Cascader",
+            path: "/zh-CN/components/cascader",
            component: () => import("../document/zh-CN/components/cascader.md"),
            meta: { title: "级联选择器" },
          },
          {
-            path: "/zh-CN/components/Affix",
+            path: "/zh-CN/components/affix",
            component: () => import("../document/zh-CN/components/affix.md"),
            meta: { title: "锚点" },
          },
+          {
+            path: "/zh-CN/components/notifiy",
+            component: () => import("../document/zh-CN/components/notifiy.md"),
+            meta: { title: "通知" },
+          },
+          {
+            path: "/zh-CN/components/photo",
+            component: () => import("../document/zh-CN/components/photo.md"),
+            meta: { title: "相册" },
+          },
        ],
      },
    ],
--- a/package/document-component/src/view/resource.vue
+++ b/package/document-component/src/view/resource.vue
@@ -14,7 +14,7 @@
          <li class="layui-col-sm12">
            <div class="alone">
              <a
-                href="https://gitee.com/layui/layui-vue/tree/next/package/layer"
+                href="http://layer.layui-vue.com/zh-CN/demo"
                target="_blank"
                >layer - vue<cite>通用型弹出层组件</cite></a
              >
--- a/package/document-component/src/view/utils/menus.ts
+++ b/package/document-component/src/view/utils/menus.ts
@@ -372,7 +372,7 @@ const menus = [
      {
        id: 100,
        title: "锚点",
-        subTitle: "Affix",
+        subTitle: "affix",
        path: "/zh-CN/components/affix",
      },
    ],
@@ -383,7 +383,7 @@ const menus = [
    children: [
      {
        id: 90,
-        title: "弹层",
+        title: "模态",
        subTitle: "modal",
        path: "/zh-CN/components/modal",
      },
@@ -411,6 +411,18 @@ const menus = [
        subTitle: "drawer",
        path: "/zh-CN/components/drawer",
      },
+      {
+        id: 94,
+        title: "通知",
+        subTitle: "notifiy",
+        path: "/zh-CN/components/notifiy",
+      },
+      {
+        id: 94,
+        title: "相册",
+        subTitle: "photo",
+        path: "/zh-CN/components/photo",
+      },
    ],
  },
 ];
--- a/package/document-layer/src/layouts/Layout.vue
+++ b/package/document-layer/src/layouts/Layout.vue
@@ -3,18 +3,25 @@
    <div class="markdown-body light-scheme">
      <div class="alone-header">
        <img class="alone-logo" src="../assets/logo.png" />
-        <a style="
+        <a
+          style="
            position: absolute;
            right: 16%;
            line-height: 60px;
            color: white;
            font-size: 15px;
-          ">{{ version }}</a>
-        <a href="https://gitee.com/layui-vue/layer-vue" style="position: absolute; right: 10%; line-height: 75px">
+          "
+          >{{ version }}</a
+        >
+        <a
+          href="https://gitee.com/layui-vue/layer-vue"
+          style="position: absolute; right: 10%; line-height: 75px"
+        >
          <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
-            <path fill="#fff"
-              d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z">
-            </path>
+            <path
+              fill="#fff"
+              d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
+            ></path>
          </svg>
        </a>
      </div>
@@ -125,7 +132,7 @@ body {
 }

 .layui-container {
-  padding-bottom: 50px!important;
+  padding-bottom: 50px !important;
 }

 .layui-elem-field {
--- a/package/layer/src/component/Notifiy.vue
+++ b/package/layer/src/component/Notifiy.vue
@@ -51,10 +51,7 @@ onMounted(() => {
      setTimeout(() => {
        //此处延迟加载class，以免影响弹出效果
        // @ts-ignore
-        addClass(
-          notifyRef.value.parentElement?.parentElement,
-          "layui-layer-notify"
-        );
+        addClass(notifyRef.value.parentElement?.parentElement,"layui-layer-notify");
      }, 300);
    }
  });
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -12,8 +12,35 @@ import CloseBtn from "./CloseBtn.vue";
 import Resize from "./Resize.vue";
 import Photos from "./Photos.vue";
 import Notifiy from "./Notifiy.vue";
-import { Ref, ref, watch, computed, useSlots, VNodeTypes, nextTick, inject } from "vue";
-import { nextId, maxArea, maxOffset, getArea, calculateArea, calculateOffset, calculateContent, calculateType, minArea, minOffset, updateMinArrays, getDrawerAnimationClass, calculateDrawerArea, calculatePhotosArea, calculateNotifOffset, removeNotifiyFromQueen, getNotifyAnimationClass } from "../utils";
+import {
+  Ref,
+  ref,
+  watch,
+  computed,
+  useSlots,
+  VNodeTypes,
+  nextTick,
+  inject,
+} from "vue";
+import {
+  nextId,
+  maxArea,
+  maxOffset,
+  getArea,
+  calculateArea,
+  calculateOffset,
+  calculateContent,
+  calculateType,
+  minArea,
+  minOffset,
+  updateMinArrays,
+  getDrawerAnimationClass,
+  calculateDrawerArea,
+  calculatePhotosArea,
+  calculateNotifOffset,
+  removeNotifiyFromQueen,
+  getNotifyAnimationClass,
+} from "../utils";
 import useResize from "../composable/useResize";
 import useMove from "../composable/useMove";
 import { zIndexKey } from "../tokens";
@@ -32,7 +59,21 @@ export interface LayModalProps {
  btn?: Record<string, Function>[] | false;
  move?: boolean | string;
  resize?: boolean | string;
-  type?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | "dialog" | "page" | "iframe" | "loading" | "drawer" | "photos" | "notifiy";
+  type?:
+    | 0
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | "dialog"
+    | "page"
+    | "iframe"
+    | "loading"
+    | "drawer"
+    | "photos"
+    | "notifiy";
  content?: string | Function | object | VNodeTypes;
  isHtmlFragment?: boolean;
  shade?: boolean | string;
@@ -79,12 +120,12 @@ const props = withDefaults(defineProps<LayModalProps>(), {
  resize: false,
  isHtmlFragment: false,
  isOutAnim: true,
-  destroy: () => { },
-  success: () => { },
-  end: () => { },
-  full: () => { },
-  min: () => { },
-  restore: () => { },
+  destroy: () => {},
+  success: () => {},
+  end: () => {},
+  full: () => {},
+  min: () => {},
+  restore: () => {},
  yesText: "确定",
  isFunction: false,
  isMessage: false,
@@ -107,7 +148,7 @@ const offset: Ref<string[]> = ref(
  calculateOffset(props.offset, area.value, props.type)
 );
 const contentHeight = ref(
-  calculateContent(props.title,area.value[1], props.btn, type, props.isMessage)
+  calculateContent(props.title, area.value[1], props.btn, type, props.isMessage)
 );
 const index: Ref<number | Function> = ref(
  props.zIndex ?? inject(zIndexKey, 99999)
@@ -131,30 +172,30 @@ const _l: Ref<string> = ref(offset.value[1]);
 */
 const firstOpenDelayCalculation = function () {
  nextTick(async () => {
-      area.value = getArea(layero.value);
-      if (type == 4) {
-        area.value = calculateDrawerArea(props.offset, props.area);
-      }
-      if (type == 5) {
-        // @ts-ignore
-        area.value = await calculatePhotosArea(
-          props.imgList[props.startIndex].src,
-          props
-        );
-      }
-      offset.value = calculateOffset(props.offset, area.value, props.type);
-      if (type == 6) {
-        offset.value = calculateNotifOffset(props.offset, area.value, id.value);
-      }
-      w.value = area.value[0];
-      h.value = area.value[1];
-      _w.value = area.value[0];
-      _l.value = area.value[1];
-      t.value = offset.value[0];
-      l.value = offset.value[1];
-      _t.value = offset.value[0];
-      _l.value = offset.value[1];
-      supportMove();
+    area.value = getArea(layero.value);
+    if (type == 4) {
+      area.value = calculateDrawerArea(props.offset, props.area);
+    }
+    if (type == 5) {
+      // @ts-ignore
+      area.value = await calculatePhotosArea(
+        props.imgList[props.startIndex].src,
+        props
+      );
+    }
+    offset.value = calculateOffset(props.offset, area.value, props.type);
+    if (type == 6) {
+      offset.value = calculateNotifOffset(props.offset, area.value, id.value);
+    }
+    w.value = area.value[0];
+    h.value = area.value[1];
+    _w.value = area.value[0];
+    _l.value = area.value[1];
+    t.value = offset.value[0];
+    l.value = offset.value[1];
+    _t.value = offset.value[0];
+    _l.value = offset.value[1];
+    supportMove();
  });
 };

@@ -555,15 +596,33 @@ defineExpose({ reset, open, close });
 <template>
  <div>
    <!-- 遮盖层 -->
-    <Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
+    <Shade
+      :index="index"
+      :visible="shadeVisible"
+      :opacity="shadeOpacity"
+      @shadeClick="shadeHandle"
+    ></Shade>
    <!-- 动画容器 -->
-    <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
+    <transition
+      :enter-active-class="enterActiveClass"
+      :leave-active-class="leaveActiveClass"
+    >
      <!-- 弹出层 -->
-      <div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
+      <div
+        ref="layero"
+        class="layui-layer layui-layer-border"
+        :class="boxClasses"
+        :style="styles"
+        v-if="visible"
+      >
        <!-- 标题 -->
        <Title v-if="showTitle" :title="title"></Title>
        <!-- 内容 -->
-        <div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
+        <div
+          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>
@@ -575,28 +634,59 @@ defineExpose({ reset, open, close });
            </template>
          </template>
          <Iframe v-if="type === 2" :src="props.content"></Iframe>
-          <Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex"
-            @resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
-          <Notifiy v-if="type === 6" @close="closeHandle" :title="props.title" :content="props.content"
-            :isHtmlFragment="props.isHtmlFragment" :icon="props.icon" :iconClass="iconClass"></Notifiy>
+          <Photos
+            v-if="type === 5"
+            :imgList="props.imgList"
+            :startIndex="props.startIndex"
+            @resetCalculationPohtosArea="resetCalculationPohtosArea"
+          ></Photos>
+          <Notifiy
+            v-if="type === 6"
+            @close="closeHandle"
+            :title="props.title"
+            :content="props.content"
+            :isHtmlFragment="props.isHtmlFragment"
+            :icon="props.icon"
+            :iconClass="iconClass"
+          ></Notifiy>
        </div>
        <!-- 工具栏 -->
-        <span class="layui-layer-setwin" v-if="type != 3 && type != 5 && type != 6">
-          <a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
-            href="javascript:;" @click="minHandle">
+        <span
+          class="layui-layer-setwin"
+          v-if="type != 3 && type != 5 && type != 6"
+        >
+          <a
+            v-if="maxmin && !max"
+            class="layui-layer-min"
+            :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="minHandle"
+          >
            <cite v-if="!min"></cite>
          </a>
-          <a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
-            href="javascript:;" @click="maxHandle"></a>
-          <CloseBtn v-if="closeBtn != false" :close-btn="closeBtn" @closeHandle="closeHandle" ></CloseBtn>
+          <a
+            v-if="maxmin && !min"
+            class="layui-layer-ico layui-layer-max"
+            :class="[max ? 'layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="maxHandle"
+          ></a>
+          <CloseBtn
+            v-if="closeBtn != false"
+            :close-btn="closeBtn"
+            @closeHandle="closeHandle"
+          ></CloseBtn>
        </span>
        <!-- 操作栏 -->
-        <div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
-          :class="[`layui-layer-btn-${btnAlign}`]">
+        <div
+          v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
+          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)">{{
-                  b.text
+                b.text
              }}</a>
            </template>
          </template>
--- a/package/layer/src/utils/index.ts
+++ b/package/layer/src/utils/index.ts
@@ -144,21 +144,21 @@ export function calculateContent(
  }
  if (btn && btn.length > 0) {
    if (type == 0) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 137px)";
      } else {
        return "calc(" + height + " - 86px)";
      }
    }
    if (type == 1) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 102px)";
      } else {
        return "calc(" + height + " - 51px)";
      }
    }
    if (type == 2) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 102px)";
      } else {
        return "calc(" + height + " - 51px)";
@@ -166,21 +166,21 @@ export function calculateContent(
    }
  } else {
    if (type == 0) {
-      if(title) {
+      if (title) {
        return isMessage ? height : "calc(" + height + " - 137px)";
      } else {
        return isMessage ? height : "calc(" + height + " - 86px)";
      }
    }
    if (type == 1) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 51px)";
      } else {
        return "calc(" + height + " - 0px)";
      }
    }
    if (type == 2) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 51px)";
      } else {
        return "calc(" + height + " - 0px)";