💗 publish 0.2.5

README.md

@@ -38,7 +38,7 @@ npm install @layui/layui-vue
 ```js
 import { createApp } from 'vue'
 import Layui from '@layui/layui-vue'
-import '@layui/layui-vue/lib/layui.css'
+import '@layui/layui-vue/lib/index.css'
 import App from './App.vue'
 
 createApp(App).use(Layui).mount('#app')

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

@@ -75,9 +75,6 @@ export default {
 ::: title 图标列表
 :::
 
-::: demo
-
-<template>
 <ul class="site-doc-icon">
       <li>
         <i class="layui-icon layui-icon-heart-fill"></i>
@@ -1088,21 +1085,6 @@ export default {
         <div class="doc-icon-fontclass">layui-icon-add-circle-fine</div>
       </li>
     </ul>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
 
 ::: title 图标属性
 :::

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

@@ -5,11 +5,11 @@
 
 <template>
   <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
-  <lay-layer title="基础使用" v-model:visible="visible1">
+  <lay-modal title="基础使用" v-model:visible="visible1">
     <div style="padding:10px">
     这是一个基础弹窗
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -40,11 +40,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
-  <lay-layer title="允许拖动" v-model:visible="visible2" move="true">
+  <lay-modal title="允许拖动" v-model:visible="visible2" move="true">
     <div style="padding:10px">
       这是一个可以拖拽的弹窗
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -75,11 +75,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
-  <lay-layer title="放大缩小" v-model:visible="visible3" move="true" maxmin="true">
+  <lay-modal title="放大缩小" v-model:visible="visible3" move="true" maxmin="true">
       <div style="padding:10px">
         该弹窗支持放大缩小
       </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -110,11 +110,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
-  <lay-layer title="指定位置" v-model:visible="visible4" move="true" :offset="['100px','100px']">
+  <lay-modal title="指定位置" v-model:visible="visible4" move="true" :offset="['100px','100px']">
       <div style="padding:10px">
       指定弹窗显示的默认位置
       </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -145,7 +145,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
+  <lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
 </template>
 
 <script>
@@ -178,11 +178,11 @@ export default {
 
 <template>
   <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
-  <lay-layer title="定义操作" v-model:visible="visible6" move="true" :btn="btn6">
+  <lay-modal title="定义操作" v-model:visible="visible6" move="true" :btn="btn6">
     <div style="padding:10px">
     定义一组弹窗操作按钮
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -211,18 +211,18 @@ export default {
 
 :::
 
-::: title 开启遮盖
+::: title 关闭遮盖
 :::
 
 ::: demo
 
 <template>
   <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
-  <lay-layer title="开启遮盖" move="true" shade="true" v-model:visible="visible7">
+  <lay-modal title="开启遮盖" move="true" shade="false" v-model:visible="visible7">
     <div style="padding:10px">
       允许点击遮盖层关闭弹窗
     </div>
-  </lay-layer>
+  </lay-modal>
 </template>
 
 <script>
@@ -246,6 +246,49 @@ export default {
 
 :::
 
+::: title 函数调用
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="open" type="primary">open</lay-button>
+  <lay-button @click="close" type="primary">close</lay-button>
+  <lay-button @click="closeAll" type="primary">closeAll</lay-button>
+</template>
+
+<script>
+import { ref, watch } from "vue";
+import { layer } from "../../../../src/index.ts"
+import { useRoute, useRouter } from "vue-router";
+export default {
+  setup() {
+
+    let id = null;
+
+    const open = function() {
+      id = layer.open({title:"标题",content:"内容", shade: false})
+    }
+
+    const close = function() {
+      layer.close(id)
+    }
+
+    const closeAll = function() {
+      layer.closeAll()
+    }
+
+    return {
+        open,
+        close,
+        closeAll
+    };
+  },
+};
+</script>
+
+:::
+
 ::: title 弹层属性
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -10,6 +10,16 @@
 ::: demo
 <template>
 <lay-timeline>
+<lay-timeline-item title="0.2.5">
+[新增] icons 组件化调用方式, 使用 class 作为组件名使用组件。<br>
+[新增] layer, 提供 layer.open, layer.close, layer.closeAll 函数式调用。<br>
+[修复] layer 的 id 属性不唯一, 调整 Guid 为 Uuid 策略。<br>
+[修改] lay-layer 组件为 lay-modal, 使用方式保持不变。<br>
+[修改] lay-layer 组件 move 默认为 true, 默认提供拖拽支持。<br> 
+[修稿] layer.css 为 @layui/layui-vue/lib/index.css。<br>
+[独立] layui-vue 项目, layer 与 lay-modal 组件仍内置, 亦支持单独引用。<br>
+[独立] icons-vue 项目, lay-icon 与 iconfont.less 仍内置, 亦支持单独引用。<br>
+</lay-timeline-item>
 <lay-timeline-item title="0.2.4">
 [增强] checkbox 组件, v-model 支持 array 数据类型。<br>
 [重构] row col 栅格组件, 支持 24 粒度布局。<br>

example/docs/zh-CN/guide/getStarted.md

@@ -28,7 +28,7 @@ npm install @layui/layui-vue --save
 import App from './App.vue'
 import { createApp } from 'vue'
 import Layui from '@layui/layui-vue'
-import '@layui/layui-vue/lib/layui.css'
+import '@layui/layui-vue/lib/index.css'
 
 createApp(App).use(Layui).mount('#app')
 ```

example/src/layouts/Layout.vue

@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.2.4 </a>
+          <a href="javascript:void(0)"> 0.2.5 </a>
         </li>
       </ul>
     </lay-header>

example/src/router/zh-CN.ts

@@ -259,8 +259,8 @@ const zhCN = [
             meta: { title: '颜色选择器' },
           },
           {
-            path: '/zh-CN/components/layer',
+            path: '/zh-CN/components/modal',
-            component: () => import('../../docs/zh-CN/components/layer.md'),
+            component: () => import('../../docs/zh-CN/components/modal.md'),
             meta: { title: '弹层' },
           },
         ],

example/src/view/component.vue

@@ -335,8 +335,8 @@ export default {
           {
             id: 90,
             title: '弹层',
-            subTitle: 'layer',
+            subTitle: 'modal',
-            path: '/zh-CN/components/layer',
+            path: '/zh-CN/components/modal',
           },
         ],
       },

example/src/view/index.vue

@@ -28,7 +28,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.2.4</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.2.5</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "a component library for Vue 3 base on layui-vue",
   "homepage": "https://gitee.com/layui-vue/layui-vue/blob/master/README.md",
   "module": "lib/layui-vue.es.js",
@@ -29,11 +29,15 @@
   "license": "MIT",
   "peerDependencies": {
     "vue": "^3.2.22",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "@layui/layer-vue": "^1.0.2",
+    "@layui/icons-vie": "^1.0.0"
   },
   "dependencies": {
     "vue": "^3.2.22",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "@layui/layer-vue": "^1.0.2",
+    "@layui/icons-vue": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",

src/css/layer.css

@@ -1,952 +0,0 @@
-.layui-layer-imgbar,
-.layui-layer-imgtit a,
-.layui-layer-tab .layui-layer-title span,
-.layui-layer-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-html #layuicss-layer {
-  display: none;
-  position: absolute;
-  width: 1989px;
-}
-
-.layui-layer,
-.layui-layer-shade {
-  position: fixed;
-  _position: absolute;
-  pointer-events: auto;
-}
-
-.layui-layer-shade {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.layui-layer {
-  -webkit-overflow-scrolling: touch;
-  top: 150px;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  background-color: #fff;
-  -webkit-background-clip: content;
-  border-radius: 2px;
-  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
-}
-
-.layui-layer-close {
-  position: absolute;
-}
-
-.layui-layer-content {
-  position: relative;
-}
-
-.layui-layer-border {
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-}
-
-.layui-layer-load {
-  background: url(loading-1.gif) center center no-repeat #eee;
-}
-
-.layui-layer-ico {
-  background: url(icon.png) no-repeat;
-}
-
-.layui-layer-btn a,
-.layui-layer-dialog .layui-layer-ico,
-.layui-layer-setwin a {
-  display: inline-block;
-  *display: inline;
-  *zoom: 1;
-  vertical-align: top;
-}
-
-.layui-layer-move {
-  display: none;
-  position: fixed;
-  *position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  cursor: move;
-  opacity: 0;
-  filter: alpha(opacity=0);
-  background-color: #fff;
-  z-index: 2147483647;
-}
-
-.layui-layer-resize {
-  position: absolute;
-  width: 15px;
-  height: 15px;
-  right: 0;
-  bottom: 0;
-  cursor: se-resize;
-}
-
-.layer-anim {
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-}
-
-@-webkit-keyframes layer-bounceIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@keyframes layer-bounceIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-    -ms-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-.layer-anim-00 {
-  -webkit-animation-name: layer-bounceIn;
-  animation-name: layer-bounceIn;
-}
-
-@-webkit-keyframes layer-zoomInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translateY(-2000px);
-    transform: scale(0.1) translateY(-2000px);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(0.475) translateY(60px);
-    transform: scale(0.475) translateY(60px);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-}
-
-@keyframes layer-zoomInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translateY(-2000px);
-    -ms-transform: scale(0.1) translateY(-2000px);
-    transform: scale(0.1) translateY(-2000px);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(0.475) translateY(60px);
-    -ms-transform: scale(0.475) translateY(60px);
-    transform: scale(0.475) translateY(60px);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-}
-
-.layer-anim-01 {
-  -webkit-animation-name: layer-zoomInDown;
-  animation-name: layer-zoomInDown;
-}
-
-@-webkit-keyframes layer-fadeInUpBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(2000px);
-    transform: translateY(2000px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
-}
-
-@keyframes layer-fadeInUpBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(2000px);
-    -ms-transform: translateY(2000px);
-    transform: translateY(2000px);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-  }
-}
-
-.layer-anim-02 {
-  -webkit-animation-name: layer-fadeInUpBig;
-  animation-name: layer-fadeInUpBig;
-}
-
-@-webkit-keyframes layer-zoomInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translateX(-2000px);
-    transform: scale(0.1) translateX(-2000px);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(0.475) translateX(48px);
-    transform: scale(0.475) translateX(48px);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-}
-
-@keyframes layer-zoomInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translateX(-2000px);
-    -ms-transform: scale(0.1) translateX(-2000px);
-    transform: scale(0.1) translateX(-2000px);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(0.475) translateX(48px);
-    -ms-transform: scale(0.475) translateX(48px);
-    transform: scale(0.475) translateX(48px);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-}
-
-.layer-anim-03 {
-  -webkit-animation-name: layer-zoomInLeft;
-  animation-name: layer-zoomInLeft;
-}
-
-@-webkit-keyframes layer-rollIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100%) rotate(-120deg);
-    transform: translateX(-100%) rotate(-120deg);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateX(0) rotate(0);
-    transform: translateX(0) rotate(0);
-  }
-}
-
-@keyframes layer-rollIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100%) rotate(-120deg);
-    -ms-transform: translateX(-100%) rotate(-120deg);
-    transform: translateX(-100%) rotate(-120deg);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateX(0) rotate(0);
-    -ms-transform: translateX(0) rotate(0);
-    transform: translateX(0) rotate(0);
-  }
-}
-
-.layer-anim-04 {
-  -webkit-animation-name: layer-rollIn;
-  animation-name: layer-rollIn;
-}
-
-@keyframes layer-fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.layer-anim-05 {
-  -webkit-animation-name: layer-fadeIn;
-  animation-name: layer-fadeIn;
-}
-
-@-webkit-keyframes layer-shake {
-  0%,
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translateX(-10px);
-    transform: translateX(-10px);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translateX(10px);
-    transform: translateX(10px);
-  }
-}
-
-@keyframes layer-shake {
-  0%,
-  100% {
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translateX(-10px);
-    -ms-transform: translateX(-10px);
-    transform: translateX(-10px);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translateX(10px);
-    -ms-transform: translateX(10px);
-    transform: translateX(10px);
-  }
-}
-
-.layer-anim-06 {
-  -webkit-animation-name: layer-shake;
-  animation-name: layer-shake;
-}
-
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.layui-layer-title {
-  padding: 0 80px 0 20px;
-  height: 50px;
-  line-height: 50px;
-  border-bottom: 1px solid #f0f0f0;
-  font-size: 14px;
-  color: #333;
-  overflow: hidden;
-  border-radius: 2px 2px 0 0;
-}
-
-.layui-layer-setwin {
-  position: absolute;
-  right: 15px;
-  *right: 0;
-  top: 17px;
-  font-size: 0;
-  line-height: initial;
-}
-
-.layui-layer-setwin a {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  margin-left: 10px;
-  font-size: 12px;
-  _overflow: hidden;
-}
-
-.layui-layer-setwin .layui-layer-min cite {
-  position: absolute;
-  width: 14px;
-  height: 2px;
-  left: 0;
-  top: 50%;
-  margin-top: -1px;
-  background-color: #2e2d3c;
-  cursor: pointer;
-  _overflow: hidden;
-}
-
-.layui-layer-setwin .layui-layer-min:hover cite {
-  background-color: #2d93ca;
-}
-
-.layui-layer-setwin .layui-layer-max {
-  background-position: -32px -40px;
-}
-
-.layui-layer-setwin .layui-layer-max:hover {
-  background-position: -16px -40px;
-}
-
-.layui-layer-setwin .layui-layer-maxmin {
-  background-position: -65px -40px;
-}
-
-.layui-layer-setwin .layui-layer-maxmin:hover {
-  background-position: -49px -40px;
-}
-
-.layui-layer-setwin .layui-layer-close1 {
-  background-position: 1px -40px;
-  cursor: pointer;
-}
-
-.layui-layer-setwin .layui-layer-close1:hover {
-  opacity: 0.7;
-}
-
-.layui-layer-setwin .layui-layer-close2 {
-  position: absolute;
-  right: -28px;
-  top: -28px;
-  width: 30px;
-  height: 30px;
-  margin-left: 0;
-  background-position: -149px -31px;
-  *right: -18px;
-  _display: none;
-}
-
-.layui-layer-setwin .layui-layer-close2:hover {
-  background-position: -180px -31px;
-}
-
-.layui-layer-btn {
-  text-align: right;
-  padding: 8px 15px 12px;
-  pointer-events: auto;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.layui-layer-btn a {
-  height: 33px;
-  line-height: 33px;
-  margin: 0px 5px 0;
-  padding: 0 15px;
-  border: 1px solid #dedede;
-  background-color: #fff;
-  color: #333;
-  border-radius: 2px;
-  font-weight: 400;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.layui-layer-btn a:hover {
-  opacity: 0.9;
-  text-decoration: none;
-}
-
-.layui-layer-btn a:active {
-  opacity: 0.8;
-}
-
-.layui-layer-btn .layui-layer-btn0 {
-  border-color: #1e9fff;
-  background-color: #1e9fff;
-  color: #fff;
-}
-
-.layui-layer-btn-l {
-  text-align: left;
-}
-
-.layui-layer-btn-c {
-  text-align: center;
-}
-
-.layui-layer-dialog {
-  min-width: 300px;
-}
-
-.layui-layer-dialog .layui-layer-content {
-  position: relative;
-  line-height: 24px;
-  word-break: break-all;
-  height: 100%;
-  overflow: hidden;
-  font-size: 14px;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.layui-layer-dialog .layui-layer-content .layui-layer-ico {
-  position: absolute;
-  top: 16px;
-  left: 15px;
-  _left: -40px;
-  width: 30px;
-  height: 30px;
-}
-
-.layui-layer-ico1 {
-  background-position: -30px 0;
-}
-
-.layui-layer-ico2 {
-  background-position: -60px 0;
-}
-
-.layui-layer-ico3 {
-  background-position: -90px 0;
-}
-
-.layui-layer-ico4 {
-  background-position: -120px 0;
-}
-
-.layui-layer-ico5 {
-  background-position: -150px 0;
-}
-
-.layui-layer-ico6 {
-  background-position: -180px 0;
-}
-
-.layui-layer-rim {
-  border: 6px solid #8d8d8d;
-  border: 6px solid rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  box-shadow: none;
-}
-
-.layui-layer-msg {
-  min-width: 180px;
-  border: 1px solid #d3d4d3;
-  box-shadow: none;
-}
-
-.layui-layer-hui {
-  min-width: 100px;
-  background-color: #000;
-  opacity: 0.6;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  border: none;
-}
-
-.layui-layer-hui .layui-layer-content {
-  padding: 12px 25px;
-  text-align: center;
-}
-
-.layui-layer-dialog .layui-layer-padding {
-  padding: 20px 20px 20px 55px;
-  text-align: left;
-}
-
-.layui-layer-page .layui-layer-content {
-  position: relative;
-  overflow: auto;
-}
-
-.layui-layer-iframe .layui-layer-btn,
-.layui-layer-page .layui-layer-btn {
-  padding-top: 10px;
-}
-
-.layui-layer-nobg {
-  background: 0 0;
-}
-
-.layui-layer-iframe iframe {
-  display: block;
-  width: 100%;
-}
-
-.layui-layer-loading {
-  border-radius: 100%;
-  background: 0 0;
-  box-shadow: none;
-  border: none;
-}
-
-.layui-layer-loading .layui-layer-content {
-  width: 60px;
-  height: 24px;
-  background: url(loading-0.gif) no-repeat;
-}
-
-.layui-layer-loading .layui-layer-loading1 {
-  width: 37px;
-  height: 37px;
-  background: url(loading-1.gif) no-repeat;
-}
-
-.layui-layer-ico16,
-.layui-layer-loading .layui-layer-loading2 {
-  width: 32px;
-  height: 32px;
-  background: url(loading-2.gif) no-repeat;
-}
-
-.layui-layer-tips {
-  background: 0 0;
-  box-shadow: none;
-  border: none;
-}
-
-.layui-layer-tips .layui-layer-content {
-  position: relative;
-  line-height: 22px;
-  min-width: 12px;
-  padding: 8px 15px;
-  font-size: 12px;
-  _float: left;
-  border-radius: 2px;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
-  background-color: #000;
-  color: #fff;
-}
-
-.layui-layer-tips .layui-layer-close {
-  right: -2px;
-  top: -1px;
-}
-
-.layui-layer-tips i.layui-layer-TipsG {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-width: 8px;
-  border-color: transparent;
-  border-style: dashed;
-  *overflow: hidden;
-}
-
-.layui-layer-tips i.layui-layer-TipsB,
-.layui-layer-tips i.layui-layer-TipsT {
-  left: 5px;
-  border-right-style: solid;
-  border-right-color: #000;
-}
-
-.layui-layer-tips i.layui-layer-TipsT {
-  bottom: -8px;
-}
-
-.layui-layer-tips i.layui-layer-TipsB {
-  top: -8px;
-}
-
-.layui-layer-tips i.layui-layer-TipsL,
-.layui-layer-tips i.layui-layer-TipsR {
-  top: 5px;
-  border-bottom-style: solid;
-  border-bottom-color: #000;
-}
-
-.layui-layer-tips i.layui-layer-TipsR {
-  left: -8px;
-}
-
-.layui-layer-tips i.layui-layer-TipsL {
-  right: -8px;
-}
-
-.layui-layer-lan[type='dialog'] {
-  min-width: 280px;
-}
-
-.layui-layer-lan .layui-layer-title {
-  background: #4476a7;
-  color: #fff;
-  border: none;
-}
-
-.layui-layer-lan .layui-layer-btn {
-  padding: 5px 10px 10px;
-  text-align: right;
-  border-top: 1px solid #e9e7e7;
-}
-
-.layui-layer-lan .layui-layer-btn a {
-  background: #fff;
-  border-color: #e9e7e7;
-  color: #333;
-}
-
-.layui-layer-lan .layui-layer-btn .layui-layer-btn1 {
-  background: #c9c5c5;
-}
-
-.layui-layer-molv .layui-layer-title {
-  background: #009f95;
-  color: #fff;
-  border: none;
-}
-
-.layui-layer-molv .layui-layer-btn a {
-  background: #009f95;
-  border-color: #009f95;
-}
-
-.layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
-  background: #92b8b1;
-}
-
-.layui-layer-iconext {
-  background: url(icon-ext.png) no-repeat;
-}
-
-.layui-layer-prompt .layui-layer-input {
-  display: block;
-  width: 260px;
-  height: 36px;
-  margin: 0 auto;
-  line-height: 30px;
-  padding-left: 10px;
-  border: 1px solid #e6e6e6;
-  color: #333;
-}
-
-.layui-layer-prompt textarea.layui-layer-input {
-  width: 300px;
-  height: 100px;
-  line-height: 20px;
-  padding: 6px 10px;
-}
-
-.layui-layer-prompt .layui-layer-btn {
-  padding-top: 0;
-}
-
-.layui-layer-tab {
-  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.4);
-}
-
-.layui-layer-tab .layui-layer-title {
-  padding-left: 0;
-  overflow: visible;
-}
-
-.layui-layer-tab .layui-layer-title span {
-  position: relative;
-  float: left;
-  min-width: 80px;
-  max-width: 300px;
-  padding: 0 20px;
-  text-align: center;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.layui-layer-tab .layui-layer-title span.layui-this {
-  height: 51px;
-  border-left: 1px solid #eee;
-  border-right: 1px solid #eee;
-  background-color: #fff;
-  z-index: 10;
-}
-
-.layui-layer-tab .layui-layer-title span:first-child {
-  border-left: none;
-}
-
-.layui-layer-tabmain {
-  line-height: 24px;
-  clear: both;
-}
-
-.layui-layer-tabmain .layui-layer-tabli {
-  display: none;
-}
-
-.layui-layer-tabmain .layui-layer-tabli.layui-this {
-  display: block;
-}
-
-.layui-layer-photos {
-  background: 0 0;
-  box-shadow: none;
-}
-
-.layui-layer-photos .layui-layer-content {
-  overflow: hidden;
-  text-align: center;
-}
-
-.layui-layer-photos .layui-layer-phimg img {
-  position: relative;
-  width: 100%;
-  display: inline-block;
-  *display: inline;
-  *zoom: 1;
-  vertical-align: top;
-}
-
-.layui-layer-imgnext,
-.layui-layer-imgprev {
-  position: fixed;
-  top: 50%;
-  width: 27px;
-  _width: 44px;
-  height: 44px;
-  margin-top: -22px;
-  outline: 0;
-}
-
-.layui-layer-imgprev {
-  left: 30px;
-  background-position: -5px -5px;
-  _background-position: -70px -5px;
-}
-
-.layui-layer-imgprev:hover {
-  background-position: -33px -5px;
-  _background-position: -120px -5px;
-}
-
-.layui-layer-imgnext {
-  right: 30px;
-  _right: 8px;
-  background-position: -5px -50px;
-  _background-position: -70px -50px;
-}
-
-.layui-layer-imgnext:hover {
-  background-position: -33px -50px;
-  _background-position: -120px -50px;
-}
-
-.layui-layer-imgbar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 40px;
-  line-height: 40px;
-  filter: Alpha(opacity=60);
-  background-color: rgba(2, 0, 0, 0.35);
-  color: #fff;
-  overflow: hidden;
-  font-size: 0;
-}
-
-.layui-layer-imgtit * {
-  display: inline-block;
-  *display: inline;
-  *zoom: 1;
-  vertical-align: top;
-  font-size: 12px;
-}
-
-.layui-layer-imgtit a {
-  max-width: 65%;
-  overflow: hidden;
-  color: #fff;
-}
-
-.layui-layer-imgtit a:hover {
-  color: #fff;
-  text-decoration: underline;
-}
-
-.layui-layer-imgtit em {
-  padding-left: 10px;
-  font-style: normal;
-}
-
-@-webkit-keyframes layer-bounceOut {
-  100% {
-    opacity: 0;
-    -webkit-transform: scale(0.7);
-    transform: scale(0.7);
-  }
-
-  30% {
-    -webkit-transform: scale(1.05);
-    transform: scale(1.05);
-  }
-
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@keyframes layer-bounceOut {
-  100% {
-    opacity: 0;
-    -webkit-transform: scale(0.7);
-    -ms-transform: scale(0.7);
-    transform: scale(0.7);
-  }
-
-  30% {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
-  }
-
-  0% {
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-.layer-anim-close {
-  -webkit-animation-name: layer-bounceOut;
-  animation-name: layer-bounceOut;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -webkit-animation-duration: 0.2s;
-  animation-duration: 0.2s;
-}
-
-@media screen and (max-width: 1100px) {
-  .layui-layer-iframe {
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-}

src/css/layui.css

@@ -1,5 +1,3 @@
-@import url("../font/iconfont.less");
-
 .layui-inline,
 img {
   display: inline-block;

src/font/iconfont.less

@@ -1,753 +0,0 @@
-@font-face {
-    font-family: layui-icon;
-    src: url(./iconfont.eot?t=270);
-    src: url(./iconfont.eot?t=270#iefix) format('embedded-opentype'),
-        url(./iconfont.woff2?t=270) format('woff2'),
-        url(./iconfont.woff?t=270) format('woff'),
-        url(./iconfont.ttf?t=270) format('truetype'),
-        url(./iconfont.svg?t=270#layui-icon) format('svg');
-}
-
-.layui-icon {
-    font-family: layui-icon !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.layui-icon-eye:before {
-    content: '\e695';
-}
-
-.layui-icon-eye-invisible:before {
-    content: '\e696';
-}
-
-.layui-icon-backspace:before {
-    content: '\e694';
-}
-
-.layui-icon-help-circle:before {
-    content: '\e77c';
-}
-
-.layui-icon-tips-fill:before {
-    content: '\eb2e';
-}
-
-.layui-icon-test:before {
-    content: '\e692';
-}
-
-.layui-icon-clear:before {
-    content: '\e788';
-}
-
-.layui-icon-keyboard:before {
-    content: '\e693';
-}
-
-.layui-icon-heart-fill:before {
-    content: '\e68f';
-}
-
-.layui-icon-light:before {
-    content: '\e748';
-}
-
-.layui-icon-music:before {
-    content: '\e690';
-}
-
-.layui-icon-time:before {
-    content: '\e68d';
-}
-
-.layui-icon-ie:before {
-    content: '\e7bb';
-}
-
-.layui-icon-firefox:before {
-    content: '\e686';
-}
-
-.layui-icon-at:before {
-    content: '\e687';
-}
-
-.layui-icon-bluetooth:before {
-    content: '\e689';
-}
-
-.layui-icon-chrome:before {
-    content: '\e68a';
-}
-
-.layui-icon-edge:before {
-    content: '\e68b';
-}
-
-.layui-icon-heart:before {
-    content: '\e68c';
-}
-
-.layui-icon-key:before {
-    content: '\e683';
-}
-
-.layui-icon-android:before {
-    content: '\e684';
-}
-
-.layui-icon-mike:before {
-    content: '\e6dc';
-}
-
-.layui-icon-mute:before {
-    content: '\e685';
-}
-
-.layui-icon-gift:before {
-    content: '\e627';
-}
-
-.layui-icon-windows:before {
-    content: '\e67f';
-}
-
-.layui-icon-ios:before {
-    content: '\e680';
-}
-
-.layui-icon-logout:before {
-    content: '\e682';
-}
-
-.layui-icon-wifi:before {
-    content: '\e7e0';
-}
-
-.layui-icon-rss:before {
-    content: '\e808';
-}
-
-.layui-icon-email:before {
-    content: '\e618';
-}
-
-.layui-icon-reduce-circle:before {
-    content: '\e616';
-}
-
-.layui-icon-transfer:before {
-    content: '\e691';
-}
-
-.layui-icon-service:before {
-    content: '\e626';
-}
-
-.layui-icon-addition:before {
-    content: '\e624';
-}
-
-.layui-icon-subtraction:before {
-    content: '\e67e';
-}
-
-.layui-icon-slider:before {
-    content: '\e714';
-}
-
-.layui-icon-print:before {
-    content: '\e66d';
-}
-
-.layui-icon-export:before {
-    content: '\e67d';
-}
-
-.layui-icon-cols:before {
-    content: '\e610';
-}
-
-.layui-icon-screen-full:before {
-    content: '\e622';
-}
-
-.layui-icon-screen-restore:before {
-    content: '\e758';
-}
-
-.layui-icon-rate-half:before {
-    content: '\e6c9';
-}
-
-.layui-icon-rate-solid:before {
-    content: '\e67a';
-}
-
-.layui-icon-rate:before {
-    content: '\e67b';
-}
-
-.layui-icon-cellphone:before {
-    content: '\e678';
-}
-
-.layui-icon-vercode:before {
-    content: '\e679';
-}
-
-.layui-icon-login-weibo:before {
-    content: '\e675';
-}
-
-.layui-icon-login-qq:before {
-    content: '\e676';
-}
-
-.layui-icon-login-wechat:before {
-    content: '\e677';
-}
-
-.layui-icon-username:before {
-    content: '\e66f';
-}
-
-.layui-icon-password:before {
-    content: '\e673';
-}
-
-.layui-icon-refresh-3:before {
-    content: '\e9aa';
-}
-
-.layui-icon-auz:before {
-    content: '\e672';
-}
-
-.layui-icon-shrink-right:before {
-    content: '\e668';
-}
-
-.layui-icon-spread-left:before {
-    content: '\e66b';
-}
-
-.layui-icon-snowflake:before {
-    content: '\e6b1';
-}
-
-.layui-icon-tips:before {
-    content: '\e702';
-}
-
-.layui-icon-note:before {
-    content: '\e66e';
-}
-
-.layui-icon-senior:before {
-    content: '\e674';
-}
-
-.layui-icon-refresh-1:before {
-    content: '\e666';
-}
-
-.layui-icon-refresh:before {
-    content: '\e669';
-}
-
-.layui-icon-flag:before {
-    content: '\e66c';
-}
-
-.layui-icon-theme:before {
-    content: '\e66a';
-}
-
-.layui-icon-notice:before {
-    content: '\e667';
-}
-
-.layui-icon-console:before {
-    content: '\e665';
-}
-
-.layui-icon-website:before {
-    content: '\e7ae';
-}
-
-.layui-icon-face-surprised:before {
-    content: '\e664';
-}
-
-.layui-icon-set:before {
-    content: '\e716';
-}
-
-.layui-icon-template:before {
-    content: '\e663';
-}
-
-.layui-icon-app:before {
-    content: '\e653';
-}
-
-.layui-icon-template-1:before {
-    content: '\e656';
-}
-
-.layui-icon-home:before {
-    content: '\e68e';
-}
-
-.layui-icon-female:before {
-    content: '\e661';
-}
-
-.layui-icon-male:before {
-    content: '\e662';
-}
-
-.layui-icon-tread:before {
-    content: '\e6c5';
-}
-
-.layui-icon-praise:before {
-    content: '\e6c6';
-}
-
-.layui-icon-rmb:before {
-    content: '\e65e';
-}
-
-.layui-icon-more:before {
-    content: '\e65f';
-}
-
-.layui-icon-camera:before {
-    content: '\e660';
-}
-
-.layui-icon-cart-simple:before {
-    content: '\e698';
-}
-
-.layui-icon-face-cry:before {
-    content: '\e69c';
-}
-
-.layui-icon-face-smile:before {
-    content: '\e6af';
-}
-
-.layui-icon-survey:before {
-    content: '\e6b2';
-}
-
-.layui-icon-read:before {
-    content: '\e705';
-}
-
-.layui-icon-location:before {
-    content: '\e715';
-}
-
-.layui-icon-dollar:before {
-    content: '\e659';
-}
-
-.layui-icon-diamond:before {
-    content: '\e735';
-}
-
-.layui-icon-return:before {
-    content: '\e65c';
-}
-
-.layui-icon-camera-fill:before {
-    content: '\e65d';
-}
-
-.layui-icon-fire:before {
-    content: '\e756';
-}
-
-.layui-icon-more-vertical:before {
-    content: '\e671';
-}
-
-.layui-icon-cart:before {
-    content: '\e657';
-}
-
-.layui-icon-star-fill:before {
-    content: '\e658';
-}
-
-.layui-icon-prev:before {
-    content: '\e65a';
-}
-
-.layui-icon-next:before {
-    content: '\e65b';
-}
-
-.layui-icon-upload:before {
-    content: '\e67c';
-}
-
-.layui-icon-upload-drag:before {
-    content: '\e681';
-}
-
-.layui-icon-user:before {
-    content: '\e770';
-}
-
-.layui-icon-file-b:before {
-    content: '\e655';
-}
-
-.layui-icon-component:before {
-    content: '\e857';
-}
-
-.layui-icon-find-fill:before {
-    content: '\e670';
-}
-
-.layui-icon-loading:before {
-    content: '\e63d';
-}
-
-.layui-icon-loading-1:before {
-    content: '\e63e';
-}
-
-.layui-icon-add-1:before {
-    content: '\e654';
-}
-
-.layui-icon-pause:before {
-    content: '\e651';
-}
-
-.layui-icon-play:before {
-    content: '\e652';
-}
-
-.layui-icon-video:before {
-    content: '\e6ed';
-}
-
-.layui-icon-headset:before {
-    content: '\e6fc';
-}
-
-.layui-icon-voice:before {
-    content: '\e688';
-}
-
-.layui-icon-speaker:before {
-    content: '\e645';
-}
-
-.layui-icon-fonts-del:before {
-    content: '\e64f';
-}
-
-.layui-icon-fonts-html:before {
-    content: '\e64b';
-}
-
-.layui-icon-fonts-code:before {
-    content: '\e64e';
-}
-
-.layui-icon-fonts-strong:before {
-    content: '\e62b';
-}
-
-.layui-icon-unlink:before {
-    content: '\e64d';
-}
-
-.layui-icon-picture:before {
-    content: '\e64a';
-}
-
-.layui-icon-link:before {
-    content: '\e64c';
-}
-
-.layui-icon-face-smile-b:before {
-    content: '\e650';
-}
-
-.layui-icon-align-center:before {
-    content: '\e647';
-}
-
-.layui-icon-align-right:before {
-    content: '\e648';
-}
-
-.layui-icon-align-left:before {
-    content: '\e649';
-}
-
-.layui-icon-fonts-u:before {
-    content: '\e646';
-}
-
-.layui-icon-fonts-i:before {
-    content: '\e644';
-}
-
-.layui-icon-tabs:before {
-    content: '\e62a';
-}
-
-.layui-icon-circle:before {
-    content: '\e63f';
-}
-
-.layui-icon-radio:before {
-    content: '\e643';
-}
-
-.layui-icon-share:before {
-    content: '\e641';
-}
-
-.layui-icon-edit:before {
-    content: '\e642';
-}
-
-.layui-icon-delete:before {
-    content: '\e640';
-}
-
-.layui-icon-engine:before {
-    content: '\e628';
-}
-
-.layui-icon-chart-screen:before {
-    content: '\e629';
-}
-
-.layui-icon-chart:before {
-    content: '\e62c';
-}
-
-.layui-icon-table:before {
-    content: '\e62d';
-}
-
-.layui-icon-tree:before {
-    content: '\e62e';
-}
-
-.layui-icon-upload-circle:before {
-    content: '\e62f';
-}
-
-.layui-icon-templeate-1:before {
-    content: '\e630';
-}
-
-.layui-icon-util:before {
-    content: '\e631';
-}
-
-.layui-icon-layouts:before {
-    content: '\e632';
-}
-
-.layui-icon-prev-circle:before {
-    content: '\e633';
-}
-
-.layui-icon-carousel:before {
-    content: '\e634';
-}
-
-.layui-icon-code-circle:before {
-    content: '\e635';
-}
-
-.layui-icon-water:before {
-    content: '\e636';
-}
-
-.layui-icon-date:before {
-    content: '\e637';
-}
-
-.layui-icon-layer:before {
-    content: '\e638';
-}
-
-.layui-icon-fonts-clear:before {
-    content: '\e639';
-}
-
-.layui-icon-dialogue:before {
-    content: '\e63a';
-}
-
-.layui-icon-cellphone-fine:before {
-    content: '\e63b';
-}
-
-.layui-icon-form:before {
-    content: '\e63c';
-}
-
-.layui-icon-file:before {
-    content: '\e621';
-}
-
-.layui-icon-triangle-r:before {
-    content: '\e623';
-}
-
-.layui-icon-triangle-d:before {
-    content: '\e625';
-}
-
-.layui-icon-set-sm:before {
-    content: '\e620';
-}
-
-.layui-icon-add-circle:before {
-    content: '\e61f';
-}
-
-.layui-icon-layim-download:before {
-    content: '\e61e';
-}
-
-.layui-icon-layim-uploadfile:before {
-    content: '\e61d';
-}
-
-.layui-icon-404:before {
-    content: '\e61c';
-}
-
-.layui-icon-about:before {
-    content: '\e60b';
-}
-
-.layui-icon-layim-theme:before {
-    content: '\e61b';
-}
-
-.layui-icon-down:before {
-    content: '\e61a';
-}
-
-.layui-icon-up:before {
-    content: '\e619';
-}
-
-.layui-icon-circle-dot:before {
-    content: '\e617';
-}
-
-.layui-icon-set-fill:before {
-    content: '\e614';
-}
-
-.layui-icon-search:before {
-    content: '\e615';
-}
-
-.layui-icon-friends:before {
-    content: '\e612';
-}
-
-.layui-icon-group:before {
-    content: '\e613';
-}
-
-.layui-icon-reply-fill:before {
-    content: '\e611';
-}
-
-.layui-icon-menu-fill:before {
-    content: '\e60f';
-}
-
-.layui-icon-face-smile-fine:before {
-    content: '\e60c';
-}
-
-.layui-icon-picture-fine:before {
-    content: '\e60d';
-}
-
-.layui-icon-log:before {
-    content: '\e60e';
-}
-
-.layui-icon-list:before {
-    content: '\e60a';
-}
-
-.layui-icon-release:before {
-    content: '\e609';
-}
-
-.layui-icon-add-circle-fine:before {
-    content: '\e608';
-}
-
-.layui-icon-ok:before {
-    content: '\e605';
-}
-
-.layui-icon-help:before {
-    content: '\e607';
-}
-
-.layui-icon-chat:before {
-    content: '\e606';
-}
-
-.layui-icon-top:before {
-    content: '\e604';
-}
-
-.layui-icon-right:before {
-    content: '\e602';
-}
-
-.layui-icon-left:before {
-    content: '\e603';
-}
-
-.layui-icon-star:before {
-    content: '\e600';
-}
-
-.layui-icon-download-circle:before {
-    content: '\e601';
-}
-
-.layui-icon-close:before {
-    content: '\1006';
-}
-
-.layui-icon-close-fill:before {
-    content: '\1007';
-}
-
-.layui-icon-ok-circle:before {
-    content: '\1005';
-}

src/font/iconfont.ts

@@ -1,170 +0,0 @@
-export default [
-  { name: '实心', class: 'layui-icon-heart-fill' },
-  { name: '空心', class: 'layui-icon-heart' },
-  { name: '亮度/晴', class: 'layui-icon-light' },
-  { name: '时间/历史', class: 'layui-icon-time' },
-  { name: '蓝牙', class: 'layui-icon-bluetooth' },
-  { name: '@艾特', class: 'layui-icon-at' },
-  { name: '静音', class: 'layui-icon-mute' },
-  { name: '录音/麦克风', class: 'layui-icon-mike' },
-  { name: '密钥/钥匙', class: 'layui-icon-key' },
-  { name: '礼物/活动', class: 'layui-icon-gift' },
-  { name: '邮箱', class: 'layui-icon-email' },
-  { name: 'RSS', class: 'layui-icon-rss' },
-  { name: 'WiFi', class: 'layui-icon-wifi' },
-  { name: '退出/注销', class: 'layui-icon-logout' },
-  { name: 'Android 安卓', class: 'layui-icon-android' },
-  { name: 'Apple IOS 苹果', class: 'layui-icon-ios' },
-  { name: 'Windows', class: 'layui-icon-windows' },
-  { name: '穿梭框', class: 'layui-icon-transfer' },
-  { name: '客服', class: 'layui-icon-service' },
-  { name: '减', class: 'layui-icon-subtraction' },
-  { name: '加', class: 'layui-icon-addition' },
-  { name: '滑块', class: 'layui-icon-slider' },
-  { name: '打印', class: 'layui-icon-print' },
-  { name: '导出', class: 'layui-icon-export' },
-  { name: '列', class: 'layui-icon-cols' },
-  { name: '退出全屏', class: 'layui-icon-screen-restore' },
-  { name: '全屏', class: 'layui-icon-screen-full' },
-  { name: '半星', class: 'layui-icon-rate-half' },
-  { name: '星星-空心', class: 'layui-icon-rate' },
-  { name: '星星-实心', class: 'layui-icon-rate-solid' },
-  { name: '手机', class: 'layui-icon-cellphone' },
-  { name: '验证码', class: 'layui-icon-vercode' },
-  { name: '微信', class: 'layui-icon-login-wechat' },
-  { name: 'QQ', class: 'layui-icon-login-qq' },
-  { name: '微博', class: 'layui-icon-login-weibo' },
-  { name: '密码', class: 'layui-icon-password' },
-  { name: '用户名', class: 'layui-icon-username' },
-  { name: '刷新-粗', class: 'layui-icon-refresh-3' },
-  { name: '授权', class: 'layui-icon-auz' },
-  { name: '左向右伸缩菜单', class: 'layui-icon-spread-left' },
-  { name: '右向左伸缩菜单', class: 'layui-icon-shrink-right' },
-  { name: '雪花', class: 'layui-icon-snowflake' },
-  { name: '提示说明', class: 'layui-icon-tips' },
-  { name: '便签', class: 'layui-icon-note' },
-  { name: '主页', class: 'layui-icon-home' },
-  { name: '高级', class: 'layui-icon-senior' },
-  { name: '刷新', class: 'layui-icon-refresh' },
-  { name: '刷新', class: 'layui-icon-refresh-1' },
-  { name: '旗帜', class: 'layui-icon-flag' },
-  { name: '主题', class: 'layui-icon-theme' },
-  { name: '消息-通知', class: 'layui-icon-notice' },
-  { name: '网站', class: 'layui-icon-website' },
-  { name: '控制台', class: 'layui-icon-console' },
-  { name: '表情-惊讶', class: 'layui-icon-face-surprised' },
-  { name: '设置-空心', class: 'layui-icon-set' },
-  { name: '模板', class: 'layui-icon-template-1' },
-  { name: '应用', class: 'layui-icon-app' },
-  { name: '模板', class: 'layui-icon-template' },
-  { name: '赞', class: 'layui-icon-praise' },
-  { name: '踩', class: 'layui-icon-tread' },
-  { name: '男', class: 'layui-icon-male' },
-  { name: '女', class: 'layui-icon-female' },
-  { name: '相机-空心', class: 'layui-icon-camera' },
-  { name: '相机-实心', class: 'layui-icon-camera-fill' },
-  { name: '菜单-水平', class: 'layui-icon-more' },
-  { name: '菜单-垂直', class: 'layui-icon-more-vertical' },
-  { name: '金额-人民币', class: 'layui-icon-rmb' },
-  { name: '金额-美元', class: 'layui-icon-dollar' },
-  { name: '钻石-等级', class: 'layui-icon-diamond' },
-  { name: '火', class: 'layui-icon-fire' },
-  { name: '返回', class: 'layui-icon-return' },
-  { name: '位置-地图', class: 'layui-icon-location' },
-  { name: '办公-阅读', class: 'layui-icon-read' },
-  { name: '调查', class: 'layui-icon-survey' },
-  { name: '表情-微笑', class: 'layui-icon-face-smile' },
-  { name: '表情-哭泣', class: 'layui-icon-face-cry' },
-  { name: '购物车', class: 'layui-icon-cart-simple' },
-  { name: '购物车', class: 'layui-icon-cart' },
-  { name: '下一页', class: 'layui-icon-next' },
-  { name: '上一页', class: 'layui-icon-prev' },
-  { name: '上传-空心-拖拽', class: 'layui-icon-upload-drag' },
-  { name: '上传-实心', class: 'layui-icon-upload' },
-  { name: '下载-圆圈', class: 'layui-icon-download-circle' },
-  { name: '组件', class: 'layui-icon-component' },
-  { name: '文件-粗', class: 'layui-icon-file-b' },
-  { name: '用户', class: 'layui-icon-user' },
-  { name: '发现-实心', class: 'layui-icon-find-fill' },
-  { name: 'loading', class: 'layui-icon-loading' },
-  { name: 'loading', class: 'layui-icon-loading-1' },
-  { name: '添加', class: 'layui-icon-add-1' },
-  { name: '播放', class: 'layui-icon-play' },
-  { name: '暂停', class: 'layui-icon-pause' },
-  { name: '音频-耳机', class: 'layui-icon-headset' },
-  { name: '视频', class: 'layui-icon-video' },
-  { name: '语音-声音', class: 'layui-icon-voice' },
-  { name: '消息-通知-喇叭', class: 'layui-icon-speaker' },
-  { name: '删除线', class: 'layui-icon-fonts-del' },
-  { name: '代码', class: 'layui-icon-fonts-code' },
-  { name: 'HTML', class: 'layui-icon-fonts-html' },
-  { name: '字体加粗', class: 'layui-icon-fonts-strong' },
-  { name: '删除链接', class: 'layui-icon-unlink' },
-  { name: '图片', class: 'layui-icon-picture' },
-  { name: '链接', class: 'layui-icon-link' },
-  { name: '表情-笑-粗', class: 'layui-icon-face-smile-b' },
-  { name: '左对齐', class: 'layui-icon-align-left' },
-  { name: '右对齐', class: 'layui-icon-align-right' },
-  { name: '居中对齐', class: 'layui-icon-align-center' },
-  { name: '字体-下划线', class: 'layui-icon-fonts-u' },
-  { name: '字体-斜体', class: 'layui-icon-fonts-i' },
-  { name: 'Tabs 选项卡', class: 'layui-icon-tabs' },
-  { name: '单选框-选中', class: 'layui-icon-radio' },
-  { name: '单选框-候选', class: 'layui-icon-circle' },
-  { name: '编辑', class: 'layui-icon-edit' },
-  { name: '分享', class: 'layui-icon-share' },
-  { name: '删除', class: 'layui-icon-delete' },
-  { name: '表单', class: 'layui-icon-form' },
-  { name: '手机-细体', class: 'layui-icon-cellphone-fine' },
-  { name: '聊天 对话 沟通', class: 'layui-icon-dialogue' },
-  { name: '文字格式化', class: 'layui-icon-fonts-clear' },
-  { name: '窗口', class: 'layui-icon-layer' },
-  { name: '日期', class: 'layui-icon-date' },
-  { name: '水 下雨', class: 'layui-icon-water' },
-  { name: '代码-圆圈', class: 'layui-icon-code-circle' },
-  { name: '轮播组图', class: 'layui-icon-carousel' },
-  { name: '翻页', class: 'layui-icon-prev-circle' },
-  { name: '布局', class: 'layui-icon-layouts' },
-  { name: '工具', class: 'layui-icon-util' },
-  { name: '选择模板', class: 'layui-icon-templeate-1' },
-  { name: '上传-圆圈', class: 'layui-icon-upload-circle' },
-  { name: '树', class: 'layui-icon-tree' },
-  { name: '表格', class: 'layui-icon-table' },
-  { name: '图表', class: 'layui-icon-chart' },
-  { name: '图标 报表 屏幕', class: 'layui-icon-chart-screen' },
-  { name: '引擎', class: 'layui-icon-engine' },
-  { name: '下三角', class: 'layui-icon-triangle-d' },
-  { name: '右三角', class: 'layui-icon-triangle-r' },
-  { name: '文件', class: 'layui-icon-file' },
-  { name: '设置-小型', class: 'layui-icon-set-sm' },
-  { name: '减少-圆圈', class: 'layui-icon-reduce-circle' },
-  { name: '添加-圆圈', class: 'layui-icon-add-circle' },
-  { name: '404', class: 'layui-icon-404' },
-  { name: '关于', class: 'layui-icon-about' },
-  { name: '箭头 向上', class: 'layui-icon-up' },
-  { name: '箭头 向下', class: 'layui-icon-down' },
-  { name: '箭头 向左', class: 'layui-icon-left' },
-  { name: '箭头 向右', class: 'layui-icon-right' },
-  { name: '圆点', class: 'layui-icon-circle-dot' },
-  { name: '搜索', class: 'layui-icon-search' },
-  { name: '设置-实心', class: 'layui-icon-set-fill' },
-  { name: '群组', class: 'layui-icon-group' },
-  { name: '好友', class: 'layui-icon-friends' },
-  { name: '回复 评论 实心', class: 'layui-icon-reply-fill' },
-  { name: '菜单 隐身 实心', class: 'layui-icon-menu-fill' },
-  { name: '记录', class: 'layui-icon-log' },
-  { name: '图片-细体', class: 'layui-icon-picture-fine' },
-  { name: '表情-笑-细体', class: 'layui-icon-face-smile-fine' },
-  { name: '列表', class: 'layui-icon-list' },
-  { name: '发布 纸飞机', class: 'layui-icon-release' },
-  { name: '对 OK', class: 'layui-icon-ok' },
-  { name: '帮助', class: 'layui-icon-help' },
-  { name: '客服', class: 'layui-icon-chat' },
-  { name: 'top 置顶', class: 'layui-icon-top' },
-  { name: '收藏-空心', class: 'layui-icon-star' },
-  { name: '收藏-实心', class: 'layui-icon-star-fill' },
-  { name: '关闭-实心', class: 'layui-icon-close-fill' },
-  { name: '关闭-空心', class: 'layui-icon-close' },
-  { name: '正确', class: 'layui-icon-ok-circle' },
-  { name: '添加-圆圈-细体', class: 'layui-icon-add-circle-fine' },
-]

src/index.ts

@@ -1,8 +1,13 @@
 import type { App } from 'vue'
 import type { IDefineComponent, InstallOptions } from './module/type/index'
 
-import './css/layui.css'
+import './css/layui.css';
-import './css/layer.css'
+import '@layui/layer-vue/lib/layer.css';
+import '@layui/icons-vue/lib/index.css';
+
+import { layer } from '@layui/layer-vue'
+
+import LayModal from './module/layer/modal/index'
 import LayAvatar from './module/avatar/index'
 import LayRadio from './module/radio/index'
 import LayButton from './module/button/index'
@@ -59,7 +64,6 @@ import LaySlider from './module/slider/index'
 import LayCarousel from './module/carousel/index'
 import LayCarouselItem from './module/carouselItem/index'
 import LayColorPicker from './module/colorPicker/index'
-import LayLayer from './module/layer/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -118,7 +122,7 @@ const components: Record<string, IDefineComponent> = {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayLayer,
+  LayModal,
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -188,8 +192,9 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayLayer,
+  LayModal,
   install,
+  layer
 }
 
 export default { install }

src/module/button/index.vue

@@ -53,7 +53,7 @@ const classes = computed(() => {
       v-if="loading"
       class="
         layui-icon
-        layui-icon-loading-1
+        layui-icon-loading-one
         layui-anim
         layui-anim-rotate
         layui-anim-loop

src/module/icon/index.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import Component from './index.vue'
+import { LayIcon as Component } from '@layui/icons-vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {

src/module/icon/index.vue

@@ -1,31 +0,0 @@
-<script lang="ts">
-export default {
-  name: "LayIcon",
-};
-</script>
-
-<script setup lang="ts">
-import { computed, defineProps } from "vue";
-
-export interface LayIconProps {
-  prefix?: string;
-  color?: string;
-  size?: string;
-  type?: string;
-}
-
-const props = withDefaults(defineProps<LayIconProps>(), {
-  prefix: "layui-icon",
-});
-
-const styles = computed(() => {
-  return {
-    color: props.color,
-    fontSize: props.size,
-  };
-});
-</script>
-
-<template>
-  <i :class="[prefix, type]" :style="styles" />
-</template>

src/module/iconPicker/index.vue

@@ -83,7 +83,7 @@
 
 <script setup name="LayIconPicker" lang="ts">
 import { defineProps, Ref, ref } from 'vue'
-import icons from "../../font/iconfont"
+import { LayIconList as icons } from "@layui/icons-vue"
 
 const props = withDefaults(
   defineProps<{

src/module/layer/index.ts

@@ -1,9 +0,0 @@
-import type { App } from 'vue'
-import Component from './index.vue'
-import type { IDefineComponent } from '../type/index'
-
-Component.install = (app: App) => {
-  app.component(Component.name || 'LayLayer', Component)
-}
-
-export default Component as IDefineComponent

src/module/layer/index.vue

@@ -1,220 +0,0 @@
-<script lang="ts">
-export default {
-  name: "LayLayer",
-};
-</script>
-
-<script lang="ts" setup>
-import { onMounted, onUpdated, ref, useSlots, watch } from "vue";
-import useMove from "../../hooks/useMove";
-import { guid } from "../../tools/guidUtil";
-
-const slot = useSlots();
-
-onMounted(() => {
-  moveHandle();
-});
-
-onUpdated(() => {
-  moveHandle();
-});
-
-export interface LayLayerProps {
-  id?: string;
-  zIndex?: number;
-  title?: string;
-  offset?: string[];
-  width?: string;
-  height?: string;
-  visible?: boolean | string;
-  maxmin?: boolean | string;
-  btn?: Record<string, unknown>[];
-  move?: boolean | string;
-  type?: number;
-  content?: string;
-  shade?: boolean | string;
-  shadeClose?: boolean | string;
-  closeBtn?: boolean | string;
-  btnAlign?: string;
-  anim?: number | boolean;
-  isOutAnim?: boolean;
-}
-
-const props = withDefaults(defineProps<LayLayerProps>(), {
-  id: "layer-" + guid(),
-  zIndex: 99999999,
-  title: "标题",
-  offset: () => ["50%", "50%"],
-  width: "390px",
-  height: "330px",
-  visible: true,
-  maxmin: false,
-  move: false,
-  type: 1,
-  btn: () => [],
-  shade: false,
-  shadeClose: true,
-  closeBtn: true,
-  btnAlign: "l",
-  anim: 0,
-  content: "",
-  isOutAnim: true
-});
-
-const top = ref(props.offset[0].indexOf('%') != -1 ? "calc(" + props.offset[0] + " - (" + props.height + "/2 ))" : props.offset[0]);
-const left = ref(props.offset[1].indexOf('%') != -1 ? "calc(" + props.offset[1] + " - (" + props.width  + "/2 ))" : props.offset[1]);
-const width = ref(props.width);
-const height = ref(props.height);
-const max = ref(false);
-
-const contentHeight = ref(
-  props.btn.length > 0
-    ? "calc(" + height.value + " - 100px)"
-    : "calc(" + height.value + " - 50px)"
-);
-
-watch(max, function () {
-  if (max.value) {
-    contentHeight.value =
-      props.btn.length > 0 ? "calc(100% - 100px)" : "calc(100% - 50px)";
-  } else {
-    contentHeight.value =
-      props.btn.length > 0
-        ? "calc(" + height.value + " - 100px)"
-        : "calc(" + height.value + " - 50px)";
-  }
-});
-
-const emit = defineEmits(["close", "update:visible"]);
-
-const moveHandle = function () {
-  if (props.move) {
-    const el = document.getElementById(props.id);
-    if (el != null) {
-      useMove(el);
-    }
-  }
-};
-
-const shadeHandle = function () {
-  if (props.shadeClose) {
-    emit("close");
-    emit("update:visible", false);
-  }
-};
-
-const closeHandle = function () {
-  emit("close");
-  emit("update:visible", false);
-};
-
-const minHandle = function () {
-  emit("close");
-  emit("update:visible", false);
-};
-
-const maxBeforeTop = ref()
-const maxBeforeLeft = ref()
-
-const maxHandle = function () {
-  if (max.value) {
-    width.value = props.width;
-    height.value = props.height;
-    top.value = maxBeforeTop.value;
-    left.value = maxBeforeLeft.value;
-  } else {
-    let dom = document.getElementById(props.id);
-    maxBeforeTop.value = dom?.style.top
-    maxBeforeLeft.value = dom?.style.left
-    width.value = "100%";
-    height.value = "100%";
-    top.value = "0px";
-    left.value = "0px";
-  }
-  max.value = !max.value;
-};
-</script>
-
-<template>
-  <!-- 遮盖 -->
-  <div
-    v-if="visible && shade"
-    class="layui-layer-shade"
-    style="background-color: rgb(0, 0, 0); opacity: 0.1"
-    :style="{ zIndex: zIndex }"
-    @click="shadeHandle"
-  ></div>
-  <!-- 元素 -->
-  <transition :leave-to-class="isOutAnim ? 'layer-anim-close':''">
-    <div
-      v-if="visible"
-      :id="id"
-      :class="[
-        anim!== false ? 'layer-anim layer-anim-0' + anim : '',
-        type === 1 ? 'layui-layer-dialog' : '',
-        type === 2 ? 'layui-layer-iframe' : '',
-      ]"
-      class="layui-layer layui-layer-border"
-      :style="{
-        top: top,
-        left: left,
-        width: width,
-        height: height,
-        zIndex: zIndex,
-      }"
-    >
-      <div class="layui-layer-title" style="cursor: move">
-        {{ title }}
-      </div>
-      <div class="layui-layer-content" :style="{ height: contentHeight }">
-        <div v-if="type === 1" style="height: 100%">
-          <slot v-if="slot.default"></slot>
-          <template v-else>
-            {{ content }}
-          </template>
-        </div>
-        <iframe
-          v-if="type === 2"
-          scrolling="auto"
-          allowtransparency="true"
-          frameborder="0"
-          :src="content"
-          style="width: 100%; height: 100%"
-        ></iframe>
-      </div>
-      <span class="layui-layer-setwin"
-        ><a
-          v-if="maxmin"
-          class="layui-layer-min"
-          href="javascript:;"
-          @click="minHandle"
-          ><cite></cite></a
-        ><a
-          v-if="maxmin"
-          class="layui-layer-ico layui-layer-max"
-          :class="[max ? 'layui-layer-maxmin' : '']"
-          href="javascript:;"
-          @click="maxHandle"
-        ></a>
-        <a
-          v-if="closeBtn"
-          class="layui-layer-ico layui-layer-close layui-layer-close1"
-          href="javascript:;"
-          @click="closeHandle"
-        ></a
-      ></span>
-      <div
-        v-if="btn && btn.length > 0"
-        class="layui-layer-btn"
-        :class="['layui-layer-btn-' + btnAlign]"
-      >
-        <template v-for="(b, index) in btn" :key="index">
-          <a :class="['layui-layer-btn' + index]" @click="b.callback">{{
-            b.text
-          }}</a>
-        </template>
-      </div>
-      <span class="layui-layer-resize"></span>
-    </div>
-  </transition>
-</template>

src/module/layer/modal/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import { LayModal } from '@layui/layer-vue';
+import type { IDefineComponent } from '../../type/index'
+
+LayModal.install = (app: App) => {
+  app.component(LayModal.name || 'LayModal', LayModal)
+}
+
+export default LayModal as IDefineComponent

src/module/table/index.vue

@@ -14,6 +14,9 @@ import {
   defineEmits,
 } from "vue";
 import { Recordable } from "../type";
+import { guid } from "../../tools/guidUtil";
+
+const tableId = guid();
 
 const props = withDefaults(
   defineProps<{
@@ -91,7 +94,7 @@ const rowDoubleClick = function (data: any) {
 };
 
 const print = function () {
-  let subOutputRankPrint = document.getElementById("lay-table") as HTMLElement;
+  let subOutputRankPrint = document.getElementById(tableId) as HTMLElement;
   let newContent = subOutputRankPrint.innerHTML;
   let oldContent = document.body.innerHTML;
   document.body.innerHTML = newContent;
@@ -102,7 +105,7 @@ const print = function () {
 </script>
 
 <template>
-  <div id="lay-table">
+  <div :id="tableId">
     <table class="layui-hide" lay-filter="test" />
     <div
       class="layui-form layui-border-box layui-table-view layui-table-view-1"

vite.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
           const name = id.replace(/^@/, '').split('/')[0]
           return camelize(name)
         },
-        assetFileNames: 'layui.css',
+        assetFileNames: 'index.css',
       },
       plugins: [
         babel({