就眠儀式
Gitee
commit
af5a0e0cc9
@ -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 基础使用
|
||||
:::
|
||||
|
||||
|
||||
@ -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,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
|
||||
178
example/src/components/LayAnchor.vue
Normal file
178
example/src/components/LayAnchor.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<aside :class="classAside">
|
||||
<div class="lay-aside-top">
|
||||
<lay-button
|
||||
@click="handlerBtnClick()"
|
||||
type="primary"
|
||||
size="xs"
|
||||
:class="classAsideBtn"
|
||||
>
|
||||
<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="(item, index) in anchorsComput"
|
||||
:key="index"
|
||||
class="lay-aside-list"
|
||||
:class="{ active: index === curridx }"
|
||||
@click="curridx = index"
|
||||
>
|
||||
<a
|
||||
:href="`#${item}`"
|
||||
class="lay-aside-link"
|
||||
:class="{ active: index === curridx }"
|
||||
>{{ item }}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-scroll>
|
||||
</aside>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
anchors?: Array<string> | string;
|
||||
currIndex: number;
|
||||
show: boolean | string;
|
||||
}>();
|
||||
|
||||
let curridx = ref(props.currIndex);
|
||||
const show = ref(props.show);
|
||||
const iconType = ref("layui-icon-right");
|
||||
const anchor = props.anchors;
|
||||
|
||||
const anchorsComput = computed(() => {
|
||||
return typeof anchor === "string" ? anchor?.split(",") : anchor;
|
||||
});
|
||||
|
||||
const classAside = computed(() => [
|
||||
"lay-aside",
|
||||
{ "lay-aside-collapse": !show.value },
|
||||
]);
|
||||
|
||||
const classAsideBtn = computed(() => [
|
||||
"lay-aside-collapse-btn",
|
||||
{ "lay-aside-collapse-btn-collapse": !show.value },
|
||||
]);
|
||||
|
||||
const handlerBtnClick = () => {
|
||||
show.value = !show.value;
|
||||
iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
|
||||
};
|
||||
</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: right 200ms;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.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);
|
||||
&:hover {
|
||||
background-color: #f6f6f6 !important;
|
||||
color: #5fb878;
|
||||
}
|
||||
&:active {
|
||||
background-color: #f6f6f6 !important;
|
||||
color: #89d89f;
|
||||
}
|
||||
}
|
||||
.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: #5fb878 !important;
|
||||
}
|
||||
|
||||
.lay-aside-collapse {
|
||||
right: -180px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: right 200ms;
|
||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||
&:hover {
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
}
|
||||
.lay-aside-collapse-btn-collapse {
|
||||
right:0px;
|
||||
}
|
||||
|
||||
@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>
|
||||
@ -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; /*内边距*/
|
||||
|
||||
@ -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,6 +32,7 @@ const plugins = [
|
||||
.use(...createTitle('title', ''))
|
||||
.use(...createDescribe('describe', ''))
|
||||
.use(...createComment('comment', ''))
|
||||
.use(...createAnchor('anchor', ''))
|
||||
},
|
||||
}),
|
||||
] as any
|
||||
|
||||
38
example/src/plugin/create-anchor.ts
Normal file
38
example/src/plugin/create-anchor.ts
Normal file
@ -0,0 +1,38 @@
|
||||
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";
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
@ -17,11 +17,11 @@ 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;">`
|
||||
} else {
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
</lay-scroll>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<div style="padding: 20px; margin-right: 180px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user