️(docsearch): 本地化 docsearch 资源

This commit is contained in:
就眠儀式 2022-06-02 22:12:21 +08:00
parent 35f3ccad18
commit 8b04f99cc5
6 changed files with 47 additions and 21 deletions

View File

@ -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",

View File

@ -162,6 +162,9 @@
span {
display: none;
}
.layui-nav-item > a {
text-overflow: clip;
}
.layui-nav-more {
display: none;
}

View File

@ -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>

View File

@ -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>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long