slider
This commit is contained in:
halo
commit
ada270da87
11
README.md
11
README.md
@ -1,6 +1,6 @@
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="http://www.layui.com">
|
<a href="http://www.layui.com">
|
||||||
<img src="https://images.gitee.com/uploads/images/2021/1213/173638_d6911839_4835367.png" alt="layui" width="360">
|
<img src="https://images.gitee.com/uploads/images/2022/0104/135039_3f41c467_4835367.png" alt="layui" width="360">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@ -70,18 +70,19 @@ createApp(App).use(Layui).mount('#app')
|
|||||||
|
|
||||||
### 使用趋势
|
### 使用趋势
|
||||||
|
|
||||||
[](https://giteye.net/chart/5ZQ67WWS)
|
[](https://giteye.net/chart/5ZQ67WWS)
|
||||||
|
|
||||||
### 贡献代码
|
### 贡献代码
|
||||||
|
|
||||||
> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？
|
> 在人的尺度里，世界既无始也无终，唯一的信仰是，总有人认得你站在暴风雪里的样子。
|
||||||
> 好的，姑且就这样认为吧。
|
|
||||||
|
|
||||||
[](https://giteye.net/chart/DBC9Z6HQ)
|
[](https://giteye.net/chart/DBC9Z6HQ)
|
||||||
|
|
||||||
## 交流群
|
## 交流群
|
||||||
|
|
||||||
|
| QQ | 微信 |
|
||||||
|
|----|----|
|
||||||
|
| <img src="https://images.gitee.com/uploads/images/2021/1008/090410_8b349271_4835367.png" width="180px" /> | <img src="https://images.gitee.com/uploads/images/2022/0103/195713_7e626723_4835367.png" width="180px" /> |
|
||||||
|
|
||||||
## 相关
|
## 相关
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
|
|
||||||
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
|
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 主色调
|
::: title 主色调
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 普通容器
|
::: title 普通容器
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 基础使用
|
||||||
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 基础使用
|
||||||
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -9,9 +12,13 @@
|
|||||||
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
||||||
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
||||||
<lay-menu-item title="目录" id="7">
|
<lay-menu-item title="目录" id="7">
|
||||||
<lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item>
|
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
|
||||||
<lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
|
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
|
||||||
<lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
|
<lay-menu-item title="菜单三" id="10">
|
||||||
|
<lay-menu-item title="菜单一" id="11"></lay-menu-item>
|
||||||
|
<lay-menu-item title="菜单二" id="12"></lay-menu-item>
|
||||||
|
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
|
||||||
|
</lay-menu-item>
|
||||||
</lay-menu-item>
|
</lay-menu-item>
|
||||||
</lay-menu>
|
</lay-menu>
|
||||||
</template>
|
</template>
|
||||||
@ -49,9 +56,13 @@ export default {
|
|||||||
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
||||||
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
||||||
<lay-menu-item title="目录" id="7">
|
<lay-menu-item title="目录" id="7">
|
||||||
<lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item>
|
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
|
||||||
<lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
|
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
|
||||||
<lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
|
<lay-menu-item title="菜单三" id="10">
|
||||||
|
<lay-menu-item title="菜单一" id="11"></lay-menu-item>
|
||||||
|
<lay-menu-item title="菜单二" id="12"></lay-menu-item>
|
||||||
|
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
|
||||||
|
</lay-menu-item>
|
||||||
</lay-menu-item>
|
</lay-menu-item>
|
||||||
</lay-menu>
|
</lay-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基本使用
|
::: title 基本使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -5,9 +8,9 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
|
<lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
|
||||||
<lay-modal title="基础使用" v-model="visible1">
|
<lay-layer title="基础使用" v-model="visible1">
|
||||||
内容
|
内容
|
||||||
</lay-modal>
|
</lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -38,9 +41,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
|
<lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
|
||||||
<lay-modal title="允许拖动" v-model="visible2">
|
<lay-layer title="允许拖动" v-model="visible2">
|
||||||
内容
|
内容
|
||||||
</lay-modal>
|
</lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -71,9 +74,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
|
<lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
|
||||||
<lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
|
<lay-layer title="放大缩小" v-model="visible3" move="true" maxmin="true">
|
||||||
内容
|
内容
|
||||||
</lay-modal>
|
</lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -104,9 +107,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
|
<lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
|
||||||
<lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
|
<lay-layer title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
|
||||||
内容
|
内容
|
||||||
</lay-modal>
|
</lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -137,9 +140,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
|
<lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
|
||||||
<lay-modal title="拉伸尺寸" resize="true" v-model="visible8" move="true">
|
<lay-layer title="拉伸尺寸" resize="true" v-model="visible8" move="true">
|
||||||
内容
|
内容
|
||||||
</lay-modal>
|
</lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -170,7 +173,7 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
|
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
|
||||||
<lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
|
<lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -203,9 +206,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
|
<lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
|
||||||
<lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
|
<lay-layer title="定义操作" v-model="visible6" move="true" :btn="btn6">
|
||||||
内容
|
内容
|
||||||
</lay-modal>
|
</lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -241,9 +244,9 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
|
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
|
||||||
<lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
|
<lay-layer title="开启遮盖" move="true" shade="false" v-model="visible7">
|
||||||
内容
|
内容
|
||||||
</lay-modal>
|
</lay-layer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -316,7 +319,7 @@ export default {
|
|||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 备注 | 描述 | 默认值 |
|
| 备注 | 描述 | 默认值 |
|
||||||
| --------------- | ------------- | -------------------------- |
|
| --------------- | ------------- | --------------------------|
|
||||||
| title | 标题 | -- |
|
| title | 标题 | -- |
|
||||||
| move | 允许拖拽 | `false` |
|
| move | 允许拖拽 | `false` |
|
||||||
| maxmin | 最小化 最大化 | `false` |
|
| maxmin | 最小化 最大化 | `false` |
|
||||||
@ -326,6 +329,7 @@ export default {
|
|||||||
| content | 内容 | -- |
|
| content | 内容 | -- |
|
||||||
| shade | 开启遮盖 | -- |
|
| shade | 开启遮盖 | -- |
|
||||||
| shadeClose | 遮盖点击关闭 | -- |
|
| shadeClose | 遮盖点击关闭 | -- |
|
||||||
|
| shadeOpacity | 遮盖层透明度 | `0.1` |
|
||||||
| zIndex | 自定义层级 | -- |
|
| zIndex | 自定义层级 | -- |
|
||||||
| type | 类型 | `1: component` `2: iframe` |
|
| type | 类型 | `1: component` `2: iframe` |
|
||||||
| closeBtn | 显示关闭 | true |
|
| closeBtn | 显示关闭 | true |
|
||||||
@ -333,6 +337,8 @@ export default {
|
|||||||
| btnAlign | 按钮布局 | `l` `r` `c` |
|
| btnAlign | 按钮布局 | `l` `r` `c` |
|
||||||
| anim | 入场动画 | `0` `-` `6` |
|
| anim | 入场动画 | `0` `-` `6` |
|
||||||
| isOutAnim | 关闭动画 | `true` `false` |
|
| isOutAnim | 关闭动画 | `true` `false` |
|
||||||
|
| success | 显示回调 | -- |
|
||||||
|
| end | 关闭回调 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
112
example/docs/zh-CN/components/skeleton.md
Normal file
112
example/docs/zh-CN/components/skeleton.md
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 基础使用
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||||
|
</div>
|
||||||
|
<lay-skeleton :rows="4" :loading="loading" animated>
|
||||||
|
<p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||||
|
<p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||||
|
<p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||||
|
<p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||||
|
</lay-skeleton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 图片
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||||
|
</div>
|
||||||
|
<lay-skeleton :loading="loading" animated>
|
||||||
|
<template #skeleton>
|
||||||
|
<lay-skeleton-item type="image"/>
|
||||||
|
<lay-skeleton-item type="p" style="width: 240px"/>
|
||||||
|
</template>
|
||||||
|
<div class="img-content">
|
||||||
|
<img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
|
||||||
|
<p style="margin-top: 18px">layui-vue 发展史....</p>
|
||||||
|
</div>
|
||||||
|
</lay-skeleton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.img-content {
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 骨架屏属性
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 | 可选值 |
|
||||||
|
| ----- | ---- | ------ |
|
||||||
|
| loading | 是否显示 | `true` `false` |
|
||||||
|
| rows | 显示行数 | -- |
|
||||||
|
| animated | 是否动画 | `true` `false` |
|
||||||
|
| type | 展示类型 | `p` `image` |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 骨架屏插槽
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 插槽 | 描述 | 可选值 |
|
||||||
|
| ------ | -------- | ------ |
|
||||||
|
| default| 默认插槽 | -- |
|
||||||
|
| skeleton | 自定义插槽 | -- |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: comment
|
||||||
|
:::
|
||||||
384
example/docs/zh-CN/components/step.md
Normal file
384
example/docs/zh-CN/components/step.md
Normal file
@ -0,0 +1,384 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 基础使用
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<lay-step :active="active">
|
||||||
|
<lay-step-item></lay-step-item>
|
||||||
|
<lay-step-item></lay-step-item>
|
||||||
|
<lay-step-item></lay-step-item>
|
||||||
|
<lay-step-item></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||||
|
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const nexts = () => {
|
||||||
|
if (active.value++ >=3) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 带标题带描述
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<lay-step :active="active">
|
||||||
|
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||||
|
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||||
|
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||||
|
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const nexts = () => {
|
||||||
|
if (active.value++ >=3) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 设置当前选中状态
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<lay-step :active="active" current-status="primary">
|
||||||
|
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||||
|
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||||
|
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||||
|
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const next = () => {
|
||||||
|
if (active.value++ >=2) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 设置第几步状态
|
||||||
|
:::
|
||||||
|
|
||||||
|
这里设置`status` 会覆盖掉`current-status`
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<lay-step :active="active" current-status="warning">
|
||||||
|
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||||
|
<lay-step-item status="fail" title="Second" content="Second step"></lay-step-item>
|
||||||
|
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||||
|
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||||
|
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const nexts = () => {
|
||||||
|
if (active.value++ >=3) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 自定义宽度
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<lay-step :active="active" space="200px">
|
||||||
|
<lay-step-item title="First" content="First step"></lay-step-item>
|
||||||
|
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||||
|
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||||
|
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const next = () => {
|
||||||
|
if (active.value++ >=2) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 自定义图标
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<lay-step :active="active">
|
||||||
|
<lay-step-item title="First" content="First step" icon="layui-icon-release"></lay-step-item>
|
||||||
|
<lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item>
|
||||||
|
<lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||||
|
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const next = () => {
|
||||||
|
if (active.value++ >=2) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 居中
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<lay-step :active="active" center>
|
||||||
|
<lay-step-item title="First" content="First step">
|
||||||
|
<template #pace>
|
||||||
|
<lay-icon type="layui-icon-ok"></lay-icon>
|
||||||
|
</template>
|
||||||
|
</lay-step-item>
|
||||||
|
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||||
|
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||||
|
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const next = () => {
|
||||||
|
if (active.value++ >=2) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 垂直
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="height: 300px">
|
||||||
|
<lay-step :active="active" direction="vertical">
|
||||||
|
<lay-step-item title="First" content="First step">
|
||||||
|
<template #pace>
|
||||||
|
<lay-icon type="layui-icon-ok"></lay-icon>
|
||||||
|
</template>
|
||||||
|
</lay-step-item>
|
||||||
|
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||||
|
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||||
|
</lay-step>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const active = ref(-1);
|
||||||
|
const next = () => {
|
||||||
|
if (active.value++ >=2) active.value = 0
|
||||||
|
};
|
||||||
|
const previous = () => {
|
||||||
|
if (active.value-- ===0) active.value = 0
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
active
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title step步骤条属性
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||||
|
| ----- | ---- | ------ | ---| ---|
|
||||||
|
| active | 第几步 | number |-| 0 |
|
||||||
|
| center | 居中布局 | boolean | `true` `false` | `false` |
|
||||||
|
| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
|
||||||
|
| space | 宽度 | string | - | `auto` |
|
||||||
|
| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `primary` |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: title stepItem步骤条属性
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 | 类型 |可选值 | 默认值|
|
||||||
|
| ----- | ---- | ------ | ---| ---|
|
||||||
|
| title| 标题 | string | - | - |
|
||||||
|
| content | 内容描述 | string | - | -|
|
||||||
|
| icon | 图标 | string | - | -|
|
||||||
|
| status | 状态 | string | `primary` `success` `fail` `warning` | `primary`|
|
||||||
|
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title stepItem步骤条slot
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 |
|
||||||
|
| ----- | ---- |
|
||||||
|
| pace | 圆圈内容自定义 |
|
||||||
|
| default | 内容区域自定义 |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: comment
|
||||||
|
:::
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -72,7 +75,40 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title timeline-item attributes
|
|
||||||
|
::: title 节点插槽
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-timeline>
|
||||||
|
<lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
|
||||||
|
<lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
|
||||||
|
<lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
|
||||||
|
<lay-timeline-item title="2015年，layui 孵化" simple>
|
||||||
|
<template #dot>
|
||||||
|
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon>
|
||||||
|
</template>
|
||||||
|
</lay-timeline-item>
|
||||||
|
</lay-timeline>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title Timeline Item 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: table
|
::: table
|
||||||
@ -84,5 +120,16 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title Timeline Item 属性
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| | | |
|
||||||
|
| ------ | -------- | --- |
|
||||||
|
| dot | 节点 | -- |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: comment
|
::: comment
|
||||||
:::
|
:::
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
::: anchor
|
||||||
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -11,6 +11,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<lay-timeline>
|
<lay-timeline>
|
||||||
<lay-timeline-item title="0.3.x">
|
<lay-timeline-item title="0.3.x">
|
||||||
|
<ul>
|
||||||
|
<a name="0-3-3"> </a>
|
||||||
|
<li>
|
||||||
|
<h3>0.3.3 <span class="layui-badge-rim">2022-01-03</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>[新增] setup 步骤条组件。</li>
|
||||||
|
<li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li>
|
||||||
|
<li>[修复] menu 组件 layui-nav-more 切换动画。</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<a name="0-3-2"> </a>
|
||||||
|
<li>
|
||||||
|
<h3>0.3.2 <span class="layui-badge-rim">2022-01-03</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>[新增] skeleton 骨架屏组件。</li>
|
||||||
|
<li>[重构] tooltip 内部 popper 组件，支持移动到 tooltip 内部。</li>
|
||||||
|
<li>[增强] layer 部分函数 msg open confirm 等, content 支持 VNode 类型。</li>
|
||||||
|
<li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
|
||||||
|
<li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
|
||||||
|
<li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
|
||||||
|
<li>[升级] layer-vue 1.2.4。</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
<a name="0-3-1"> </a>
|
<a name="0-3-1"> </a>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@ -3,20 +3,17 @@
|
|||||||
|
|
||||||
<lay-card>
|
<lay-card>
|
||||||
<lay-row>
|
<lay-row>
|
||||||
<lay-col md="1">
|
<lay-col md="2">
|
||||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
|
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="2">
|
<lay-col md="3">
|
||||||
就眠仪式
|
就眠仪式
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="8">
|
||||||
焦点：layui-vue
|
焦点：layui-vue
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="4">
|
<lay-col md="4">
|
||||||
地点：China Beijing
|
地点：中国 北京
|
||||||
</lay-col>
|
|
||||||
<lay-col md="5">
|
|
||||||
生态：Pear Admin
|
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="6">
|
||||||
其他：Gitee Github
|
其他：Gitee Github
|
||||||
@ -25,20 +22,17 @@
|
|||||||
</lay-card>
|
</lay-card>
|
||||||
<lay-card>
|
<lay-card>
|
||||||
<lay-row>
|
<lay-row>
|
||||||
<lay-col md="1">
|
<lay-col md="2">
|
||||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
|
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="2">
|
<lay-col md="3">
|
||||||
落小梅
|
落小梅
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="8">
|
||||||
焦点：tree table
|
焦点：tree table
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="4">
|
<lay-col md="4">
|
||||||
地点：China Hunan
|
地点：中国 湖南
|
||||||
</lay-col>
|
|
||||||
<lay-col md="5">
|
|
||||||
生态：Pear Admin
|
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="6">
|
||||||
其他：Gitee Github
|
其他：Gitee Github
|
||||||
@ -48,20 +42,17 @@
|
|||||||
|
|
||||||
<lay-card>
|
<lay-card>
|
||||||
<lay-row>
|
<lay-row>
|
||||||
<lay-col md="1">
|
<lay-col md="2">
|
||||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
|
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="2">
|
<lay-col md="3">
|
||||||
halo
|
halo
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="8">
|
||||||
焦点：slider
|
焦点：slider
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="4">
|
<lay-col md="4">
|
||||||
地点：China Beijing
|
地点：中国 北京
|
||||||
</lay-col>
|
|
||||||
<lay-col md="5">
|
|
||||||
生态：暂无
|
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="6">
|
||||||
其他：Gitee Github
|
其他：Gitee Github
|
||||||
@ -71,43 +62,37 @@
|
|||||||
|
|
||||||
<lay-card>
|
<lay-card>
|
||||||
<lay-row>
|
<lay-row>
|
||||||
<lay-col md="1">
|
<lay-col md="2">
|
||||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
|
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="2">
|
<lay-col md="3">
|
||||||
须弥
|
须弥
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="8">
|
||||||
焦点：layui-vue
|
焦点：layui-vue
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="4">
|
<lay-col md="4">
|
||||||
地点：未知
|
地点：中国 广州
|
||||||
</lay-col>
|
|
||||||
<lay-col md="5">
|
|
||||||
生态：暂无
|
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="6">
|
||||||
其他：Gitee Github
|
其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
|
||||||
</lay-col>
|
</lay-col>
|
||||||
</lay-row>
|
</lay-row>
|
||||||
</lay-card>
|
</lay-card>
|
||||||
|
|
||||||
<lay-card>
|
<lay-card>
|
||||||
<lay-row>
|
<lay-row>
|
||||||
<lay-col md="1">
|
<lay-col md="2">
|
||||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
|
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="2">
|
<lay-col md="3">
|
||||||
Sight
|
Sight
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="8">
|
||||||
焦点：count-up backtop
|
焦点：count-up backtop
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="4">
|
<lay-col md="4">
|
||||||
地点：未知
|
地点：中国 未知
|
||||||
</lay-col>
|
|
||||||
<lay-col md="5">
|
|
||||||
生态：暂无
|
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="6">
|
||||||
其他：Gitee Github
|
其他：Gitee Github
|
||||||
@ -117,20 +102,37 @@
|
|||||||
|
|
||||||
<lay-card>
|
<lay-card>
|
||||||
<lay-row>
|
<lay-row>
|
||||||
<lay-col md="1">
|
<lay-col md="2">
|
||||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
|
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="2">
|
<lay-col md="3">
|
||||||
finalsummer
|
finalsummer
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="8">
|
||||||
焦点：layer-vue
|
焦点：layer-vue
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="4">
|
<lay-col md="4">
|
||||||
地点：未知
|
地点：中国 未知
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="5">
|
<lay-col md="6">
|
||||||
生态：暂无
|
其他：Gitee Github
|
||||||
|
</lay-col>
|
||||||
|
</lay-row>
|
||||||
|
</lay-card>
|
||||||
|
|
||||||
|
<lay-card>
|
||||||
|
<lay-row>
|
||||||
|
<lay-col md="2">
|
||||||
|
<lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
|
||||||
|
</lay-col>
|
||||||
|
<lay-col md="3">
|
||||||
|
莫名点
|
||||||
|
</lay-col>
|
||||||
|
<lay-col md="8">
|
||||||
|
焦点：skeleton setup
|
||||||
|
</lay-col>
|
||||||
|
<lay-col md="4">
|
||||||
|
地点：中国 未知
|
||||||
</lay-col>
|
</lay-col>
|
||||||
<lay-col md="6">
|
<lay-col md="6">
|
||||||
其他：Gitee Github
|
其他：Gitee Github
|
||||||
|
|||||||
281
example/src/components/LayAnchor.vue
Normal file
281
example/src/components/LayAnchor.vue
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
<template>
|
||||||
|
<aside :class="classAside">
|
||||||
|
<div class="lay-aside-top">
|
||||||
|
<lay-button
|
||||||
|
type="primary"
|
||||||
|
size="xs"
|
||||||
|
:class="classAsideBtn"
|
||||||
|
@click="handlerBtnClick()"
|
||||||
|
>
|
||||||
|
<lay-icon :type="iconType" size="40"> </lay-icon>
|
||||||
|
</lay-button>
|
||||||
|
</div>
|
||||||
|
<lay-scroll
|
||||||
|
class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar"
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
<li
|
||||||
|
v-for="(anchor, index) in anchorList"
|
||||||
|
:key="index"
|
||||||
|
class="lay-aside-list"
|
||||||
|
:class="{ active: index === activeIndex }"
|
||||||
|
@click.prevent="handlerListItemClick(index, anchor)"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
:href="`#${anchor}`"
|
||||||
|
class="lay-aside-link"
|
||||||
|
:class="{ active: index === activeIndex }"
|
||||||
|
>{{ anchor }}</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</lay-scroll>
|
||||||
|
</aside>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, ref, shallowRef, watch } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
anchors?: Array<string> | string;
|
||||||
|
currIndex: number;
|
||||||
|
show: boolean;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
let activeIndex = ref<number>(0);
|
||||||
|
const show = ref<boolean>(props.show);
|
||||||
|
const iconType = ref<string>("layui-icon-right");
|
||||||
|
const anchors: string | string[] | undefined = props.anchors;
|
||||||
|
/**滚动条高度 */
|
||||||
|
const scrollTop = ref<number>(0);
|
||||||
|
/**要监听的滚动元素 */
|
||||||
|
const scrollRefEl = shallowRef<HTMLElement | undefined>(undefined);
|
||||||
|
/**折叠动画 */
|
||||||
|
let enableAnimation = false;
|
||||||
|
|
||||||
|
const anchorList = computed(() => {
|
||||||
|
return typeof anchors === "string" ? anchors?.split(",") : anchors;
|
||||||
|
});
|
||||||
|
|
||||||
|
const classAside = computed(() => [
|
||||||
|
"lay-aside",
|
||||||
|
{ "lay-aside-animation": enableAnimation },
|
||||||
|
{ "lay-aside-collapse": !show.value },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const classAsideBtn = computed(() => {
|
||||||
|
let classBtn = [];
|
||||||
|
if (enableAnimation) {
|
||||||
|
classBtn = [
|
||||||
|
"lay-aside-collapse-btn",
|
||||||
|
"lay-aside-animation",
|
||||||
|
{ "lay-aside-collapse-btn-collapse": !show.value }
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
classBtn = [
|
||||||
|
"lay-aside-collapse-btn",
|
||||||
|
{ "lay-aside-collapse-btn-collapse": !show.value }
|
||||||
|
];
|
||||||
|
|
||||||
|
enableAnimation = true;
|
||||||
|
}
|
||||||
|
return classBtn;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handlerBtnClick = () => {
|
||||||
|
show.value = !show.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerListItemClick = (index: number, id: string) => {
|
||||||
|
activeIndex.value = index;
|
||||||
|
scrollToTitle(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**锚点标签跟随滚动高亮 */
|
||||||
|
const handlerScroll = () => {
|
||||||
|
// 距离顶部 90 改变 activeIndex
|
||||||
|
scrollTop.value = getScrollTop(scrollRefEl.value) + 90;
|
||||||
|
anchorList.value?.forEach((item, index) => {
|
||||||
|
const elOffsetTop = document.getElementById(item)?.offsetTop;
|
||||||
|
if (elOffsetTop) {
|
||||||
|
if (index === 0 && scrollTop.value < elOffsetTop) {
|
||||||
|
activeIndex.value = 0;
|
||||||
|
} else if (scrollTop.value >= elOffsetTop) {
|
||||||
|
activeIndex.value = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerCollapse = () => {
|
||||||
|
iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
|
||||||
|
// @ts-ignore
|
||||||
|
scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
|
||||||
|
? "180px"
|
||||||
|
: "0px";
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(show, () => {
|
||||||
|
handlerCollapse();
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// @ts-ignore TODO 封装 hooks
|
||||||
|
scrollRefEl.value = document.querySelector(".layui-body");
|
||||||
|
if (!scrollRefEl.value) {
|
||||||
|
throw new Error(`scroll element is not existed: ".layui-body"`);
|
||||||
|
}
|
||||||
|
scrollRefEl.value.scrollTop = 0;
|
||||||
|
scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
|
||||||
|
// 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
|
||||||
|
// @ts-ignore
|
||||||
|
show.value = scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
|
||||||
|
enableAnimation = show.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**获取滚动高度 */
|
||||||
|
const getScrollTop = (el: HTMLElement | undefined): number => {
|
||||||
|
return el
|
||||||
|
? el.scrollTop
|
||||||
|
: window.pageYOffset ||
|
||||||
|
document.documentElement.scrollTop ||
|
||||||
|
document.body.scrollTop ||
|
||||||
|
0;
|
||||||
|
}
|
||||||
|
/**平滑滚动 */
|
||||||
|
const scrollToTitle = (id: string): void => {
|
||||||
|
document.getElementById(id)?.scrollIntoView({
|
||||||
|
behavior: "smooth",
|
||||||
|
block: "start",
|
||||||
|
inline: "nearest",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const throttle = (func: Function, wait: number) => {
|
||||||
|
var timer: any = null;
|
||||||
|
return (...args: any) => {
|
||||||
|
if (!timer) {
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
timer = null;
|
||||||
|
func.apply(this, args);
|
||||||
|
}, wait);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layui-side-scroll-bar {
|
||||||
|
overflow-y: scroll;
|
||||||
|
max-width: 156px;
|
||||||
|
}
|
||||||
|
.layui-side-scroll::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.lay-aside {
|
||||||
|
position: fixed;
|
||||||
|
top: 65px;
|
||||||
|
right: 17px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 180px;
|
||||||
|
padding: 0 25px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-left: 1px solid rgb(229 230 235);
|
||||||
|
transition: none;
|
||||||
|
-webkit-transition: none;
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-aside-collapse {
|
||||||
|
right: -180px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-aside-top {
|
||||||
|
height: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-aside-link {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 4px;
|
||||||
|
color: grey;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 2;
|
||||||
|
max-width: 140px;
|
||||||
|
min-width: 68px;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.1s cubic-bezier(0, 0, 1, 1);
|
||||||
|
}
|
||||||
|
.lay-aside-list {
|
||||||
|
position: relative;
|
||||||
|
margin: 5px 0px 0px 4px;
|
||||||
|
padding-left: 2px;
|
||||||
|
max-width: 140px;
|
||||||
|
border-radius: 2px;
|
||||||
|
list-style: none;
|
||||||
|
&:hover {
|
||||||
|
background-color: #f6f6f6 !important;
|
||||||
|
color: #5fb878;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: #f6f6f6 !important;
|
||||||
|
color: #89d89f;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
background-color: #f6f6f6 !important;
|
||||||
|
* {
|
||||||
|
color: #5fb878 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-aside-collapse-btn {
|
||||||
|
position: fixed;
|
||||||
|
right: 197px;
|
||||||
|
top: calc(50% - 20px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 18px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border-radius: 0px;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
border: rgb(229 230 235) 1px solid;
|
||||||
|
border-right: none;
|
||||||
|
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||||
|
transition: none;
|
||||||
|
-webkit-transition: none;
|
||||||
|
&:hover {
|
||||||
|
background-color: #e2e2e2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lay-aside-collapse-btn-collapse {
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-aside-animation {
|
||||||
|
transition: right 200ms;
|
||||||
|
-webkit-transition: right 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.lay-aside {
|
||||||
|
width: 100px !important;
|
||||||
|
}
|
||||||
|
.lay-aside-collapse-btn {
|
||||||
|
right: 98px;
|
||||||
|
}
|
||||||
|
.lay-aside-collapse-btn-collapse {
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
.lay-aside-list {
|
||||||
|
max-width: 68px;
|
||||||
|
}
|
||||||
|
.layui-side-scroll-bar {
|
||||||
|
max-width: 68px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -5,9 +5,9 @@
|
|||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
.lay-table-box table {
|
.lay-table-box table {
|
||||||
width: 100%; /*表格宽度*/
|
width: 100%;
|
||||||
border-collapse: collapse; /*使用单一线条的边框*/
|
border-collapse: collapse;
|
||||||
empty-cells: show; /*单元格无内容依旧绘制边框*/
|
empty-cells: show;
|
||||||
border-right: 1px solid whitesmoke;
|
border-right: 1px solid whitesmoke;
|
||||||
border-left: 1px solid whitesmoke;
|
border-left: 1px solid whitesmoke;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@ -18,8 +18,8 @@
|
|||||||
.lay-table-box table th,
|
.lay-table-box table th,
|
||||||
.lay-table-box table td {
|
.lay-table-box table td {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
width: 160px;
|
width: 50px;
|
||||||
max-width: 160px;
|
max-width: 180px;
|
||||||
height: 50px; /*统一每一行的默认高度*/
|
height: 50px; /*统一每一行的默认高度*/
|
||||||
border-top: 1px solid whitesmoke; /*内部边框样式*/
|
border-top: 1px solid whitesmoke; /*内部边框样式*/
|
||||||
padding: 0 10px; /*内边距*/
|
padding: 0 10px; /*内边距*/
|
||||||
|
|||||||
@ -1,52 +1,52 @@
|
|||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
import { createApp } from './main'
|
import { createApp } from "./main";
|
||||||
import { renderToString } from '@vue/server-renderer'
|
import { renderToString } from "@vue/server-renderer";
|
||||||
|
|
||||||
export async function render(url, manifest): Promise<string[]> {
|
export async function render(url, manifest): Promise<string[]> {
|
||||||
const { app, router } = createApp()
|
const { app, router } = createApp();
|
||||||
|
|
||||||
// set the router to the desired URL before rendering
|
// set the router to the desired URL before rendering
|
||||||
router.push(url)
|
router.push(url);
|
||||||
await router.isReady()
|
await router.isReady();
|
||||||
|
|
||||||
// passing SSR context object which will be available via useSSRContext()
|
// passing SSR context object which will be available via useSSRContext()
|
||||||
// @vitejs/plugin-vue injects code into a component's setup() that registers
|
// @vitejs/plugin-vue injects code into a component's step() that registers
|
||||||
// itself on ctx.modules. After the render, ctx.modules would contain all the
|
// itself on ctx.modules. After the render, ctx.modules would contain all the
|
||||||
// components that have been instantiated during this render call.
|
// components that have been instantiated during this render call.
|
||||||
const ctx = {}
|
const ctx = {};
|
||||||
const html = await renderToString(app, ctx)
|
const html = await renderToString(app, ctx);
|
||||||
|
|
||||||
// the SSR manifest generated by Vite contains module -> chunk/asset mapping
|
// the SSR manifest generated by Vite contains module -> chunk/asset mapping
|
||||||
// which we can then use to determine what files need to be preloaded for this
|
// which we can then use to determine what files need to be preloaded for this
|
||||||
// request.
|
// request.
|
||||||
const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
|
const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
|
||||||
return [html, preloadLinks]
|
return [html, preloadLinks];
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPreloadLinks(modules, manifest) {
|
function renderPreloadLinks(modules, manifest) {
|
||||||
let links = ''
|
let links = "";
|
||||||
const seen = new Set()
|
const seen = new Set();
|
||||||
modules.forEach((id) => {
|
modules.forEach((id) => {
|
||||||
const files = manifest[id]
|
const files = manifest[id];
|
||||||
if (files) {
|
if (files) {
|
||||||
files.forEach((file) => {
|
files.forEach((file) => {
|
||||||
if (!seen.has(file)) {
|
if (!seen.has(file)) {
|
||||||
seen.add(file)
|
seen.add(file);
|
||||||
links += renderPreloadLink(file)
|
links += renderPreloadLink(file);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
return links
|
return links;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPreloadLink(file) {
|
function renderPreloadLink(file) {
|
||||||
if (file.endsWith('.js')) {
|
if (file.endsWith(".js")) {
|
||||||
return `<link rel="modulepreload" crossorigin href="${file}">`
|
return `<link rel="modulepreload" crossorigin href="${file}">`;
|
||||||
} else if (file.endsWith('.css')) {
|
} else if (file.endsWith(".css")) {
|
||||||
return `<link rel="stylesheet" href="${file}">`
|
return `<link rel="stylesheet" href="${file}">`;
|
||||||
} else {
|
} else {
|
||||||
return ''
|
return "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -43,7 +43,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="javascript:void(0)"> 0.3.1 </a>
|
<a href="javascript:void(0)"> 0.3.2 </a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</lay-header>
|
</lay-header>
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import LayCode from './components/LayCode.vue'
|
|||||||
import LaySearch from './components/LaySearch.vue'
|
import LaySearch from './components/LaySearch.vue'
|
||||||
import LayTableBox from './components/LayTableBox.vue'
|
import LayTableBox from './components/LayTableBox.vue'
|
||||||
import LayComment from './components/LayComment.vue'
|
import LayComment from './components/LayComment.vue'
|
||||||
|
import LayAnchor from './components/LayAnchor.vue'
|
||||||
import './assets/css/index.css'
|
import './assets/css/index.css'
|
||||||
|
|
||||||
export function createApp(): {
|
export function createApp(): {
|
||||||
@ -23,6 +24,7 @@ export function createApp(): {
|
|||||||
.component('LaySearch', LaySearch)
|
.component('LaySearch', LaySearch)
|
||||||
.component('LayTableBox', LayTableBox)
|
.component('LayTableBox', LayTableBox)
|
||||||
.component('LayComment', LayComment)
|
.component('LayComment', LayComment)
|
||||||
|
.component('LayAnchor',LayAnchor)
|
||||||
.use(Layui)
|
.use(Layui)
|
||||||
|
|
||||||
return { app, router }
|
return { app, router }
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import createBlock from './create-block'
|
|||||||
import createDescribe from './create-describe'
|
import createDescribe from './create-describe'
|
||||||
import createTable from './create-table'
|
import createTable from './create-table'
|
||||||
import createComment from './create-comment'
|
import createComment from './create-comment'
|
||||||
|
import createAnchor from './create-anchor'
|
||||||
import preWrapper from './pre-wrapper'
|
import preWrapper from './pre-wrapper'
|
||||||
|
|
||||||
const plugins = [
|
const plugins = [
|
||||||
@ -31,6 +32,7 @@ const plugins = [
|
|||||||
.use(...createTitle('title', ''))
|
.use(...createTitle('title', ''))
|
||||||
.use(...createDescribe('describe', ''))
|
.use(...createDescribe('describe', ''))
|
||||||
.use(...createComment('comment', ''))
|
.use(...createComment('comment', ''))
|
||||||
|
.use(...createAnchor('anchor', ''))
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
] as any
|
] as any
|
||||||
|
|||||||
35
example/src/plugin/create-anchor.ts
Normal file
35
example/src/plugin/create-anchor.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import container from "markdown-it-container";
|
||||||
|
import type Token from "markdown-it/lib/token";
|
||||||
|
|
||||||
|
type ContainerArgs = [
|
||||||
|
typeof container, string,
|
||||||
|
{ render(tokens: Token[], idx: number): string }
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function createContainer(
|
||||||
|
klass: string,
|
||||||
|
defaultTitle: string
|
||||||
|
): ContainerArgs {
|
||||||
|
return [
|
||||||
|
container,
|
||||||
|
klass,
|
||||||
|
{
|
||||||
|
render(tokens, idx) {
|
||||||
|
const token = tokens[idx];
|
||||||
|
if (token.nesting === 1) {
|
||||||
|
const anchors = [];
|
||||||
|
for (const token of tokens) {
|
||||||
|
if (token.nesting === 1 && token.info.includes("title")) {
|
||||||
|
const info = token.info.trim().slice(klass.length).trim();
|
||||||
|
anchors.push(info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 此处仅支持 string | number | boolean 类型
|
||||||
|
return `<lay-anchor anchors="${anchors}" :currIndex="-1" :show="true">`;
|
||||||
|
} else {
|
||||||
|
return "</lay-anchor>\n";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
@ -2,11 +2,8 @@ import container from 'markdown-it-container'
|
|||||||
import type Token from 'markdown-it/lib/token'
|
import type Token from 'markdown-it/lib/token'
|
||||||
|
|
||||||
type ContainerArgs = [
|
type ContainerArgs = [
|
||||||
typeof container,
|
typeof container, string,
|
||||||
string,
|
{ render(tokens: Token[], idx: number): string }
|
||||||
{
|
|
||||||
render(tokens: Token[], idx: number): string
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function createContainer(
|
export default function createContainer(
|
||||||
|
|||||||
@ -2,11 +2,8 @@ import container from 'markdown-it-container'
|
|||||||
import type Token from 'markdown-it/lib/token'
|
import type Token from 'markdown-it/lib/token'
|
||||||
|
|
||||||
type ContainerArgs = [
|
type ContainerArgs = [
|
||||||
typeof container,
|
typeof container, string,
|
||||||
string,
|
{ render(tokens: Token[], idx: number): string }
|
||||||
{
|
|
||||||
render(tokens: Token[], idx: number): string
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function createContainer(
|
export default function createContainer(
|
||||||
|
|||||||
@ -2,11 +2,8 @@ import container from 'markdown-it-container'
|
|||||||
import type Token from 'markdown-it/lib/token'
|
import type Token from 'markdown-it/lib/token'
|
||||||
|
|
||||||
type ContainerArgs = [
|
type ContainerArgs = [
|
||||||
typeof container,
|
typeof container, string,
|
||||||
string,
|
{ render(tokens: Token[], idx: number): string }
|
||||||
{
|
|
||||||
render(tokens: Token[], idx: number): string
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function createContainer(
|
export default function createContainer(
|
||||||
|
|||||||
@ -2,11 +2,8 @@ import container from 'markdown-it-container'
|
|||||||
import type Token from 'markdown-it/lib/token'
|
import type Token from 'markdown-it/lib/token'
|
||||||
|
|
||||||
type ContainerArgs = [
|
type ContainerArgs = [
|
||||||
typeof container,
|
typeof container, string,
|
||||||
string,
|
{ render(tokens: Token[], idx: number): string }
|
||||||
{
|
|
||||||
render(tokens: Token[], idx: number): string
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function createContainer(
|
export default function createContainer(
|
||||||
|
|||||||
@ -2,11 +2,8 @@ import container from 'markdown-it-container'
|
|||||||
import type Token from 'markdown-it/lib/token'
|
import type Token from 'markdown-it/lib/token'
|
||||||
|
|
||||||
type ContainerArgs = [
|
type ContainerArgs = [
|
||||||
typeof container,
|
typeof container, string,
|
||||||
string,
|
{ render(tokens: Token[], idx: number): string }
|
||||||
{
|
|
||||||
render(tokens: Token[], idx: number): string
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function createContainer(
|
export default function createContainer(
|
||||||
@ -21,9 +18,9 @@ export default function createContainer(
|
|||||||
const token = tokens[idx]
|
const token = tokens[idx]
|
||||||
const info = token.info.trim().slice(klass.length).trim()
|
const info = token.info.trim().slice(klass.length).trim()
|
||||||
if (token.nesting === 1) {
|
if (token.nesting === 1) {
|
||||||
return `<lay-field title="${
|
return `<lay-field id="${info || defaultTitle}" title="${
|
||||||
info || defaultTitle
|
info || defaultTitle
|
||||||
}" style="margin-top:20px;margin-bottom: 20px;">`
|
}" style="margin-top:21px;margin-bottom: 20px;">`
|
||||||
} else {
|
} else {
|
||||||
return '</lay-field>\n'
|
return '</lay-field>\n'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,13 +19,8 @@ export default (md: MarkdownIt): void => {
|
|||||||
}
|
}
|
||||||
const start = pos + 3
|
const start = pos + 3
|
||||||
const end = state.skipSpacesBack(max, pos)
|
const end = state.skipSpacesBack(max, pos)
|
||||||
const rawPath = state.src
|
const rawPath = state.src.slice(start, end).trim().replace(/^@/, process.cwd())
|
||||||
.slice(start, end)
|
const content = fs.existsSync(rawPath) ? fs.readFileSync(rawPath).toString() : 'Not found: ' + rawPath
|
||||||
.trim()
|
|
||||||
.replace(/^@/, process.cwd())
|
|
||||||
const content = fs.existsSync(rawPath)
|
|
||||||
? fs.readFileSync(rawPath).toString()
|
|
||||||
: 'Not found: ' + rawPath
|
|
||||||
const meta = rawPath.replace(rawPath, '')
|
const meta = rawPath.replace(rawPath, '')
|
||||||
state.line = startLine + 1
|
state.line = startLine + 1
|
||||||
const token = state.push('fence', 'code', 0)
|
const token = state.push('fence', 'code', 0)
|
||||||
|
|||||||
@ -1,357 +1,373 @@
|
|||||||
import BaseLayout from '../layouts/Layout.vue'
|
import BaseLayout from "../layouts/Layout.vue";
|
||||||
import Component from '../view/component.vue'
|
import Component from "../view/component.vue";
|
||||||
import Hooks from '../view/hooks.vue'
|
import Hooks from "../view/hooks.vue";
|
||||||
import Guide from '../view/guide.vue'
|
import Guide from "../view/guide.vue";
|
||||||
import Index from '../view/index.vue'
|
import Index from "../view/index.vue";
|
||||||
import Ecology from '../view/ecology.vue'
|
import Ecology from "../view/ecology.vue";
|
||||||
|
|
||||||
const zhCN = [
|
const zhCN = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: "/",
|
||||||
redirect: '/zh-CN/index',
|
redirect: "/zh-CN/index",
|
||||||
component: BaseLayout,
|
component: BaseLayout,
|
||||||
meta: { title: '首页' },
|
meta: { title: "首页" },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/zh-CN/index',
|
path: "/zh-CN/index",
|
||||||
component: Index,
|
component: Index,
|
||||||
meta: { title: '指南' },
|
meta: { title: "指南" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/ecology',
|
path: "/zh-CN/ecology",
|
||||||
component: Ecology,
|
component: Ecology,
|
||||||
meta: { title: '生态' },
|
meta: { title: "生态" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide',
|
path: "/zh-CN/guide",
|
||||||
redirect: '/zh-CN/guide/introduce',
|
redirect: "/zh-CN/guide/introduce",
|
||||||
component: Guide,
|
component: Guide,
|
||||||
meta: { title: '指南' },
|
meta: { title: "指南" },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/introduce',
|
path: "/zh-CN/guide/introduce",
|
||||||
component: () => import('../../docs/zh-CN/guide/introduce.md'),
|
component: () => import("../../docs/zh-CN/guide/introduce.md"),
|
||||||
meta: { title: '介绍' },
|
meta: { title: "介绍" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/getStarted',
|
path: "/zh-CN/guide/getStarted",
|
||||||
component: () => import('../../docs/zh-CN/guide/getStarted.md'),
|
component: () => import("../../docs/zh-CN/guide/getStarted.md"),
|
||||||
meta: { title: '安装' },
|
meta: { title: "安装" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/changelog',
|
path: "/zh-CN/guide/changelog",
|
||||||
component: () => import('../../docs/zh-CN/guide/changelog.md'),
|
component: () => import("../../docs/zh-CN/guide/changelog.md"),
|
||||||
meta: { title: '更新' },
|
meta: { title: "更新" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/problem',
|
path: "/zh-CN/guide/problem",
|
||||||
component: () => import('../../docs/zh-CN/guide/problem.md'),
|
component: () => import("../../docs/zh-CN/guide/problem.md"),
|
||||||
meta: { title: '问题' },
|
meta: { title: "问题" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/member',
|
path: "/zh-CN/guide/member",
|
||||||
component: () => import('../../docs/zh-CN/guide/member.md'),
|
component: () => import("../../docs/zh-CN/guide/member.md"),
|
||||||
meta: { title: '团队' },
|
meta: { title: "团队" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/norms',
|
path: "/zh-CN/guide/norms",
|
||||||
component: () => import('../../docs/zh-CN/guide/norms.md'),
|
component: () => import("../../docs/zh-CN/guide/norms.md"),
|
||||||
meta: { title: '规范' },
|
meta: { title: "规范" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/theme',
|
path: "/zh-CN/guide/theme",
|
||||||
component: () => import('../../docs/zh-CN/guide/theme.md'),
|
component: () => import("../../docs/zh-CN/guide/theme.md"),
|
||||||
meta: { title: '主题' },
|
meta: { title: "主题" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/guide/sponsor',
|
path: "/zh-CN/guide/sponsor",
|
||||||
component: () => import('../../docs/zh-CN/guide/sponsor.md'),
|
component: () => import("../../docs/zh-CN/guide/sponsor.md"),
|
||||||
meta: { title: '赞助' },
|
meta: { title: "赞助" },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components',
|
path: "/zh-CN/components",
|
||||||
redirect: '/zh-CN/components/color',
|
redirect: "/zh-CN/components/color",
|
||||||
component: Component,
|
component: Component,
|
||||||
meta: { title: '组件' },
|
meta: { title: "组件" },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/layout',
|
path: "/zh-CN/components/skeleton",
|
||||||
component: () => import('../../docs/zh-CN/components/layout.md'),
|
component: () => import("../../docs/zh-CN/components/skeleton.md"),
|
||||||
meta: { title: '布局' },
|
meta: { title: "骨架屏" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/color',
|
path: "/zh-CN/components/layout",
|
||||||
component: () => import('../../docs/zh-CN/components/color.md'),
|
component: () => import("../../docs/zh-CN/components/layout.md"),
|
||||||
meta: { title: '颜色' },
|
meta: { title: "布局" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/container',
|
path: "/zh-CN/components/color",
|
||||||
component: () => import('../../docs/zh-CN/components/container.md'),
|
component: () => import("../../docs/zh-CN/components/color.md"),
|
||||||
meta: { title: '容器' },
|
meta: { title: "颜色" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/breadcrumb',
|
path: "/zh-CN/components/container",
|
||||||
|
component: () => import("../../docs/zh-CN/components/container.md"),
|
||||||
|
meta: { title: "容器" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/breadcrumb",
|
||||||
component: () =>
|
component: () =>
|
||||||
import('../../docs/zh-CN/components/breadcrumb.md'),
|
import("../../docs/zh-CN/components/breadcrumb.md"),
|
||||||
meta: { title: '面包屑' },
|
meta: { title: "面包屑" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/button',
|
path: "/zh-CN/components/button",
|
||||||
component: () => import('../../docs/zh-CN/components/button.md'),
|
component: () => import("../../docs/zh-CN/components/button.md"),
|
||||||
meta: { title: '按钮' },
|
meta: { title: "按钮" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/icon',
|
path: "/zh-CN/components/icon",
|
||||||
component: () => import('../../docs/zh-CN/components/icon.md'),
|
component: () => import("../../docs/zh-CN/components/icon.md"),
|
||||||
meta: { title: '图标' },
|
meta: { title: "图标" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/panel',
|
path: "/zh-CN/components/panel",
|
||||||
component: () => import('../../docs/zh-CN/components/panel.md'),
|
component: () => import("../../docs/zh-CN/components/panel.md"),
|
||||||
meta: { title: '面板' },
|
meta: { title: "面板" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/animation',
|
path: "/zh-CN/components/animation",
|
||||||
component: () => import('../../docs/zh-CN/components/animation.md'),
|
component: () => import("../../docs/zh-CN/components/animation.md"),
|
||||||
meta: { title: '动画' },
|
meta: { title: "动画" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/card',
|
path: "/zh-CN/components/card",
|
||||||
component: () => import('../../docs/zh-CN/components/card.md'),
|
component: () => import("../../docs/zh-CN/components/card.md"),
|
||||||
meta: { title: '卡片' },
|
meta: { title: "卡片" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/grid',
|
path: "/zh-CN/components/grid",
|
||||||
component: () => import('../../docs/zh-CN/components/grid.md'),
|
component: () => import("../../docs/zh-CN/components/grid.md"),
|
||||||
meta: { title: '栅格' },
|
meta: { title: "栅格" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/form',
|
path: "/zh-CN/components/form",
|
||||||
component: () => import('../../docs/zh-CN/components/form.md'),
|
component: () => import("../../docs/zh-CN/components/form.md"),
|
||||||
meta: { title: '表单' },
|
meta: { title: "表单" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/badge',
|
path: "/zh-CN/components/badge",
|
||||||
component: () => import('../../docs/zh-CN/components/badge.md'),
|
component: () => import("../../docs/zh-CN/components/badge.md"),
|
||||||
meta: { title: '徽章' },
|
meta: { title: "徽章" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/block',
|
path: "/zh-CN/components/block",
|
||||||
component: () => import('../../docs/zh-CN/components/block.md'),
|
component: () => import("../../docs/zh-CN/components/block.md"),
|
||||||
meta: { title: '辅助' },
|
meta: { title: "辅助" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/line',
|
path: "/zh-CN/components/line",
|
||||||
component: () => import('../../docs/zh-CN/components/line.md'),
|
component: () => import("../../docs/zh-CN/components/line.md"),
|
||||||
meta: { title: '分割' },
|
meta: { title: "分割" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/progress',
|
path: "/zh-CN/components/progress",
|
||||||
component: () => import('../../docs/zh-CN/components/progress.md'),
|
component: () => import("../../docs/zh-CN/components/progress.md"),
|
||||||
meta: { title: '进度' },
|
meta: { title: "进度" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/menu',
|
path: "/zh-CN/components/menu",
|
||||||
component: () => import('../../docs/zh-CN/components/menu.md'),
|
component: () => import("../../docs/zh-CN/components/menu.md"),
|
||||||
meta: { title: '菜单' },
|
meta: { title: "菜单" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/timeline',
|
path: "/zh-CN/components/timeline",
|
||||||
component: () => import('../../docs/zh-CN/components/timeline.md'),
|
component: () => import("../../docs/zh-CN/components/timeline.md"),
|
||||||
meta: { title: '时间线' },
|
meta: { title: "时间线" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/collapse',
|
path: "/zh-CN/components/collapse",
|
||||||
component: () => import('../../docs/zh-CN/components/collapse.md'),
|
component: () => import("../../docs/zh-CN/components/collapse.md"),
|
||||||
meta: { title: '折叠面板' },
|
meta: { title: "折叠面板" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/table',
|
path: "/zh-CN/components/step",
|
||||||
component: () => import('../../docs/zh-CN/components/table.md'),
|
component: () => import("../../docs/zh-CN/components/step.md"),
|
||||||
meta: { title: '表格' },
|
meta: { title: "分步" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/avatar',
|
path: "/zh-CN/components/table",
|
||||||
component: () => import('../../docs/zh-CN/components/avatar.md'),
|
component: () => import("../../docs/zh-CN/components/table.md"),
|
||||||
meta: { title: '头像' },
|
meta: { title: "表格" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/field',
|
path: "/zh-CN/components/avatar",
|
||||||
component: () => import('../../docs/zh-CN/components/field.md'),
|
component: () => import("../../docs/zh-CN/components/avatar.md"),
|
||||||
meta: { title: '字段' },
|
meta: { title: "头像" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/empty',
|
path: "/zh-CN/components/field",
|
||||||
component: () => import('../../docs/zh-CN/components/empty.md'),
|
component: () => import("../../docs/zh-CN/components/field.md"),
|
||||||
meta: { title: '空' },
|
meta: { title: "字段" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/rate',
|
path: "/zh-CN/components/empty",
|
||||||
component: () => import('../../docs/zh-CN/components/rate.md'),
|
component: () => import("../../docs/zh-CN/components/empty.md"),
|
||||||
meta: { title: '评分' },
|
meta: { title: "空" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/dropdown',
|
path: "/zh-CN/components/rate",
|
||||||
component: () => import('../../docs/zh-CN/components/dropdown.md'),
|
component: () => import("../../docs/zh-CN/components/rate.md"),
|
||||||
meta: { title: '下拉' },
|
meta: { title: "评分" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/tab',
|
path: "/zh-CN/components/dropdown",
|
||||||
component: () => import('../../docs/zh-CN/components/tab.md'),
|
component: () => import("../../docs/zh-CN/components/dropdown.md"),
|
||||||
meta: { title: '选项卡' },
|
meta: { title: "下拉" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/iconPicker',
|
path: "/zh-CN/components/tab",
|
||||||
|
component: () => import("../../docs/zh-CN/components/tab.md"),
|
||||||
|
meta: { title: "选项卡" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/iconPicker",
|
||||||
component: () =>
|
component: () =>
|
||||||
import('../../docs/zh-CN/components/iconPicker.md'),
|
import("../../docs/zh-CN/components/iconPicker.md"),
|
||||||
meta: { title: '图标选择' },
|
meta: { title: "图标选择" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/tree',
|
path: "/zh-CN/components/tree",
|
||||||
component: () => import('../../docs/zh-CN/components/tree.md'),
|
component: () => import("../../docs/zh-CN/components/tree.md"),
|
||||||
meta: { title: '树形组件' },
|
meta: { title: "树形组件" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/page',
|
path: "/zh-CN/components/page",
|
||||||
component: () => import('../../docs/zh-CN/components/page.md'),
|
component: () => import("../../docs/zh-CN/components/page.md"),
|
||||||
meta: { title: '分页' },
|
meta: { title: "分页" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/transfer',
|
path: "/zh-CN/components/transfer",
|
||||||
component: () => import('../../docs/zh-CN/components/transfer.md'),
|
component: () => import("../../docs/zh-CN/components/transfer.md"),
|
||||||
meta: { title: '穿梭框' },
|
meta: { title: "穿梭框" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/checkbox',
|
path: "/zh-CN/components/checkbox",
|
||||||
component: () => import('../../docs/zh-CN/components/checkbox.md'),
|
component: () => import("../../docs/zh-CN/components/checkbox.md"),
|
||||||
meta: { title: '复选框' },
|
meta: { title: "复选框" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/radio',
|
path: "/zh-CN/components/radio",
|
||||||
component: () => import('../../docs/zh-CN/components/radio.md'),
|
component: () => import("../../docs/zh-CN/components/radio.md"),
|
||||||
meta: { title: '单选框' },
|
meta: { title: "单选框" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/input',
|
path: "/zh-CN/components/input",
|
||||||
component: () => import('../../docs/zh-CN/components/input.md'),
|
component: () => import("../../docs/zh-CN/components/input.md"),
|
||||||
meta: { title: '输入框' },
|
meta: { title: "输入框" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/inputNumber',
|
path: "/zh-CN/components/inputNumber",
|
||||||
component: () => import('../../docs/zh-CN/components/inputNumber.md'),
|
|
||||||
meta: { title: '数字输入框' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/zh-CN/components/textarea',
|
|
||||||
component: () => import('../../docs/zh-CN/components/textarea.md'),
|
|
||||||
meta: { title: '文本域' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/zh-CN/components/switch',
|
|
||||||
component: () => import('../../docs/zh-CN/components/switch.md'),
|
|
||||||
meta: { title: '开关' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/zh-CN/components/slider',
|
|
||||||
component: () => import('../../docs/zh-CN/components/slider.md'),
|
|
||||||
meta: { title: '滑块' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/zh-CN/components/carousel',
|
|
||||||
component: () => import('../../docs/zh-CN/components/carousel.md'),
|
|
||||||
meta: { title: '轮播' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/zh-CN/components/select',
|
|
||||||
component: () => import('../../docs/zh-CN/components/select.md'),
|
|
||||||
meta: { title: '下拉选择' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/zh-CN/components/colorPicker',
|
|
||||||
component: () =>
|
component: () =>
|
||||||
import('../../docs/zh-CN/components/colorPicker.md'),
|
import("../../docs/zh-CN/components/inputNumber.md"),
|
||||||
meta: { title: '颜色选择器' },
|
meta: { title: "数字输入框" },
|
||||||
},{
|
|
||||||
path: '/zh-CN/components/layer',
|
|
||||||
component: () => import('../../docs/zh-CN/components/layer.md'),
|
|
||||||
meta: { title: '简介' },
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/tooltip',
|
path: "/zh-CN/components/textarea",
|
||||||
component: () => import('../../docs/zh-CN/components/tooltip.md'),
|
component: () => import("../../docs/zh-CN/components/textarea.md"),
|
||||||
meta: { title: '文字提示' },
|
meta: { title: "文本域" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/modal',
|
path: "/zh-CN/components/switch",
|
||||||
component: () => import('../../docs/zh-CN/components/modal.md'),
|
component: () => import("../../docs/zh-CN/components/switch.md"),
|
||||||
meta: { title: '弹层' },
|
meta: { title: "开关" },
|
||||||
},{
|
|
||||||
path: '/zh-CN/components/load',
|
|
||||||
component: () => import('../../docs/zh-CN/components/load.md'),
|
|
||||||
meta: { title: '加载' },
|
|
||||||
},{
|
|
||||||
path: '/zh-CN/components/confirm',
|
|
||||||
component: () => import('../../docs/zh-CN/components/confirm.md'),
|
|
||||||
meta: { title: '询问' },
|
|
||||||
},{
|
|
||||||
path: '/zh-CN/components/msg',
|
|
||||||
component: () => import('../../docs/zh-CN/components/msg.md'),
|
|
||||||
meta: { title: '信息' },
|
|
||||||
},{
|
|
||||||
path: '/zh-CN/components/backtop',
|
|
||||||
component: () => import('../../docs/zh-CN/components/backtop.md'),
|
|
||||||
meta: { title: '返回顶部' },
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/countup',
|
path: "/zh-CN/components/slider",
|
||||||
component: () => import('../../docs/zh-CN/components/countup.md'),
|
component: () => import("../../docs/zh-CN/components/slider.md"),
|
||||||
meta: { title: '数字滚动' },
|
meta: { title: "滑块" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/carousel",
|
||||||
|
component: () => import("../../docs/zh-CN/components/carousel.md"),
|
||||||
|
meta: { title: "轮播" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/select",
|
||||||
|
component: () => import("../../docs/zh-CN/components/select.md"),
|
||||||
|
meta: { title: "下拉选择" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/colorPicker",
|
||||||
|
component: () =>
|
||||||
|
import("../../docs/zh-CN/components/colorPicker.md"),
|
||||||
|
meta: { title: "颜色选择器" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/layer",
|
||||||
|
component: () => import("../../docs/zh-CN/components/layer.md"),
|
||||||
|
meta: { title: "简介" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/tooltip",
|
||||||
|
component: () => import("../../docs/zh-CN/components/tooltip.md"),
|
||||||
|
meta: { title: "文字提示" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/modal",
|
||||||
|
component: () => import("../../docs/zh-CN/components/modal.md"),
|
||||||
|
meta: { title: "弹层" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/load",
|
||||||
|
component: () => import("../../docs/zh-CN/components/load.md"),
|
||||||
|
meta: { title: "加载" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/confirm",
|
||||||
|
component: () => import("../../docs/zh-CN/components/confirm.md"),
|
||||||
|
meta: { title: "询问" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/msg",
|
||||||
|
component: () => import("../../docs/zh-CN/components/msg.md"),
|
||||||
|
meta: { title: "信息" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/backtop",
|
||||||
|
component: () => import("../../docs/zh-CN/components/backtop.md"),
|
||||||
|
meta: { title: "返回顶部" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/countup",
|
||||||
|
component: () => import("../../docs/zh-CN/components/countup.md"),
|
||||||
|
meta: { title: "数字滚动" },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/hooks',
|
path: "/zh-CN/hooks",
|
||||||
redirect: '/zh-CN/hooks/useStarted',
|
redirect: "/zh-CN/hooks/useStarted",
|
||||||
component: Hooks,
|
component: Hooks,
|
||||||
meta: { title: 'hooks' },
|
meta: { title: "hooks" },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/zh-CN/hooks/useStarted',
|
path: "/zh-CN/hooks/useStarted",
|
||||||
|
component: () => import("../../docs/zh-CN/hooks/useStarted.md"),
|
||||||
|
meta: { title: "useStarted" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/hooks/useClickOutside",
|
||||||
component: () =>
|
component: () =>
|
||||||
import('../../docs/zh-CN/hooks/useStarted.md'),
|
import("../../docs/zh-CN/hooks/useClickOutside.md"),
|
||||||
meta: { title: 'useStarted' },
|
meta: { title: "useClickOutside" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/hooks/useClickOutside',
|
path: "/zh-CN/hooks/useFullScreen",
|
||||||
component: () =>
|
component: () => import("../../docs/zh-CN/hooks/useFullScreen.md"),
|
||||||
import('../../docs/zh-CN/hooks/useClickOutside.md'),
|
meta: { title: "useFullScreen" },
|
||||||
meta: { title: 'useClickOutside' },
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/hooks/useFullScreen',
|
path: "/zh-CN/hooks/useMove",
|
||||||
component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
|
component: () => import("../../docs/zh-CN/hooks/useMove.md"),
|
||||||
meta: { title: 'useFullScreen' },
|
meta: { title: "useMove" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/hooks/useMove',
|
path: "/zh-CN/hooks/useState",
|
||||||
component: () => import('../../docs/zh-CN/hooks/useMove.md'),
|
component: () => import("../../docs/zh-CN/hooks/useState.md"),
|
||||||
meta: { title: 'useMove' },
|
meta: { title: "useState" },
|
||||||
}, {
|
|
||||||
path: '/zh-CN/hooks/useState',
|
|
||||||
component: () => import('../../docs/zh-CN/hooks/useState.md'),
|
|
||||||
meta: { title: 'useState' },
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/hooks/useBoolean',
|
path: "/zh-CN/hooks/useBoolean",
|
||||||
component: () => import('../../docs/zh-CN/hooks/useBoolean.md'),
|
component: () => import("../../docs/zh-CN/hooks/useBoolean.md"),
|
||||||
meta: { title: 'useBoolean' },
|
meta: { title: "useBoolean" },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
export default zhCN
|
export default zhCN;
|
||||||
|
|||||||
@ -37,363 +37,384 @@
|
|||||||
</lay-scroll>
|
</lay-scroll>
|
||||||
</lay-side>
|
</lay-side>
|
||||||
<lay-body>
|
<lay-body>
|
||||||
<div style="padding: 20px">
|
<div
|
||||||
|
style="
|
||||||
|
padding: 20px;
|
||||||
|
margin-right: 180px;
|
||||||
|
transition: margin 240ms 60ms;
|
||||||
|
"
|
||||||
|
>
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
</lay-body>
|
</lay-body>
|
||||||
</lay-layout>
|
</lay-layout>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from "vue";
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from "vue-router";
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const route = useRoute()
|
const route = useRoute();
|
||||||
const router = useRouter()
|
const router = useRouter();
|
||||||
const currentPath = ref('/zh-CN/guide')
|
const currentPath = ref("/zh-CN/guide");
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => route.path,
|
() => route.path,
|
||||||
(val) => {
|
(val) => {
|
||||||
currentPath.value = val
|
currentPath.value = val;
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
|
|
||||||
const menus = [
|
const menus = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '通用',
|
title: "通用",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 20,
|
id: 20,
|
||||||
title: '颜色',
|
title: "颜色",
|
||||||
subTitle: 'color',
|
subTitle: "color",
|
||||||
path: '/zh-CN/components/color',
|
path: "/zh-CN/components/color",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
title: '按钮',
|
title: "按钮",
|
||||||
subTitle: 'button',
|
subTitle: "button",
|
||||||
path: '/zh-CN/components/button',
|
path: "/zh-CN/components/button",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 7,
|
id: 7,
|
||||||
title: '图标',
|
title: "图标",
|
||||||
subTitle: 'iconfont',
|
subTitle: "iconfont",
|
||||||
path: '/zh-CN/components/icon',
|
path: "/zh-CN/components/icon",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 10,
|
id: 10,
|
||||||
title: '动画',
|
title: "动画",
|
||||||
subTitle: 'animation',
|
subTitle: "animation",
|
||||||
path: '/zh-CN/components/animation',
|
path: "/zh-CN/components/animation",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '布局',
|
title: "布局",
|
||||||
children: [
|
children: [
|
||||||
|
{
|
||||||
|
id: 111,
|
||||||
|
title: "骨架屏",
|
||||||
|
subTitle: "skeleton",
|
||||||
|
path: "/zh-CN/components/skeleton",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: '布局',
|
title: "布局",
|
||||||
subTitle: 'layout',
|
subTitle: "layout",
|
||||||
path: '/zh-CN/components/layout',
|
path: "/zh-CN/components/layout",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
title: '容器',
|
title: "容器",
|
||||||
subTitle: 'container',
|
subTitle: "container",
|
||||||
path: '/zh-CN/components/container',
|
path: "/zh-CN/components/container",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 11,
|
id: 11,
|
||||||
title: '栅格',
|
title: "栅格",
|
||||||
subTitle: 'grid',
|
subTitle: "grid",
|
||||||
path: '/zh-CN/components/grid',
|
path: "/zh-CN/components/grid",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 8,
|
id: 8,
|
||||||
title: '面板',
|
title: "面板",
|
||||||
subTitle: 'panel',
|
subTitle: "panel",
|
||||||
path: '/zh-CN/components/panel',
|
path: "/zh-CN/components/panel",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 9,
|
id: 9,
|
||||||
title: '卡片',
|
title: "卡片",
|
||||||
subTitle: 'card',
|
subTitle: "card",
|
||||||
path: '/zh-CN/components/card',
|
path: "/zh-CN/components/card",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '导航',
|
title: "导航",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 16,
|
id: 16,
|
||||||
title: '菜单',
|
title: "菜单",
|
||||||
subTitle: 'nav',
|
subTitle: "nav",
|
||||||
path: '/zh-CN/components/menu',
|
path: "/zh-CN/components/menu",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 17,
|
id: 17,
|
||||||
title: '面包屑',
|
title: "面包屑",
|
||||||
subTitle: 'breadcrumb',
|
subTitle: "breadcrumb",
|
||||||
path: '/zh-CN/components/breadcrumb',
|
path: "/zh-CN/components/breadcrumb",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 28,
|
id: 28,
|
||||||
title: '选项卡',
|
title: "选项卡",
|
||||||
subTitle: 'tab',
|
subTitle: "tab",
|
||||||
path: '/zh-CN/components/tab',
|
path: "/zh-CN/components/tab",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 27,
|
id: 27,
|
||||||
title: '下拉菜单',
|
title: "下拉菜单",
|
||||||
subTitle: 'dropdown',
|
subTitle: "dropdown",
|
||||||
path: '/zh-CN/components/dropdown',
|
path: "/zh-CN/components/dropdown",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 42,
|
id: 42,
|
||||||
title: '返回顶部',
|
title: "返回顶部",
|
||||||
subTitle: 'backtop',
|
subTitle: "backtop",
|
||||||
path: '/zh-CN/components/backtop',
|
path: "/zh-CN/components/backtop",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '表单',
|
title: "表单",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 36,
|
id: 36,
|
||||||
title: '开关',
|
title: "开关",
|
||||||
subTitle: 'switch',
|
subTitle: "switch",
|
||||||
path: '/zh-CN/components/switch',
|
path: "/zh-CN/components/switch",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 32,
|
id: 32,
|
||||||
title: '复选框',
|
title: "复选框",
|
||||||
subTitle: 'checkbox',
|
subTitle: "checkbox",
|
||||||
path: '/zh-CN/components/checkbox',
|
path: "/zh-CN/components/checkbox",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 33,
|
id: 33,
|
||||||
title: '单选框',
|
title: "单选框",
|
||||||
subTitle: 'radio',
|
subTitle: "radio",
|
||||||
path: '/zh-CN/components/radio',
|
path: "/zh-CN/components/radio",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 34,
|
id: 34,
|
||||||
title: '输入框',
|
title: "输入框",
|
||||||
subTitle: 'input',
|
subTitle: "input",
|
||||||
path: '/zh-CN/components/input',
|
path: "/zh-CN/components/input",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 341,
|
id: 341,
|
||||||
title: '数字输入框',
|
title: "数字输入框",
|
||||||
subTitle: 'inputNumber',
|
subTitle: "inputNumber",
|
||||||
path: '/zh-CN/components/inputNumber',
|
path: "/zh-CN/components/inputNumber",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 35,
|
id: 35,
|
||||||
title: '文本域',
|
title: "文本域",
|
||||||
subTitle: 'textarea',
|
subTitle: "textarea",
|
||||||
path: '/zh-CN/components/textarea',
|
path: "/zh-CN/components/textarea",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 39,
|
id: 39,
|
||||||
title: '下拉选择',
|
title: "下拉选择",
|
||||||
subTitle: 'select',
|
subTitle: "select",
|
||||||
path: '/zh-CN/components/select',
|
path: "/zh-CN/components/select",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 40,
|
id: 40,
|
||||||
title: '颜色选择器',
|
title: "颜色选择器",
|
||||||
subTitle: 'colorPicker',
|
subTitle: "colorPicker",
|
||||||
path: '/zh-CN/components/colorPicker',
|
path: "/zh-CN/components/colorPicker",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 29,
|
id: 29,
|
||||||
title: '图标选择器',
|
title: "图标选择器",
|
||||||
subTitle: 'iconPicker',
|
subTitle: "iconPicker",
|
||||||
path: '/zh-CN/components/iconPicker',
|
path: "/zh-CN/components/iconPicker",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 26,
|
id: 26,
|
||||||
title: '评分',
|
title: "评分",
|
||||||
subTitle: 'rate',
|
subTitle: "rate",
|
||||||
path: '/zh-CN/components/rate',
|
path: "/zh-CN/components/rate",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 37,
|
id: 37,
|
||||||
title: '滑块',
|
title: "滑块",
|
||||||
subTitle: 'slider',
|
subTitle: "slider",
|
||||||
path: '/zh-CN/components/slider',
|
path: "/zh-CN/components/slider",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 12,
|
id: 12,
|
||||||
title: '表单',
|
title: "表单",
|
||||||
subTitle: 'form',
|
subTitle: "form",
|
||||||
path: '/zh-CN/components/form',
|
path: "/zh-CN/components/form",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '展示',
|
title: "展示",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 18,
|
id: 18,
|
||||||
title: '进度',
|
title: "进度",
|
||||||
subTitle: 'progress',
|
subTitle: "progress",
|
||||||
path: '/zh-CN/components/progress',
|
path: "/zh-CN/components/progress",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 19,
|
id: 19,
|
||||||
title: '时间线',
|
title: "时间线",
|
||||||
subTitle: 'timeline',
|
subTitle: "timeline",
|
||||||
path: '/zh-CN/components/timeline',
|
path: "/zh-CN/components/timeline",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 21,
|
id: 21,
|
||||||
title: '折叠面板',
|
title: "折叠面板",
|
||||||
subTitle: 'collapse',
|
subTitle: "collapse",
|
||||||
path: '/zh-CN/components/collapse',
|
path: "/zh-CN/components/collapse",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 22,
|
id: 22,
|
||||||
title: '表格',
|
title: "表格",
|
||||||
subTitle: 'table',
|
subTitle: "table",
|
||||||
path: '/zh-CN/components/table',
|
path: "/zh-CN/components/table",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 23,
|
id: 23,
|
||||||
title: '头像',
|
title: "头像",
|
||||||
subTitle: 'avatar',
|
subTitle: "avatar",
|
||||||
path: '/zh-CN/components/avatar',
|
path: "/zh-CN/components/avatar",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 25,
|
id: 25,
|
||||||
title: '空',
|
title: "空",
|
||||||
subTitle: 'empty',
|
subTitle: "empty",
|
||||||
path: '/zh-CN/components/empty',
|
path: "/zh-CN/components/empty",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 29,
|
id: 29,
|
||||||
title: '分页',
|
title: "分页",
|
||||||
subTitle: 'page',
|
subTitle: "page",
|
||||||
path: '/zh-CN/components/page',
|
path: "/zh-CN/components/page",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 30,
|
id: 30,
|
||||||
title: '树形组件',
|
title: "树形组件",
|
||||||
subTitle: 'tree',
|
subTitle: "tree",
|
||||||
path: '/zh-CN/components/tree',
|
path: "/zh-CN/components/tree",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 31,
|
id: 31,
|
||||||
title: '穿梭框',
|
title: "穿梭框",
|
||||||
subTitle: 'transfer',
|
subTitle: "transfer",
|
||||||
path: '/zh-CN/components/transfer',
|
path: "/zh-CN/components/transfer",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 38,
|
id: 38,
|
||||||
title: '轮播',
|
title: "轮播",
|
||||||
subTitle: 'carousel',
|
subTitle: "carousel",
|
||||||
path: '/zh-CN/components/carousel',
|
path: "/zh-CN/components/carousel",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 43,
|
id: 43,
|
||||||
title: '数字滚动',
|
title: "数字滚动",
|
||||||
subTitle: 'countUp',
|
subTitle: "countUp",
|
||||||
path: '/zh-CN/components/countup',
|
path: "/zh-CN/components/countup",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '辅助',
|
title: "辅助",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 13,
|
id: 13,
|
||||||
title: '徽章',
|
title: "徽章",
|
||||||
subTitle: 'badge',
|
subTitle: "badge",
|
||||||
path: '/zh-CN/components/badge',
|
path: "/zh-CN/components/badge",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 14,
|
id: 14,
|
||||||
title: '区块',
|
title: "区块",
|
||||||
subTitle: 'block',
|
subTitle: "block",
|
||||||
path: '/zh-CN/components/block',
|
path: "/zh-CN/components/block",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 15,
|
id: 15,
|
||||||
title: '分割',
|
title: "分割",
|
||||||
subTitle: 'line',
|
subTitle: "line",
|
||||||
path: '/zh-CN/components/line',
|
path: "/zh-CN/components/line",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 24,
|
id: 24,
|
||||||
title: '字段',
|
title: "字段",
|
||||||
subTitle: 'field',
|
subTitle: "field",
|
||||||
path: '/zh-CN/components/field',
|
path: "/zh-CN/components/field",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 25,
|
id: 25,
|
||||||
title: '文字提示',
|
title: "文字提示",
|
||||||
subTitle: 'tooltip',
|
subTitle: "tooltip",
|
||||||
path: '/zh-CN/components/tooltip',
|
path: "/zh-CN/components/tooltip",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 99,
|
||||||
|
title: "分步",
|
||||||
|
subTitle: "setup",
|
||||||
|
path: "/zh-CN/components/step",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '反馈',
|
title: "反馈",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 90,
|
id: 90,
|
||||||
title: '弹层',
|
title: "弹层",
|
||||||
subTitle: 'modal',
|
subTitle: "modal",
|
||||||
path: '/zh-CN/components/modal',
|
path: "/zh-CN/components/modal",
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
id: 91,
|
id: 91,
|
||||||
title: '加载',
|
title: "加载",
|
||||||
subTitle: 'modal',
|
subTitle: "modal",
|
||||||
path: '/zh-CN/components/load',
|
path: "/zh-CN/components/load",
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
id: 92,
|
id: 92,
|
||||||
title: '询问',
|
title: "询问",
|
||||||
subTitle: 'confirm',
|
subTitle: "confirm",
|
||||||
path: '/zh-CN/components/confirm',
|
path: "/zh-CN/components/confirm",
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
id: 93,
|
id: 93,
|
||||||
title: '消息',
|
title: "消息",
|
||||||
subTitle: 'msg',
|
subTitle: "msg",
|
||||||
path: '/zh-CN/components/msg',
|
path: "/zh-CN/components/msg",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const selected = ref(1)
|
const selected = ref(1);
|
||||||
|
|
||||||
const handleClick = function (menu) {
|
const handleClick = function (menu) {
|
||||||
selected.value = menu.id
|
selected.value = menu.id;
|
||||||
router.push(menu.path)
|
router.push(menu.path);
|
||||||
}
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
menus,
|
menus,
|
||||||
selected,
|
selected,
|
||||||
currentPath,
|
currentPath,
|
||||||
handleClick,
|
handleClick,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-version">
|
<div class="site-version">
|
||||||
<span>当前版本：v<cite class="site-showv">0.3.1</cite></span>
|
<span>当前版本：v<cite class="site-showv">0.3.2</cite></span>
|
||||||
<span
|
<span
|
||||||
><router-link
|
><router-link
|
||||||
class="layui-inline site-down"
|
class="layui-inline site-down"
|
||||||
@ -34,7 +34,7 @@
|
|||||||
>更新日志</router-link
|
>更新日志</router-link
|
||||||
></span
|
></span
|
||||||
>
|
>
|
||||||
<span>下载量：<em class="site-showdowns">2324</em></span>
|
<span>下载量：<em class="site-showdowns">3124</em></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-banner-other">
|
<div class="site-banner-other">
|
||||||
@ -44,7 +44,7 @@
|
|||||||
rel="nofollow"
|
rel="nofollow"
|
||||||
class="site-star"
|
class="site-star"
|
||||||
>
|
>
|
||||||
<i class="layui-icon"></i> Star <cite id="getStars">521</cite>
|
<i class="layui-icon"></i> Star <cite id="getStars">544</cite>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://gitee.com/layui-vue"
|
href="https://gitee.com/layui-vue"
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@layui/layui-vue",
|
"name": "@layui/layui-vue",
|
||||||
"version": "0.3.1",
|
"version": "0.3.2",
|
||||||
"author": "sleeprite",
|
"author": "sleeprite",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"description": "a component library for Vue 3 base on layui-vue",
|
"description": "a component library for Vue 3 base on layui-vue",
|
||||||
@ -26,14 +26,14 @@
|
|||||||
"build": "vite build --emptyOutDir && npm run build:types",
|
"build": "vite build --emptyOutDir && npm run build:types",
|
||||||
"build:types": "rimraf types && tsc -d",
|
"build:types": "rimraf types && tsc -d",
|
||||||
"build:example": "vite build example",
|
"build:example": "vite build example",
|
||||||
"lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
|
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
|
||||||
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
|
"lint:prettier": "prettier --write 'src/**/*'",
|
||||||
"commit": "git cz"
|
"commit": "git cz"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@layui/hooks-vue": "^0.1.6",
|
"@layui/hooks-vue": "^0.1.6",
|
||||||
"@layui/icons-vue": "^1.0.2",
|
"@layui/icons-vue": "^1.0.2",
|
||||||
"@layui/layer-vue": "^1.2.2",
|
"@layui/layer-vue": "^1.2.4",
|
||||||
"async-validator": "^4.0.7",
|
"async-validator": "^4.0.7",
|
||||||
"countup.js": "^2.0.8",
|
"countup.js": "^2.0.8",
|
||||||
"evtd": "^0.2.3",
|
"evtd": "^0.2.3",
|
||||||
|
|||||||
@ -2844,6 +2844,25 @@ body .layui-table-tips .layui-layer-content {
|
|||||||
color: #5fb878;
|
color: #5fb878;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
|
||||||
|
top: 0px;
|
||||||
|
left: 106px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-nav .layui-show.layui-anim-upbit .layui-nav-item {
|
||||||
|
display: block;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-nav {
|
.layui-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
@ -2868,7 +2887,7 @@ body .layui-table-tips .layui-layer-content {
|
|||||||
|
|
||||||
.layui-nav .layui-nav-item a {
|
.layui-nav .layui-nav-item a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0 20px;
|
padding: 0 30px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
-webkit-transition: all 0.3s;
|
-webkit-transition: all 0.3s;
|
||||||
@ -2881,7 +2900,7 @@ body .layui-table-tips .layui-layer-content {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 5px;
|
height: 3px;
|
||||||
background-color: #5fb878;
|
background-color: #5fb878;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
-webkit-transition: all 0.2s;
|
-webkit-transition: all 0.2s;
|
||||||
@ -2917,7 +2936,7 @@ body .layui-table-tips .layui-layer-content {
|
|||||||
.layui-nav .layui-nav-more {
|
.layui-nav .layui-nav-more {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 3px;
|
right: 8px;
|
||||||
left: auto !important;
|
left: auto !important;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-size: 12.5px !important;
|
font-size: 12.5px !important;
|
||||||
@ -2988,13 +3007,13 @@ body .layui-table-tips .layui-layer-content {
|
|||||||
.layui-nav-tree .layui-nav-item {
|
.layui-nav-tree .layui-nav-item {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: 40px;
|
line-height: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-nav-tree .layui-nav-item a {
|
.layui-nav-tree .layui-nav-item a {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 46px;
|
height: 42px;
|
||||||
line-height: 46px;
|
line-height: 42px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
21
src/index.ts
21
src/index.ts
@ -6,7 +6,7 @@ import "@layui/layer-vue/lib/index.css";
|
|||||||
import "@layui/icons-vue/lib/index.css";
|
import "@layui/icons-vue/lib/index.css";
|
||||||
import { layer } from "@layui/layer-vue";
|
import { layer } from "@layui/layer-vue";
|
||||||
|
|
||||||
import LayModal from "./module/layer/modal/index";
|
import LayLayer from "./module/layer/index";
|
||||||
import LayBacktop from "./module/backTop/index";
|
import LayBacktop from "./module/backTop/index";
|
||||||
import LayAvatar from "./module/avatar/index";
|
import LayAvatar from "./module/avatar/index";
|
||||||
import LayRadio from "./module/radio/index";
|
import LayRadio from "./module/radio/index";
|
||||||
@ -40,7 +40,6 @@ import LayContainer from "./module/container/index";
|
|||||||
import LayCountUp from "./module/countUp/index";
|
import LayCountUp from "./module/countUp/index";
|
||||||
import LayMenu from "./module/menu/index";
|
import LayMenu from "./module/menu/index";
|
||||||
import LayMenuItem from "./module/menuItem/index";
|
import LayMenuItem from "./module/menuItem/index";
|
||||||
import LayMenuChildItem from "./module/menuChildItem/index";
|
|
||||||
import LayCheckbox from "./module/checkbox/index";
|
import LayCheckbox from "./module/checkbox/index";
|
||||||
import LayCheckboxGroup from "./module/checkboxGroup/index";
|
import LayCheckboxGroup from "./module/checkboxGroup/index";
|
||||||
import LayForm from "./module/form/index";
|
import LayForm from "./module/form/index";
|
||||||
@ -67,6 +66,10 @@ import LayCarouselItem from "./module/carouselItem/index";
|
|||||||
import LayColorPicker from "./module/colorPicker/index";
|
import LayColorPicker from "./module/colorPicker/index";
|
||||||
import LayTooltip from "./module/tooltip/index";
|
import LayTooltip from "./module/tooltip/index";
|
||||||
import LayInputNumber from "./module/inputNumber/index";
|
import LayInputNumber from "./module/inputNumber/index";
|
||||||
|
import LaySkeleton from "./module/skeleton/index";
|
||||||
|
import LaySkeletonItem from "./module/skeletonItem/index";
|
||||||
|
import LayStep from "./module/step/index";
|
||||||
|
import LayStepItem from "./module/stepItem/index";
|
||||||
|
|
||||||
const components: Record<string, IDefineComponent> = {
|
const components: Record<string, IDefineComponent> = {
|
||||||
LayRadio,
|
LayRadio,
|
||||||
@ -99,7 +102,6 @@ const components: Record<string, IDefineComponent> = {
|
|||||||
LayContainer,
|
LayContainer,
|
||||||
LayMenu,
|
LayMenu,
|
||||||
LayMenuItem,
|
LayMenuItem,
|
||||||
LayMenuChildItem,
|
|
||||||
LayCheckbox,
|
LayCheckbox,
|
||||||
LayForm,
|
LayForm,
|
||||||
LayBreadcrumb,
|
LayBreadcrumb,
|
||||||
@ -126,10 +128,14 @@ const components: Record<string, IDefineComponent> = {
|
|||||||
LayCarousel,
|
LayCarousel,
|
||||||
LayCarouselItem,
|
LayCarouselItem,
|
||||||
LayColorPicker,
|
LayColorPicker,
|
||||||
LayModal,
|
LayLayer,
|
||||||
LayTooltip,
|
LayTooltip,
|
||||||
LayInputNumber,
|
LayInputNumber,
|
||||||
|
LaySkeleton,
|
||||||
|
LaySkeletonItem,
|
||||||
LayCountUp,
|
LayCountUp,
|
||||||
|
LayStep,
|
||||||
|
LayStepItem,
|
||||||
};
|
};
|
||||||
|
|
||||||
const install = (app: App, options?: InstallOptions): void => {
|
const install = (app: App, options?: InstallOptions): void => {
|
||||||
@ -142,6 +148,10 @@ const install = (app: App, options?: InstallOptions): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
LayStep,
|
||||||
|
LayStepItem,
|
||||||
|
LaySkeleton,
|
||||||
|
LaySkeletonItem,
|
||||||
LayRadio,
|
LayRadio,
|
||||||
LayIcon,
|
LayIcon,
|
||||||
LayButton,
|
LayButton,
|
||||||
@ -172,7 +182,6 @@ export {
|
|||||||
LayContainer,
|
LayContainer,
|
||||||
LayMenu,
|
LayMenu,
|
||||||
LayMenuItem,
|
LayMenuItem,
|
||||||
LayMenuChildItem,
|
|
||||||
LayCheckbox,
|
LayCheckbox,
|
||||||
LayForm,
|
LayForm,
|
||||||
LayBreadcrumb,
|
LayBreadcrumb,
|
||||||
@ -199,7 +208,7 @@ export {
|
|||||||
LayCarousel,
|
LayCarousel,
|
||||||
LayCarouselItem,
|
LayCarouselItem,
|
||||||
LayColorPicker,
|
LayColorPicker,
|
||||||
LayModal
|
LayLayer
|
||||||
};
|
};
|
||||||
|
|
||||||
export { layer };
|
export { layer };
|
||||||
|
|||||||
9
src/module/layer/index.ts
Normal file
9
src/module/layer/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import type { App } from "vue";
|
||||||
|
import { LayLayer } from "@layui/layer-vue";
|
||||||
|
import type { IDefineComponent } from "../type/index";
|
||||||
|
|
||||||
|
LayLayer.install = (app: App) => {
|
||||||
|
app.component(LayLayer.name || "LayLayer", LayLayer);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LayLayer as IDefineComponent;
|
||||||
@ -1,9 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<template>
|
|
||||||
<dd :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()">
|
|
||||||
<slot v-if="slots.title" name="title"></slot>
|
|
||||||
<a v-else href="javascript:void(0)">
|
|
||||||
{{ title }}
|
|
||||||
</a>
|
|
||||||
</dd>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="LayMenuChildItem" lang="ts">
|
|
||||||
import { defineProps, inject, Ref, useSlots } from "vue";
|
|
||||||
|
|
||||||
const slots = useSlots();
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
|
|
||||||
|
|
||||||
const selectHandle = function () {
|
|
||||||
selectedKey.value = props.id;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -6,7 +6,7 @@
|
|||||||
>
|
>
|
||||||
<a href="javascript:void(0)" @click="openHandle">
|
<a href="javascript:void(0)" @click="openHandle">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
<i class="layui-icon layui-icon-down layui-nav-more"></i>
|
<i :class="[openKeys.includes(id) && !isTree ? 'layui-nav-mored' : '']" class="layui-icon layui-icon-down layui-nav-more"></i>
|
||||||
</a>
|
</a>
|
||||||
<dl
|
<dl
|
||||||
class="layui-nav-child"
|
class="layui-nav-child"
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
@attr : ~'[position=@{position}]';
|
@attr : ~'[position=@{position}]';
|
||||||
&{
|
&{
|
||||||
border: 1px solid @m-border-color;
|
border: 1px solid @m-border-color;
|
||||||
&.layui-popper@{attr}{
|
&@{attr}{
|
||||||
margin-@{contrary_position}: 6px;
|
margin-@{contrary_position}: 6px;
|
||||||
.layui-popper-arrow {
|
.layui-popper-arrow {
|
||||||
@{contrary_position}: -6px;
|
@{contrary_position}: -6px;
|
||||||
@ -43,7 +43,7 @@
|
|||||||
// 箭头默认居中
|
// 箭头默认居中
|
||||||
.arrow-default-center(@position, @prop) {
|
.arrow-default-center(@position, @prop) {
|
||||||
@attr : ~'[position=@{position}]';
|
@attr : ~'[position=@{position}]';
|
||||||
&.layui-popper@{attr} {
|
&@{attr} {
|
||||||
.layui-popper-arrow{
|
.layui-popper-arrow{
|
||||||
@{prop}: -moz-calc(50% - 6px);
|
@{prop}: -moz-calc(50% - 6px);
|
||||||
@{prop}: -webkit-calc(50% - 6px);
|
@{prop}: -webkit-calc(50% - 6px);
|
||||||
@ -58,6 +58,23 @@
|
|||||||
.arrow-default-center(right, top);
|
.arrow-default-center(right, top);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 填充popper，支持可以移动到popper使用到
|
||||||
|
.single-fill-popper(@position, @contrary_position, @zeroPosition, @all, @seven){
|
||||||
|
@attr : ~'[position=@{position}]';
|
||||||
|
&@{attr}::after{
|
||||||
|
@{contrary_position}: -7px;
|
||||||
|
@{zeroPosition}: 0;
|
||||||
|
@{all}: 100%;
|
||||||
|
@{seven}: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fill-popper(){
|
||||||
|
.single-fill-popper(top, bottom, left, width, height);
|
||||||
|
.single-fill-popper(bottom, top, left, width, height);
|
||||||
|
.single-fill-popper(left, right, bottom, height, width);
|
||||||
|
.single-fill-popper(right, left, bottom, height, width);
|
||||||
|
}
|
||||||
|
|
||||||
// 样式开始
|
// 样式开始
|
||||||
.layui-popper {
|
.layui-popper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -76,6 +93,14 @@
|
|||||||
// 箭头默认居中
|
// 箭头默认居中
|
||||||
.all-arrow-default-center();
|
.all-arrow-default-center();
|
||||||
|
|
||||||
|
&::after{
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
// 填充
|
||||||
|
.fill-popper();
|
||||||
|
|
||||||
.layui-popper-arrow {
|
.layui-popper-arrow {
|
||||||
&,&::after{
|
&,&::after{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -1,15 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<teleport to="body" v-if="isExist">
|
||||||
<transition v-show="innerVisible">
|
<transition v-show="innerVisible">
|
||||||
<div
|
<div
|
||||||
ref="popper"
|
ref="popper"
|
||||||
:class="['layui-popper', { 'layui-dark': innnerIsDark }]"
|
:class="['layui-popper', { 'layui-dark': isDark }]"
|
||||||
:style="style"
|
:style="style"
|
||||||
:position="innnerPosition"
|
:position="position"
|
||||||
>
|
>
|
||||||
<slot>{{ content.value }}</slot>
|
<slot>{{ content }}</slot>
|
||||||
<div class="layui-popper-arrow"></div>
|
<div class="layui-popper-arrow"></div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
|
</teleport>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
const NAME = "LayPopper";
|
const NAME = "LayPopper";
|
||||||
@ -25,30 +27,33 @@ import {
|
|||||||
CSSProperties,
|
CSSProperties,
|
||||||
ref,
|
ref,
|
||||||
watch,
|
watch,
|
||||||
onUpdated,
|
|
||||||
defineEmits,
|
defineEmits,
|
||||||
onMounted,
|
onMounted,
|
||||||
Ref,
|
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { on } from "../../tools/domUtil";
|
import { on } from "../../tools/domUtil";
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
el: any;
|
el: any;
|
||||||
content?: Ref<string | Number>;
|
content?: string | Number;
|
||||||
position?: Ref<string>;
|
position?: string;
|
||||||
trigger?: string;
|
trigger?: string;
|
||||||
enterable?: boolean;
|
enterable?: boolean;
|
||||||
isDark?: Ref<boolean>;
|
isDark?: boolean;
|
||||||
disabled?: Ref<boolean>;
|
disabled?: boolean;
|
||||||
visible?: Ref<boolean>;
|
visible?: boolean;
|
||||||
isCanHide?: Ref<boolean>;
|
isCanHide?: boolean;
|
||||||
updateVisible?: Function;
|
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
|
position: 'top',
|
||||||
|
isDark: true,
|
||||||
|
disabled: false,
|
||||||
enterable: true,
|
enterable: true,
|
||||||
|
visible: true,
|
||||||
|
isCanHide: true,
|
||||||
trigger: "hover",
|
trigger: "hover",
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
const emit = defineEmits(["update:visible"]);
|
||||||
|
|
||||||
const EVENT_MAP: any = {
|
const EVENT_MAP: any = {
|
||||||
hover: ["mouseenter", null, "mouseleave", false],
|
hover: ["mouseenter", null, "mouseleave", false],
|
||||||
@ -63,55 +68,52 @@ if (!triggerArr) {
|
|||||||
const style = ref<CSSProperties>({ top: -window.innerHeight + "px", left: 0 });
|
const style = ref<CSSProperties>({ top: -window.innerHeight + "px", left: 0 });
|
||||||
const checkTarget = ref(false);
|
const checkTarget = ref(false);
|
||||||
const popper = ref<HTMLDivElement>({} as HTMLDivElement);
|
const popper = ref<HTMLDivElement>({} as HTMLDivElement);
|
||||||
const tempPosition = props.position ?? ref("top");
|
const innnerPosition = ref(props.position);
|
||||||
const innnerPosition = ref(tempPosition.value);
|
|
||||||
const innnerIsDark = ref(props.isDark ?? true);
|
|
||||||
const innnerDisabled = ref(props.disabled ?? false);
|
|
||||||
const innerVisible = ref(props.visible ?? true);
|
const innerVisible = ref(props.visible ?? true);
|
||||||
|
const isExist = ref(false);
|
||||||
|
|
||||||
watch(innerVisible, (val) => {
|
watch(innerVisible, (val) => {
|
||||||
invokeShowPosistion();
|
invokeShowPosistion();
|
||||||
props.updateVisible && props.updateVisible(val);
|
emit("update:visible", val);
|
||||||
});
|
});
|
||||||
watch(innnerDisabled, (val) => {
|
watch(popper, (val) => {
|
||||||
innerVisible.value = false;
|
if (props.trigger === 'hover' && props.enterable) {
|
||||||
|
on(popper.value, EVENT_MAP['hover'][0], doShow);
|
||||||
|
on(popper.value, EVENT_MAP['hover'][2], doHidden);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
watch(
|
watch(
|
||||||
() => props.content?.value,
|
() => props.content,
|
||||||
(val) => {
|
(val) => {
|
||||||
innerVisible.value && invokeShowPosistion();
|
innerVisible.value && invokeShowPosistion();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const doShow = function () {
|
const doShow = function () {
|
||||||
if (!innnerDisabled.value) {
|
if (!props.disabled) {
|
||||||
innerVisible.value = true;
|
innerVisible.value = true;
|
||||||
|
isExist.value = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const doHidden = function (e: MouseEvent) {
|
const doHidden = function (e: MouseEvent) {
|
||||||
|
// ||(props.enterable && popper.value.contains(e.target as Node))
|
||||||
if (
|
if (
|
||||||
(checkTarget.value && props.el.contains(e.target)) ||
|
(checkTarget.value && props.el.contains(e.target))
|
||||||
(props.enterable && popper.value.contains(e.target as Node))
|
|
||||||
)
|
)
|
||||||
return;
|
return;
|
||||||
// style.value = {top: (-window.innerHeight) + 'px',left:0};
|
// style.value = {top: (-window.innerHeight) + 'px',left:0};
|
||||||
// popper.value.remove();
|
// popper.value.remove();
|
||||||
if (props.isCanHide?.value !== false) {
|
if (props.isCanHide !== false) {
|
||||||
innerVisible.value = false;
|
innerVisible.value = false;
|
||||||
}
|
}
|
||||||
innnerPosition.value = tempPosition.value;
|
innnerPosition.value = props.position;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 事件绑定
|
|
||||||
on(props.el, triggerArr[0], doShow);
|
|
||||||
on(triggerArr[1] ?? props.el, triggerArr[2], doHidden);
|
|
||||||
checkTarget.value = triggerArr[3];
|
|
||||||
|
|
||||||
// 计算位置显示
|
// 计算位置显示
|
||||||
const showPosistion = function () {
|
const showPosistion = function () {
|
||||||
postionFns[tempPosition.value] &&
|
postionFns[props.position] &&
|
||||||
(style.value = postionFns[tempPosition.value](
|
(style.value = postionFns[props.position](
|
||||||
props.el,
|
props.el,
|
||||||
popper.value,
|
popper.value,
|
||||||
innnerPosition
|
innnerPosition
|
||||||
@ -126,6 +128,12 @@ const invokeShowPosistion = function () {
|
|||||||
setTimeout(() => innerVisible.value && showPosistion(), 2);
|
setTimeout(() => innerVisible.value && showPosistion(), 2);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 事件绑定
|
||||||
|
on(props.el, triggerArr[0], doShow);
|
||||||
|
on(triggerArr[1] ?? props.el, triggerArr[2], doHidden);
|
||||||
|
checkTarget.value = triggerArr[3];
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
invokeShowPosistion();
|
invokeShowPosistion();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,47 +0,0 @@
|
|||||||
import { h, ref, render, watchEffect, watch } from "vue";
|
|
||||||
import popper from "./index.vue";
|
|
||||||
import { once } from "../../tools/domUtil";
|
|
||||||
const EVENT_MAP: any = {
|
|
||||||
hover: "mouseenter",
|
|
||||||
click: "click",
|
|
||||||
};
|
|
||||||
const usePopper = {
|
|
||||||
createPopper(el: HTMLElement, props: any, trigger: string) {
|
|
||||||
const _this = this;
|
|
||||||
once(el, EVENT_MAP[trigger], () => {
|
|
||||||
// TODO 临时解决方案
|
|
||||||
const _props: any = { el };
|
|
||||||
for (const key in props) {
|
|
||||||
_props[key] = ref(props[key]);
|
|
||||||
}
|
|
||||||
_props.updateVisible = function (val: boolean) {
|
|
||||||
_props.visible && (_props.visible.value = val);
|
|
||||||
};
|
|
||||||
_this.renderPopper(_props);
|
|
||||||
watchEffect(() => {
|
|
||||||
for (const key in _props) {
|
|
||||||
if (key === "visible") {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
_props[key].value = props[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
(val: boolean) => {
|
|
||||||
_props.updateVisible(val);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
renderPopper(props: any) {
|
|
||||||
const container: HTMLDivElement = document.createElement("div");
|
|
||||||
// container.setAttribute("class", "lay-div");
|
|
||||||
const node = h(popper, props);
|
|
||||||
render(node, container);
|
|
||||||
container.firstElementChild &&
|
|
||||||
document.body.appendChild(container.firstElementChild);
|
|
||||||
return node;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default usePopper;
|
|
||||||
72
src/module/skeleton/index.less
Normal file
72
src/module/skeleton/index.less
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
.lay-skeleton{
|
||||||
|
.lay-skeleton-item {
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
.lay-skeleton-type--p{
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-skeleton-type--image{
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
background: #eeeeee;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
i{
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-skeleton-animated {
|
||||||
|
.lay-skeleton-type--image{
|
||||||
|
width: 240px;
|
||||||
|
height: 240px !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
i{
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lay-skeleton-item {
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #eeeeee;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: lay-skeleton-loading 1.2s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.lay-skeleton-first {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-skeleton-last {
|
||||||
|
width: 62.8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes lay-skeleton-loading {
|
||||||
|
0% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/module/skeleton/index.ts
Normal file
9
src/module/skeleton/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import type { App } from 'vue'
|
||||||
|
import Component from './index.vue'
|
||||||
|
import type { IDefineComponent } from '../type/index'
|
||||||
|
|
||||||
|
Component.install = (app: App) => {
|
||||||
|
app.component(Component.name || 'LaySkeleton', Component)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component as IDefineComponent
|
||||||
34
src/module/skeleton/index.vue
Normal file
34
src/module/skeleton/index.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
|
||||||
|
<template v-if="loading">
|
||||||
|
<slot name="skeleton">
|
||||||
|
<lay-skeleton-item
|
||||||
|
v-for="item in rows"
|
||||||
|
:class="[
|
||||||
|
item===1? 'lay-skeleton-first': '',
|
||||||
|
item === rows? 'lay-skeleton-last': '']"
|
||||||
|
type="p"
|
||||||
|
></lay-skeleton-item>
|
||||||
|
</slot>
|
||||||
|
</template>
|
||||||
|
<slot v-else></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="LaySkeleton" lang="ts">
|
||||||
|
import LaySkeletonItem from '../skeletonItem/index.vue'
|
||||||
|
import './index.less'
|
||||||
|
import { defineProps, withDefaults} from "vue";
|
||||||
|
|
||||||
|
export interface LaySkeletonProps {
|
||||||
|
rows?: number;
|
||||||
|
loading?: boolean;
|
||||||
|
animated?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<LaySkeletonProps>(), {
|
||||||
|
rows: 4,
|
||||||
|
loading: false,
|
||||||
|
animated: false,
|
||||||
|
});
|
||||||
|
</script>-
|
||||||
9
src/module/skeletonItem/index.ts
Normal file
9
src/module/skeletonItem/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import type { App } from 'vue'
|
||||||
|
import Component from './index.vue'
|
||||||
|
import type { IDefineComponent } from '../type/index'
|
||||||
|
|
||||||
|
Component.install = (app: App) => {
|
||||||
|
app.component(Component.name || 'LaySkeletonItem', Component)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component as IDefineComponent
|
||||||
19
src/module/skeletonItem/index.vue
Normal file
19
src/module/skeletonItem/index.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
|
||||||
|
<div v-if="type==='image'" >
|
||||||
|
<lay-icon type="layui-icon-picture"></lay-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="LaySkeletonItem" lang="ts">
|
||||||
|
import { defineProps, withDefaults} from "vue";
|
||||||
|
|
||||||
|
export interface LaySkeletonProps {
|
||||||
|
type?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<LaySkeletonProps>(), {
|
||||||
|
type: 'p',
|
||||||
|
});
|
||||||
|
</script>-
|
||||||
@ -130,7 +130,7 @@ if (Array.isArray(props.modelValue)) {
|
|||||||
rangeValue.value = props.modelValue;
|
rangeValue.value = props.modelValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
let verticalRangeValue: any = toRef(props, "verticalrange");
|
let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");
|
||||||
|
|
||||||
const standardtracker = ref<HTMLElement | null>(null);
|
const standardtracker = ref<HTMLElement | null>(null);
|
||||||
const verticaltracker = ref<HTMLElement | null>(null);
|
const verticaltracker = ref<HTMLElement | null>(null);
|
||||||
|
|||||||
191
src/module/step/index.less
Normal file
191
src/module/step/index.less
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
@width-height-pace: 20px;
|
||||||
|
@step-color: #5FB878;
|
||||||
|
|
||||||
|
.lay-step{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
.lay-step-item{
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-item-center{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-last {
|
||||||
|
flex-grow: 0 !important;
|
||||||
|
}
|
||||||
|
.lay-step-item-pace{
|
||||||
|
width: @width-height-pace;
|
||||||
|
height: @width-height-pace;
|
||||||
|
border: 2px #8D8D8D solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: @width-height-pace;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
.is-center{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.lay-step-item-active{
|
||||||
|
border: 2px @step-color solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: @step-color;
|
||||||
|
}
|
||||||
|
.lay-step-item-wait{
|
||||||
|
border: 2px #000000 solid;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item--success {
|
||||||
|
border: 2px @step-color solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: @step-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item--fail{
|
||||||
|
border: 2px #FF5722 solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #FF5722;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item--warning{
|
||||||
|
border: 2px #FFB800 solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #FFB800;
|
||||||
|
}
|
||||||
|
.lay-step-item--primary{
|
||||||
|
border: 2px #1E9FFF solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #1E9FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-success {
|
||||||
|
border: 2px @step-color solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: @step-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-fail{
|
||||||
|
border: 2px #FF5722 solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #FF5722;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-warning{
|
||||||
|
border: 2px #FFB800 solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #FFB800;
|
||||||
|
}
|
||||||
|
.lay-step-item-primary{
|
||||||
|
border: 2px #1E9FFF solid;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #1E9FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-content{
|
||||||
|
color: #8D8D8D;
|
||||||
|
.lay-step-item-content-title{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-content-active{
|
||||||
|
color: @step-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-content--success{
|
||||||
|
color: @step-color;
|
||||||
|
}
|
||||||
|
.lay-step-item-content--fail{
|
||||||
|
color: #FF5722;
|
||||||
|
}
|
||||||
|
.lay-step-item-content--warning{
|
||||||
|
color: #FFB800;
|
||||||
|
}
|
||||||
|
.lay-step-item-content--primary{
|
||||||
|
color: #1E9FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-content-wait{
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.lay-step-item-content-success{
|
||||||
|
color: @step-color;
|
||||||
|
}
|
||||||
|
.lay-step-item-content-fail{
|
||||||
|
color: #FF5722;
|
||||||
|
}
|
||||||
|
.lay-step-item-content-warning{
|
||||||
|
color: #FFB800;
|
||||||
|
}
|
||||||
|
.lay-step-item-content-primary{
|
||||||
|
color: #1E9FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.lay-step-item-line{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-line:before {
|
||||||
|
z-index: -1;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
width: 100%;
|
||||||
|
background: #C9C5C5;
|
||||||
|
}
|
||||||
|
.is-line-center:before {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-line-active:before {
|
||||||
|
transition: background 150ms;
|
||||||
|
background: #5FB878 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-line-fail:before {
|
||||||
|
transition: background 150ms;
|
||||||
|
background: #FF5722 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-line-warning:before {
|
||||||
|
transition: background 150ms;
|
||||||
|
background: #FFB800 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-step-item-line-primary:before {
|
||||||
|
transition: background 150ms;
|
||||||
|
background: #1E9FFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.lay-step-column {
|
||||||
|
height: 100%;
|
||||||
|
flex-flow: column;
|
||||||
|
.lay-step-item-line{
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
.lay-step-item-line:before {
|
||||||
|
z-index: -1;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: block;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background: #C9C5C5;
|
||||||
|
}
|
||||||
|
.is-vertical{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -3,7 +3,7 @@ import Component from "./index.vue";
|
|||||||
import type { IDefineComponent } from "../type/index";
|
import type { IDefineComponent } from "../type/index";
|
||||||
|
|
||||||
Component.install = (app: App) => {
|
Component.install = (app: App) => {
|
||||||
app.component(Component.name || "LayMenuChildItem", Component);
|
app.component(Component.name || "laySetup", Component);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Component as IDefineComponent;
|
export default Component as IDefineComponent;
|
||||||
43
src/module/step/index.vue
Normal file
43
src/module/step/index.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="layStep" lang="ts">
|
||||||
|
import { ref, watch, provide, defineProps, withDefaults } from "vue";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
export interface LayStepProps {
|
||||||
|
active?: number;
|
||||||
|
center?: boolean;
|
||||||
|
direction?: string;
|
||||||
|
space?: string;
|
||||||
|
currentStatus?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<LayStepProps>(), {
|
||||||
|
active: 0,
|
||||||
|
center: false,
|
||||||
|
direction: "horizontal",
|
||||||
|
space: "auto",
|
||||||
|
currentStatus: "primary",
|
||||||
|
});
|
||||||
|
|
||||||
|
const steps = ref([]);
|
||||||
|
|
||||||
|
watch(steps, () => {
|
||||||
|
steps.value.forEach(
|
||||||
|
(instance: { setIndex: (arg0: any) => void }, index: any) => {
|
||||||
|
instance.setIndex(index);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
provide("LayStep", {
|
||||||
|
props,
|
||||||
|
steps,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
9
src/module/stepItem/index.ts
Normal file
9
src/module/stepItem/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import type { App } from "vue";
|
||||||
|
import Component from "./index.vue";
|
||||||
|
import type { IDefineComponent } from "../type/index";
|
||||||
|
|
||||||
|
Component.install = (app: App) => {
|
||||||
|
app.component(Component.name || "laySetupItem", Component);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Component as IDefineComponent;
|
||||||
152
src/module/stepItem/index.vue
Normal file
152
src/module/stepItem/index.vue
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'lay-step-item',
|
||||||
|
isLast && !isCenter ? 'lay-step-item-last' : '',
|
||||||
|
isCenter ? 'is-item-center' : '',
|
||||||
|
isVertical ? 'is-vertical' : '',
|
||||||
|
]"
|
||||||
|
:style="{ flexBasis: space, flexGrow: space === 'auto' ? 1 : 0 }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
!isLast
|
||||||
|
? isLineActive
|
||||||
|
? `lay-step-item-line lay-step-item-line-${status || 'active'}`
|
||||||
|
: 'lay-step-item-line'
|
||||||
|
: '',
|
||||||
|
isCenter ? 'is-line-center' : '',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'lay-step-item-pace',
|
||||||
|
isActive ? `lay-step-item-active` : '',
|
||||||
|
isCurrent === index ? `lay-step-item--${currentStatus}` : '',
|
||||||
|
status ? `lay-step-item-${status}` : '',
|
||||||
|
isWait ? 'lay-step-item-wait' : '',
|
||||||
|
isCenter ? 'is-center' : '',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot name="pace">
|
||||||
|
<template v-if="icon">
|
||||||
|
<lay-icon :type="icon"></lay-icon>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<span v-if="!isActive">{{ index + 1 }}</span>
|
||||||
|
<lay-icon
|
||||||
|
v-else
|
||||||
|
:type="status === 'fail' ? 'layui-icon-close' : 'layui-icon-ok'"
|
||||||
|
></lay-icon>
|
||||||
|
</template>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<slot>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'lay-step-item-content',
|
||||||
|
isActive ? `lay-step-item-content-active` : '',
|
||||||
|
isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
|
||||||
|
status ? `lay-step-item-content-${status}` : '',
|
||||||
|
isWait ? 'lay-step-item-content-wait' : '',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="lay-step-item-content-title">{{ title }}</div>
|
||||||
|
<p>{{ content }}</p>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="LayStepItem" lang="ts">
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
inject,
|
||||||
|
onMounted,
|
||||||
|
computed,
|
||||||
|
getCurrentInstance,
|
||||||
|
onBeforeUnmount,
|
||||||
|
reactive,
|
||||||
|
defineProps,
|
||||||
|
withDefaults,
|
||||||
|
} from "vue";
|
||||||
|
|
||||||
|
import type { ComputedRef } from "vue";
|
||||||
|
|
||||||
|
export interface LayStepItemProps {
|
||||||
|
title?: string;
|
||||||
|
content?: string;
|
||||||
|
icon?: string;
|
||||||
|
status?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<LayStepItemProps>(), {
|
||||||
|
title: "",
|
||||||
|
content: "",
|
||||||
|
icon: "",
|
||||||
|
status: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const index = ref(-1);
|
||||||
|
const parents: any = inject("LayStep");
|
||||||
|
const currentInstance: any = getCurrentInstance();
|
||||||
|
const setIndex = (val: number) => {
|
||||||
|
index.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
const stepsCount = computed(() => {
|
||||||
|
return parents.steps.value.length;
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentStatus = computed(() => {
|
||||||
|
return parents.props.currentStatus;
|
||||||
|
});
|
||||||
|
const isCurrent = computed(() => {
|
||||||
|
return parents.props.active;
|
||||||
|
});
|
||||||
|
console.log(isCurrent);
|
||||||
|
const space = computed(() => {
|
||||||
|
return parents.props.space;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isVertical = computed(() => {
|
||||||
|
return parents.props.direction === "vertical";
|
||||||
|
});
|
||||||
|
|
||||||
|
const isCenter = computed(() => {
|
||||||
|
return parents.props.center;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isLineActive: ComputedRef<boolean> = computed(() => {
|
||||||
|
return index.value <= parents.props.active - 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isWait: ComputedRef<boolean> = computed(() => {
|
||||||
|
return index.value === parents.props.active + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isActive: ComputedRef<boolean> = computed(() => {
|
||||||
|
return index.value <= parents.props.active;
|
||||||
|
});
|
||||||
|
const isLast: ComputedRef<boolean> = computed(() => {
|
||||||
|
return (
|
||||||
|
parents.steps.value[stepsCount.value - 1]?.itemId === currentInstance.uid
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const stepItemState = reactive({
|
||||||
|
itemId: computed(() => currentInstance?.uid),
|
||||||
|
setIndex,
|
||||||
|
});
|
||||||
|
|
||||||
|
parents.steps.value = [...parents.steps.value, stepItemState];
|
||||||
|
|
||||||
|
onMounted(() => {});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
parents.steps.value = parents.steps.value.filter(
|
||||||
|
(instance: { itemId: any }) => instance.itemId !== currentInstance.uid
|
||||||
|
);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<li class="layui-timeline-item">
|
<li class="layui-timeline-item">
|
||||||
<i class="layui-icon layui-timeline-axis"></i>
|
<i class="layui-icon layui-timeline-axis" v-if="slot.dot">
|
||||||
|
<slot name="dot"></slot>
|
||||||
|
</i>
|
||||||
|
<i class="layui-icon layui-timeline-axis" v-else></i>
|
||||||
<div class="layui-timeline-content layui-text">
|
<div class="layui-timeline-content layui-text">
|
||||||
<div v-if="simple" class="layui-timeline-title">
|
<div v-if="simple" class="layui-timeline-title">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
@ -20,7 +23,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineProps } from "vue";
|
import { defineProps, useSlots } from "vue";
|
||||||
|
|
||||||
|
const slot = useSlots();
|
||||||
|
|
||||||
export interface LayTimelineItemProps {
|
export interface LayTimelineItemProps {
|
||||||
title: string;
|
title: string;
|
||||||
|
|||||||
@ -1,8 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<slot></slot>
|
||||||
|
<lay-popper v-if="isMounted" v-bind="innerProps"></lay-popper>
|
||||||
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import usePopper from "../popper/usePopper";
|
import LayPopper from "../popper/index.vue";
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent, ref } from "vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "LayTooltip",
|
name: "LayTooltip",
|
||||||
|
components: {
|
||||||
|
LayPopper
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
content: {
|
content: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
@ -22,21 +29,26 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
visible: {
|
visible: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: false,
|
||||||
},
|
},
|
||||||
isCanHide: {
|
isCanHide: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
setup(){
|
||||||
|
const isMounted = ref(false);
|
||||||
|
return {
|
||||||
|
isMounted
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
innerProps(){
|
||||||
|
return {el: this.$el.nextElementSibling, ...this.$props};
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const _this = this;
|
this.$nextTick(() => this.isMounted = true);
|
||||||
this.$nextTick(() => {
|
}
|
||||||
usePopper.createPopper(_this.$el, _this.$props, "hover");
|
|
||||||
});
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
return this.$slots.default && this.$slots.default()[0];
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user