⚡️(docsearch): 本地化 docsearch 资源
This commit is contained in:
parent
35f3ccad18
commit
8b04f99cc5
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.1.5-alpha.1",
|
||||
"version": "1.1.5-alpha.2",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
@ -162,6 +162,9 @@
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
.layui-nav-item > a {
|
||||
text-overflow: clip;
|
||||
}
|
||||
.layui-nav-more {
|
||||
display: none;
|
||||
}
|
||||
|
@ -16,12 +16,12 @@ import {
|
||||
Ref,
|
||||
ref,
|
||||
watch,
|
||||
shallowRef,
|
||||
onMounted,
|
||||
nextTick,
|
||||
CSSProperties,
|
||||
shallowRef,
|
||||
onMounted,
|
||||
nextTick,
|
||||
CSSProperties,
|
||||
} from "vue";
|
||||
import { useResizeObserver } from '@vueuse/core'
|
||||
import { useResizeObserver } from "@vueuse/core";
|
||||
|
||||
export type tabPositionType = "top" | "bottom" | "left" | "right";
|
||||
|
||||
@ -88,29 +88,32 @@ const close = function (index: number, id: any) {
|
||||
|
||||
const activeBarRef = shallowRef<HTMLElement>();
|
||||
const activeEl = shallowRef<HTMLElement | undefined>();
|
||||
const tabBarStyle = ref<CSSProperties>()
|
||||
const tabBarStyle = ref<CSSProperties>();
|
||||
const getBarStyle = () => {
|
||||
let offset = 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 position = axis === 'X' ? 'left' : 'top'
|
||||
const position = axis === "X" ? "left" : "top";
|
||||
const el = activeEl.value;
|
||||
if(!el || !el.parentElement) return;
|
||||
if (!el || !el.parentElement) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
const parentRect = el.parentElement?.getBoundingClientRect();
|
||||
offset = rect[position] - parentRect[position];
|
||||
tabSize = el.getBoundingClientRect()[sizeName];
|
||||
return {
|
||||
[sizeName]: `${tabSize}px`,
|
||||
transform: `translate${axis}(${offset}px)`,
|
||||
}
|
||||
}
|
||||
transform: `translate${axis}(${offset}px)`,
|
||||
};
|
||||
};
|
||||
const update = () => {
|
||||
const parentEL = activeBarRef.value?.parentNode;
|
||||
activeEl.value = parentEL?.querySelector(" .layui-this") as HTMLElement;
|
||||
tabBarStyle.value = getBarStyle();
|
||||
}
|
||||
};
|
||||
|
||||
const containerSize = "";
|
||||
const navSize = "";
|
||||
@ -130,11 +133,11 @@ watch(
|
||||
await nextTick();
|
||||
update();
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
update();
|
||||
})
|
||||
});
|
||||
|
||||
provide("active", active);
|
||||
provide("slotsChange", slotsChange);
|
||||
@ -157,13 +160,17 @@ provide("slotsChange", slotsChange);
|
||||
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
|
||||
v-for="(children, index) in childrens"
|
||||
:key="children.props?.id"
|
||||
:class="[children.props?.id === active ? 'layui-this' : '']"
|
||||
@click.stop="change(children.props?.id)"
|
||||
|
||||
>
|
||||
{{ children.props?.title }}
|
||||
<i
|
||||
@ -173,7 +180,6 @@ provide("slotsChange", slotsChange);
|
||||
></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="layui-tab-content">
|
||||
<slot></slot>
|
||||
|
@ -13,7 +13,7 @@
|
||||
content="layui,layui-vue,vue,layer,layer-vue,ui,components"
|
||||
/>
|
||||
<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>
|
||||
<!--preload-links-->
|
||||
</head>
|
||||
@ -23,6 +23,6 @@
|
||||
<!--app-html-->
|
||||
</div>
|
||||
<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>
|
||||
</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…
Reference in New Issue
Block a user