Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop
This commit is contained in:
castleiMac
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
|
||||
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 主色调
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 普通容器
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
@@ -9,9 +12,13 @@
|
||||
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
||||
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
||||
<lay-menu-item title="目录" id="7">
|
||||
<lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item>
|
||||
<lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
|
||||
<lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
|
||||
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
|
||||
<lay-menu-item title="菜单二" id="9"></lay-menu-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>
|
||||
</template>
|
||||
@@ -49,9 +56,13 @@ export default {
|
||||
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
||||
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
||||
<lay-menu-item title="目录" id="7">
|
||||
<lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item>
|
||||
<lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
|
||||
<lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
|
||||
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
|
||||
<lay-menu-item title="菜单二" id="9"></lay-menu-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>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本使用
|
||||
:::
|
||||
|
||||
@@ -5,9 +8,9 @@
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -38,9 +41,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -71,9 +74,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -104,9 +107,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -137,9 +140,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -170,7 +173,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -203,9 +206,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -241,9 +244,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@@ -326,6 +329,7 @@ export default {
|
||||
| content | 内容 | -- |
|
||||
| shade | 开启遮盖 | -- |
|
||||
| shadeClose | 遮盖点击关闭 | -- |
|
||||
| shadeOpacity | 遮盖层透明度 | `0.1` |
|
||||
| zIndex | 自定义层级 | -- |
|
||||
| type | 类型 | `1: component` `2: iframe` |
|
||||
| closeBtn | 显示关闭 | true |
|
||||
@@ -333,6 +337,8 @@ export default {
|
||||
| btnAlign | 按钮布局 | `l` `r` `c` |
|
||||
| anim | 入场动画 | `0` `-` `6` |
|
||||
| isOutAnim | 关闭动画 | `true` `false` |
|
||||
| success | 显示回调 | -- |
|
||||
| end | 关闭回调 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: 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
|
||||
:::
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 横向
|
||||
:::
|
||||
|
||||
@@ -69,5 +72,27 @@ export default {
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 纵向区间
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const value4 = ref([20,50])
|
||||
return {
|
||||
value4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
|
||||
@@ -11,7 +11,22 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.3.x">
|
||||
<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>
|
||||
<a name="0-3-1"> </a>
|
||||
<li>
|
||||
<h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3>
|
||||
|
||||
@@ -9,14 +9,11 @@
|
||||
<lay-col md="2">
|
||||
就眠仪式
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Beijing
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：Pear Admin
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@@ -31,14 +28,11 @@
|
||||
<lay-col md="2">
|
||||
落小梅
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：tree table
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Hunan
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：Pear Admin
|
||||
地点：中国 湖南
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@@ -54,14 +48,11 @@
|
||||
<lay-col md="2">
|
||||
halo
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：slider
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Beijing
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：暂无
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@@ -77,17 +68,14 @@
|
||||
<lay-col md="2">
|
||||
须弥
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：未知
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：暂无
|
||||
地点：中国 广州
|
||||
</lay-col>
|
||||
<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-row>
|
||||
</lay-card>
|
||||
@@ -100,14 +88,11 @@
|
||||
<lay-col md="2">
|
||||
Sight
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：count-up backtop
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：未知
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：暂无
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@@ -123,14 +108,31 @@
|
||||
<lay-col md="2">
|
||||
finalsummer
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：layer-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：未知
|
||||
地点：中国 未知
|
||||
</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="1">
|
||||
<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="2">
|
||||
莫名点
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：skeleton
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：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>
|
||||
<style>
|
||||
.lay-table-box table {
|
||||
width: 100%; /*表格宽度*/
|
||||
border-collapse: collapse; /*使用单一线条的边框*/
|
||||
empty-cells: show; /*单元格无内容依旧绘制边框*/
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
border-right: 1px solid whitesmoke;
|
||||
border-left: 1px solid whitesmoke;
|
||||
border-radius: 4px;
|
||||
@@ -18,8 +18,8 @@
|
||||
.lay-table-box table th,
|
||||
.lay-table-box table td {
|
||||
font-size: 14px;
|
||||
width: 160px;
|
||||
max-width: 160px;
|
||||
width: 50px;
|
||||
max-width: 180px;
|
||||
height: 50px; /*统一每一行的默认高度*/
|
||||
border-top: 1px solid whitesmoke; /*内部边框样式*/
|
||||
padding: 0 10px; /*内边距*/
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.3.1 </a>
|
||||
<a href="javascript:void(0)"> 0.3.2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
|
||||
@@ -7,6 +7,7 @@ import LayCode from './components/LayCode.vue'
|
||||
import LaySearch from './components/LaySearch.vue'
|
||||
import LayTableBox from './components/LayTableBox.vue'
|
||||
import LayComment from './components/LayComment.vue'
|
||||
import LayAnchor from './components/LayAnchor.vue'
|
||||
import './assets/css/index.css'
|
||||
|
||||
export function createApp(): {
|
||||
@@ -23,6 +24,7 @@ export function createApp(): {
|
||||
.component('LaySearch', LaySearch)
|
||||
.component('LayTableBox', LayTableBox)
|
||||
.component('LayComment', LayComment)
|
||||
.component('LayAnchor',LayAnchor)
|
||||
.use(Layui)
|
||||
|
||||
return { app, router }
|
||||
|
||||
@@ -9,6 +9,7 @@ import createBlock from './create-block'
|
||||
import createDescribe from './create-describe'
|
||||
import createTable from './create-table'
|
||||
import createComment from './create-comment'
|
||||
import createAnchor from './create-anchor'
|
||||
import preWrapper from './pre-wrapper'
|
||||
|
||||
const plugins = [
|
||||
@@ -31,8 +32,9 @@ const plugins = [
|
||||
.use(...createTitle('title', ''))
|
||||
.use(...createDescribe('describe', ''))
|
||||
.use(...createComment('comment', ''))
|
||||
.use(...createAnchor('anchor', ''))
|
||||
},
|
||||
}),
|
||||
] as any
|
||||
|
||||
export default plugins
|
||||
export default plugins
|
||||
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'
|
||||
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{
|
||||
render(tokens: Token[], idx: number): string
|
||||
}
|
||||
typeof container, string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
]
|
||||
|
||||
export default function createContainer(
|
||||
|
||||
@@ -2,11 +2,8 @@ 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
|
||||
}
|
||||
typeof container, string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
]
|
||||
|
||||
export default function createContainer(
|
||||
@@ -27,4 +24,4 @@ export default function createContainer(
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -2,11 +2,8 @@ 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
|
||||
}
|
||||
typeof container, string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
]
|
||||
|
||||
export default function createContainer(
|
||||
@@ -28,4 +25,4 @@ export default function createContainer(
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -2,11 +2,8 @@ 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
|
||||
}
|
||||
typeof container, string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
]
|
||||
|
||||
export default function createContainer(
|
||||
@@ -28,4 +25,4 @@ export default function createContainer(
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -2,11 +2,8 @@ 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
|
||||
}
|
||||
typeof container, string,
|
||||
{ render(tokens: Token[], idx: number): string }
|
||||
]
|
||||
|
||||
export default function createContainer(
|
||||
@@ -17,17 +14,17 @@ export default function createContainer(
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx]
|
||||
const info = token.info.trim().slice(klass.length).trim()
|
||||
if (token.nesting === 1) {
|
||||
return `<lay-field title="${
|
||||
return `<lay-field id="${info || defaultTitle}" title="${
|
||||
info || defaultTitle
|
||||
}" style="margin-top:20px;margin-bottom: 20px;">`
|
||||
}" style="margin-top:21px;margin-bottom: 20px;">`
|
||||
} else {
|
||||
return '</lay-field>\n'
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -19,13 +19,8 @@ export default (md: MarkdownIt): void => {
|
||||
}
|
||||
const start = pos + 3
|
||||
const end = state.skipSpacesBack(max, pos)
|
||||
const rawPath = state.src
|
||||
.slice(start, end)
|
||||
.trim()
|
||||
.replace(/^@/, process.cwd())
|
||||
const content = fs.existsSync(rawPath)
|
||||
? fs.readFileSync(rawPath).toString()
|
||||
: 'Not found: ' + rawPath
|
||||
const rawPath = state.src.slice(start, end).trim().replace(/^@/, process.cwd())
|
||||
const content = fs.existsSync(rawPath) ? fs.readFileSync(rawPath).toString() : 'Not found: ' + rawPath
|
||||
const meta = rawPath.replace(rawPath, '')
|
||||
state.line = startLine + 1
|
||||
const token = state.push('fence', 'code', 0)
|
||||
@@ -36,4 +31,4 @@ export default (md: MarkdownIt): void => {
|
||||
return true
|
||||
}
|
||||
md.block.ruler.before('fence', 'snippet', parser)
|
||||
}
|
||||
}
|
||||
@@ -76,6 +76,11 @@ const zhCN = [
|
||||
component: Component,
|
||||
meta: { title: '组件' },
|
||||
children: [
|
||||
{
|
||||
path: '/zh-CN/components/skeleton',
|
||||
component: () => import('../../docs/zh-CN/components/skeleton.md'),
|
||||
meta: { title: '骨架屏' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/layout',
|
||||
component: () => import('../../docs/zh-CN/components/layout.md'),
|
||||
@@ -354,4 +359,4 @@ const zhCN = [
|
||||
},
|
||||
]
|
||||
|
||||
export default zhCN
|
||||
export default zhCN
|
||||
@@ -37,7 +37,13 @@
|
||||
</lay-scroll>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<div
|
||||
style="
|
||||
padding: 20px;
|
||||
margin-right: 180px;
|
||||
transition: margin 240ms 60ms;
|
||||
"
|
||||
>
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
@@ -98,6 +104,12 @@ export default {
|
||||
id: 1,
|
||||
title: '布局',
|
||||
children: [
|
||||
{
|
||||
id: 111,
|
||||
title: '骨架屏',
|
||||
subTitle: 'skeleton',
|
||||
path: '/zh-CN/components/skeleton',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '布局',
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
>
|
||||
</div>
|
||||
<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
|
||||
><router-link
|
||||
class="layui-inline site-down"
|
||||
@@ -34,7 +34,7 @@
|
||||
>更新日志</router-link
|
||||
></span
|
||||
>
|
||||
<span>下载量：<em class="site-showdowns">2324</em></span>
|
||||
<span>下载量：<em class="site-showdowns">3124</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-banner-other">
|
||||
@@ -44,7 +44,7 @@
|
||||
rel="nofollow"
|
||||
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
|
||||
href="https://gitee.com/layui-vue"
|
||||
|
||||
Reference in New Issue
Block a user