theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs): 修复侧边目录滚动

Browse Source
This commit is contained in:
sight 2022-04-01 23:39:56 +08:00
parent 0c32eb1df5
commit 00dfe2d769
3 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
example/docs/zh-CN/components/animation.md
View File

@ -16,51 +16,51 @@
<div class="anim"> <div class="anim">
<ul class="layui-border-box site-doc-icon site-doc-anim"> <ul class="layui-border-box site-doc-icon site-doc-anim">
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-down" @click="playAnimation">顶部往下滑入</div> <div class="layui-anim layui-anim-down" @click="replay">顶部往下滑入</div>
<div class="code">layui-anim-down</div> <div class="code">layui-anim-down</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-downbit" @click="playAnimation">微微往下滑入</div> <div class="layui-anim layui-anim-downbit" @click="replay">微微往下滑入</div>
<div class="code">layui-anim-downbit</div> <div class="code">layui-anim-downbit</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-up" @click="playAnimation">底部往上滑入</div> <div class="layui-anim layui-anim-up" @click="replay">底部往上滑入</div>
<div class="code">layui-anim-up</div> <div class="code">layui-anim-up</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-upbit" @click="playAnimation">微微往上滑入</div> <div class="layui-anim layui-anim-upbit" @click="replay">微微往上滑入</div>
<div class="code">layui-anim-upbit</div> <div class="code">layui-anim-upbit</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-scale" @click="playAnimation">平滑放大</div> <div class="layui-anim layui-anim-scale" @click="replay">平滑放大</div>
<div class="code">layui-anim-scale</div> <div class="code">layui-anim-scale</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-scaleSpring" @click="playAnimation">弹簧式放大</div> <div class="layui-anim layui-anim-scaleSpring" @click="replay">弹簧式放大</div>
<div class="code">layui-anim-scaleSpring</div> <div class="code">layui-anim-scaleSpring</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-scalesmall" @click="playAnimation">平滑放小</div> <div class="layui-anim layui-anim-scalesmall" @click="replay">平滑放小</div>
<div class="code">layui-anim-scalesmall</div> <div class="code">layui-anim-scalesmall</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-scalesmall-spring" @click="playAnimation">弹簧式放小</div> <div class="layui-anim layui-anim-scalesmall-spring" @click="replay">弹簧式放小</div>
<div class="code">layui-anim-scalesmall-spring</div> <div class="code">layui-anim-scalesmall-spring</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-fadein" @click="playAnimation">渐现</div> <div class="layui-anim layui-anim-fadein" @click="replay">渐现</div>
<div class="code">layui-anim-fadein</div> <div class="code">layui-anim-fadein</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-fadeout" @click="playAnimation">渐隐</div> <div class="layui-anim layui-anim-fadeout" @click="replay">渐隐</div>
<div class="code">layui-anim-fadeout</div> <div class="code">layui-anim-fadeout</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-rotate" @click="playAnimation">360度旋转</div> <div class="layui-anim layui-anim-rotate" @click="replay">360度旋转</div>
<div class="code">layui-anim-rotate</div> <div class="code">layui-anim-rotate</div>
</li> </li>
<li style="height:auto"> <li style="height:auto">
<div class="layui-anim layui-anim-rotate layui-anim-loop" @click="playAnimation">循环动画</div> <div class="layui-anim layui-anim-rotate layui-anim-loop" @click="replay">循环动画</div>
<div class="code">追加：layui-anim-loop</div> <div class="code">追加：layui-anim-loop</div>
</li> </li>
</ul> </ul>
@ -72,7 +72,7 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const playAnimation = (e) => { const replay = (e) => {
const el = e.currentTarget; const el = e.currentTarget;
const targetClass = el.classList[1]; const targetClass = el.classList[1];
el.classList.remove(targetClass); el.classList.remove(targetClass);
@ -81,7 +81,7 @@ export default {
},100) },100)
} }
return { return {
playAnimation replay
} }
} }
} }

4
example/docs/zh-CN/components/icon.md
View File

@ -116,7 +116,7 @@ npm install @layui/icons-vue
<template> <template>
<ul class="site-doc-icon"> <ul class="site-doc-icon">
<li v-for="(layIcon, index) of LayIconList" @click="copyIconClass(layIcon.class)"> <li v-for="(layIcon, index) of LayIconList" @click="copy(layIcon.class)">
<i :class="[`layui-icon ${layIcon.class}`]"></i> <i :class="[`layui-icon ${layIcon.class}`]"></i>
<div class="doc-icon-name">{{ layIcon.name }}</div> <div class="doc-icon-name">{{ layIcon.name }}</div>
<div class="doc-icon-code">&amp;#x{{ iconsUnicode[index] }};</div> <div class="doc-icon-code">&amp;#x{{ iconsUnicode[index] }};</div>
@ -133,7 +133,7 @@ npm install @layui/icons-vue
const iconsUnicode = reactive([]); const iconsUnicode = reactive([]);
function copyIconClass(iconClass) { function copy(iconClass) {
const { isSupported, copy, copied } = useClipboard() const { isSupported, copy, copied } = useClipboard()
const permissionWrite = usePermission('clipboard-write') const permissionWrite = usePermission('clipboard-write')
if (isSupported && permissionWrite.value === 'granted') { if (isSupported && permissionWrite.value === 'granted') {

2
example/src/components/LayAnchor.vue
View File

@ -10,6 +10,7 @@
<lay-icon :type="iconType" size="40"> </lay-icon> <lay-icon :type="iconType" size="40"> </lay-icon>
</lay-button> </lay-button>
</div> </div>
<lay-scroll :scrollWidth="0">
<ul> <ul>
<li <li
v-for="(anchor, index) in anchorList" v-for="(anchor, index) in anchorList"
@ -26,6 +27,7 @@
> >
</li> </li>
</ul> </ul>
</lay-scroll>
</aside> </aside>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">