⚡️(docsearch): 本地化 docsearch 资源
This commit is contained in:
parent
35f3ccad18
commit
8b04f99cc5
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@layui/layui-vue",
|
"name": "@layui/layui-vue",
|
||||||
"version": "1.1.5-alpha.1",
|
"version": "1.1.5-alpha.2",
|
||||||
"author": "就眠儀式",
|
"author": "就眠儀式",
|
||||||
"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",
|
||||||
|
@ -162,6 +162,9 @@
|
|||||||
span {
|
span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.layui-nav-item > a {
|
||||||
|
text-overflow: clip;
|
||||||
|
}
|
||||||
.layui-nav-more {
|
.layui-nav-more {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -16,12 +16,12 @@ import {
|
|||||||
Ref,
|
Ref,
|
||||||
ref,
|
ref,
|
||||||
watch,
|
watch,
|
||||||
shallowRef,
|
shallowRef,
|
||||||
onMounted,
|
onMounted,
|
||||||
nextTick,
|
nextTick,
|
||||||
CSSProperties,
|
CSSProperties,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { useResizeObserver } from '@vueuse/core'
|
import { useResizeObserver } from "@vueuse/core";
|
||||||
|
|
||||||
export type tabPositionType = "top" | "bottom" | "left" | "right";
|
export type tabPositionType = "top" | "bottom" | "left" | "right";
|
||||||
|
|
||||||
@ -88,15 +88,18 @@ const close = function (index: number, id: any) {
|
|||||||
|
|
||||||
const activeBarRef = shallowRef<HTMLElement>();
|
const activeBarRef = shallowRef<HTMLElement>();
|
||||||
const activeEl = shallowRef<HTMLElement | undefined>();
|
const activeEl = shallowRef<HTMLElement | undefined>();
|
||||||
const tabBarStyle = ref<CSSProperties>()
|
const tabBarStyle = ref<CSSProperties>();
|
||||||
const getBarStyle = () => {
|
const getBarStyle = () => {
|
||||||
let offset = 0;
|
let offset = 0;
|
||||||
let tabSize = 0;
|
let tabSize = 0;
|
||||||
const sizeName = props.tabPosition === "top" || props.tabPosition === "bottom" ? "width" : "height";
|
const sizeName =
|
||||||
|
props.tabPosition === "top" || props.tabPosition === "bottom"
|
||||||
|
? "width"
|
||||||
|
: "height";
|
||||||
const axis = sizeName === "width" ? "X" : "Y";
|
const axis = sizeName === "width" ? "X" : "Y";
|
||||||
const position = axis === 'X' ? 'left' : 'top'
|
const position = axis === "X" ? "left" : "top";
|
||||||
const el = activeEl.value;
|
const el = activeEl.value;
|
||||||
if(!el || !el.parentElement) return;
|
if (!el || !el.parentElement) return;
|
||||||
const rect = el.getBoundingClientRect();
|
const rect = el.getBoundingClientRect();
|
||||||
const parentRect = el.parentElement?.getBoundingClientRect();
|
const parentRect = el.parentElement?.getBoundingClientRect();
|
||||||
offset = rect[position] - parentRect[position];
|
offset = rect[position] - parentRect[position];
|
||||||
@ -104,13 +107,13 @@ const getBarStyle = () => {
|
|||||||
return {
|
return {
|
||||||
[sizeName]: `${tabSize}px`,
|
[sizeName]: `${tabSize}px`,
|
||||||
transform: `translate${axis}(${offset}px)`,
|
transform: `translate${axis}(${offset}px)`,
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
const update = () => {
|
const update = () => {
|
||||||
const parentEL = activeBarRef.value?.parentNode;
|
const parentEL = activeBarRef.value?.parentNode;
|
||||||
activeEl.value = parentEL?.querySelector(" .layui-this") as HTMLElement;
|
activeEl.value = parentEL?.querySelector(" .layui-this") as HTMLElement;
|
||||||
tabBarStyle.value = getBarStyle();
|
tabBarStyle.value = getBarStyle();
|
||||||
}
|
};
|
||||||
|
|
||||||
const containerSize = "";
|
const containerSize = "";
|
||||||
const navSize = "";
|
const navSize = "";
|
||||||
@ -130,11 +133,11 @@ watch(
|
|||||||
await nextTick();
|
await nextTick();
|
||||||
update();
|
update();
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
update();
|
update();
|
||||||
})
|
});
|
||||||
|
|
||||||
provide("active", active);
|
provide("active", active);
|
||||||
provide("slotsChange", slotsChange);
|
provide("slotsChange", slotsChange);
|
||||||
@ -157,13 +160,17 @@ provide("slotsChange", slotsChange);
|
|||||||
props.tabPosition ? `is-${tabPosition}` : '',
|
props.tabPosition ? `is-${tabPosition}` : '',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<div ref="activeBarRef" v-if="type === 'brief'" class="layui-tab-active-bar" :style="tabBarStyle"></div>
|
<div
|
||||||
|
ref="activeBarRef"
|
||||||
|
v-if="type === 'brief'"
|
||||||
|
class="layui-tab-active-bar"
|
||||||
|
:style="tabBarStyle"
|
||||||
|
></div>
|
||||||
<li
|
<li
|
||||||
v-for="(children, index) in childrens"
|
v-for="(children, index) in childrens"
|
||||||
:key="children.props?.id"
|
:key="children.props?.id"
|
||||||
:class="[children.props?.id === active ? 'layui-this' : '']"
|
:class="[children.props?.id === active ? 'layui-this' : '']"
|
||||||
@click.stop="change(children.props?.id)"
|
@click.stop="change(children.props?.id)"
|
||||||
|
|
||||||
>
|
>
|
||||||
{{ children.props?.title }}
|
{{ children.props?.title }}
|
||||||
<i
|
<i
|
||||||
@ -173,7 +180,6 @@ provide("slotsChange", slotsChange);
|
|||||||
></i>
|
></i>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-tab-content">
|
<div class="layui-tab-content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
content="layui,layui-vue,vue,layer,layer-vue,ui,components"
|
content="layui,layui-vue,vue,layer,layer-vue,ui,components"
|
||||||
/>
|
/>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
|
<link rel="stylesheet" href="/docsearch/index.css" />
|
||||||
<title>Layui - Vue 开源前端 UI 框架</title>
|
<title>Layui - Vue 开源前端 UI 框架</title>
|
||||||
<!--preload-links-->
|
<!--preload-links-->
|
||||||
</head>
|
</head>
|
||||||
@ -23,6 +23,6 @@
|
|||||||
<!--app-html-->
|
<!--app-html-->
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="/src/entry-client.ts"></script>
|
<script type="module" src="/src/entry-client.ts"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
<script src="/docsearch/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
8
package/document/public/docsearch/index.css
Normal file
8
package/document/public/docsearch/index.css
Normal file
File diff suppressed because one or more lines are too long
9
package/document/public/docsearch/index.js
Normal file
9
package/document/public/docsearch/index.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user