init
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
import{f as T,r as s,o as c,j as r,h as t,g as o,B as p,v as a,F as B,k as N,d as j,i as n}from"./.pnpm.8fb36023.js";const M={class:"markdown-body"},S=n("p",{class:"describe-plugin"},"\u865A\u62DF\u6EDA\u52A8, \u5E38\u7528\u4E8E\u7F8E\u5316\u6D4F\u89C8\u5668\u539F\u751F\u6EDA\u52A8\u6761\u3002",-1),V=n("p",null,[a("\u4F7F\u7528 "),n("code",null,"lay-scroll"),a(" \u6807\u7B7E, \u521B\u5EFA\u4E00\u4E2A\u865A\u62DF\u6EDA\u52A8\u5BB9\u5668")],-1),z=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("changeTotal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("\u4FEE\u6539\u6570\u636E"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-button")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("changeMaxTotal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("\u4FEE\u6539\u6570\u636E"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-button")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-scroll")]),a(),n("span",{class:"token attr-name"},"height"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("200px"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background-color"),n("span",{class:"token punctuation"},":"),a(" whitesmoke")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"thumbColor"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#000000"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-container")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-row")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-col")]),a(),n("span",{class:"token attr-name"},"span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-panel")]),a(`
|
||||
`),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("(n, index) in total"),n("span",{class:"token punctuation"},'"')]),a(`
|
||||
`),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("n"),n("span",{class:"token punctuation"},'"')]),a(`
|
||||
`),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),a(" 10px"),n("span",{class:"token punctuation"},";"),a(),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(`
|
||||
`),n("span",{class:"token punctuation"},">")]),a("\u5185\u5BB9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-panel")]),a(`
|
||||
`),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-col")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-row")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-container")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-scroll")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"setup"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"const"),a(" total "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"50"),n("span",{class:"token punctuation"},")"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeTotal"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
total`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"2"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeMaxTotal"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
total`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"50"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),F=n("table",null,[n("thead",null,[n("tr",null,[n("th",null,"\u5C5E\u6027"),n("th",null,"\u63CF\u8FF0"),n("th",null,"\u53EF\u9009\u503C")])]),n("tbody",null,[n("tr",null,[n("td",null,"height"),n("td",null,"\u9AD8\u5EA6"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"thumbWidth"),n("td",null,"\u6ED1\u5757\u5BBD\u5EA6"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"thumbColor"),n("td",null,"\u6ED1\u5757\u989C\u8272"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"trackColor"),n("td",null,"\u6ED1\u69FD\u989C\u8272"),n("td",null,"\u2013")])])],-1),E={style:{display:"flex","justify-content":"space-between","margin-top":"20px"}},G={},H={__name:"scroll",setup(I,{expose:d}){let l=T(50),y=()=>{l.value=2},_=()=>{l.value=50};return d({frontmatter:{}}),(L,W)=>{const g=s("lay-anchor"),e=s("lay-field"),u=s("lay-button"),m=s("lay-panel"),h=s("lay-col"),f=s("lay-row"),b=s("lay-container"),v=s("lay-scroll"),x=s("lay-code"),w=s("lay-table-box"),C=s("lay-contributor"),k=s("lay-icon"),i=s("router-link");return c(),r("div",M,[t(g,{anchors:"\u57FA\u672C\u4ECB\u7ECD,\u57FA\u7840\u4F7F\u7528,Scroll \u5C5E\u6027",currIndex:-1,show:!0}),t(e,{id:"\u57FA\u672C\u4ECB\u7ECD",title:"\u57FA\u672C\u4ECB\u7ECD",style:{"margin-top":"21px","margin-bottom":"20px"}}),S,t(e,{id:"\u57FA\u7840\u4F7F\u7528",title:"\u57FA\u7840\u4F7F\u7528",style:{"margin-top":"21px","margin-bottom":"20px"}}),t(x,null,{description:o(()=>[V]),code:o(()=>[z]),default:o(()=>[t(u,{onClick:p(y)},{default:o(()=>[a("\u4FEE\u6539\u6570\u636E")]),_:1},8,["onClick"]),t(u,{onClick:p(_)},{default:o(()=>[a("\u4FEE\u6539\u6570\u636E")]),_:1},8,["onClick"]),t(v,{height:"200px",style:{"background-color":"whitesmoke"},thumbColor:"#000000"},{default:o(()=>[t(b,null,{default:o(()=>[t(f,null,{default:o(()=>[t(h,{span:"24"},{default:o(()=>[(c(!0),r(B,null,N(p(l),(q,A)=>(c(),j(m,{key:q,style:{margin:"10px",padding:"10px"}},{default:o(()=>[a("\u5185\u5BB9")]),_:2},1024))),128))]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),t(e,{id:"Scroll \u5C5E\u6027",title:"Scroll \u5C5E\u6027",style:{"margin-top":"21px","margin-bottom":"20px"}}),t(w,null,{default:o(()=>[F]),_:1}),t(C,{"file-path":"scroll"}),n("div",E,[n("div",null,[t(i,{to:"/zh-CN/components/result",class:"lay-link",style:{display:""}},{default:o(()=>[t(k,{type:"layui-icon-left"}),a("\u7ED3\u679C")]),_:1})]),n("div",null,[t(i,{to:"/zh-CN/components/noticeBar",class:"lay-link",style:{display:""}},{default:o(()=>[a("\u901A\u544A\u680F "),t(k,{type:"layui-icon-right"})]),_:1})])])])}}};export{H as default,G as frontmatter};
|
||||
Binary file not shown.
@@ -0,0 +1 @@
|
||||
x+)JMU06c040031Q<31><51>KI<4B><49><EFBFBD>*fPq<50><71> <18><>аy<D0B0><79><EFBFBD>7<>;n7<6E>1=<0F>
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,5 @@
|
||||
declare const _default: {
|
||||
name: string;
|
||||
class: string;
|
||||
}[];
|
||||
export default _default;
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<lay-layout>
|
||||
<lay-side>
|
||||
<lay-scroll style="overflow-y: scroll">
|
||||
<ul class="layui-menu layui-menu-lg layui-menu-docs">
|
||||
<li
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
class="layui-menu-item-group"
|
||||
lay-options="{type: 'group', isAllowSpread: true}"
|
||||
>
|
||||
<div class="layui-menu-body-title">{{ menu.title }}</div>
|
||||
<hr />
|
||||
<ul>
|
||||
<li
|
||||
v-for="children in menu.children"
|
||||
:key="children"
|
||||
:class="[
|
||||
currentPath === children.path
|
||||
? 'layui-menu-item-checked2'
|
||||
: '',
|
||||
]"
|
||||
@click="handleClick(children)"
|
||||
>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link :to="children.path">
|
||||
<span>{{ children.title }}</span>
|
||||
<span class="layui-font-12 layui-font-gray">
|
||||
{{ children.subTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-scroll>
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
</lay-layout>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const currentPath = ref("/zh-CN/guide");
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(val) => {
|
||||
currentPath.value = val;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const menus = [
|
||||
{
|
||||
id: 1,
|
||||
title: "基础",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
title: "介绍",
|
||||
subTitle: "introduce",
|
||||
path: "/zh-CN/guide/introduce",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "安装",
|
||||
subTitle: "started",
|
||||
path: "/zh-CN/guide/getStarted",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "更新",
|
||||
subTitle: "change",
|
||||
path: "/zh-CN/guide/changelog",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "主题",
|
||||
subTitle: "theme",
|
||||
path: "/zh-CN/guide/theme",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "夜间",
|
||||
subTitle: "dark",
|
||||
path: "/zh-CN/guide/dark",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "语言",
|
||||
subTitle: "locale",
|
||||
path: "/zh-CN/guide/locale",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "问题",
|
||||
subTitle: "problem",
|
||||
path: "/zh-CN/guide/problem",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "插件",
|
||||
subTitle: "member",
|
||||
path: "/zh-CN/guide/plugin",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "团队",
|
||||
subTitle: "member",
|
||||
path: "/zh-CN/guide/member",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const selected = ref(1);
|
||||
|
||||
const handleClick = function (menu) {
|
||||
selected.value = menu.id;
|
||||
router.push(menu.path);
|
||||
};
|
||||
|
||||
return {
|
||||
menus,
|
||||
selected,
|
||||
currentPath,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
|
||||
var index = /* @__PURE__ */ (() => ".layui-container{position:relative;margin:0 auto;padding:0 15px;box-sizing:border-box}.layui-fluid{position:relative;margin:0 auto;padding:0 15px}\n")();
|
||||
const __default__ = {
|
||||
name: "LayContainer"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
fluid: { default: false }
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const classes = computed(() => props.fluid ? "layui-fluid" : "layui-container");
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass(unref(classes))
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<svg
|
||||
focusable="false"
|
||||
class=""
|
||||
data-icon="eye-invisible"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
viewBox="64 64 896 896"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
|
||||
></path>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,140 @@
|
||||
:root {
|
||||
--input-border-radius: var(--global-border-radius);
|
||||
--input-border-color: var(--global-neutral-color-3);
|
||||
}
|
||||
|
||||
@input-lg: 44px;
|
||||
@input-md: 38px;
|
||||
@input-sm: 32px;
|
||||
@input-xs: 26px;
|
||||
|
||||
.set-size(@size) {
|
||||
& {
|
||||
height: @size;
|
||||
.layui-input {
|
||||
height: @size;
|
||||
line-height: @size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--input-border-color);
|
||||
border-radius: var(--input-border-radius);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.layui-input input{
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
padding-left: 10px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layui-input-append {
|
||||
background-color: #fafafa;
|
||||
border-left: 1px solid var(--input-border-color);
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layui-input-prepend {
|
||||
background-color: #fafafa;
|
||||
border-right: 1px solid var(--input-border-color);
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layui-input-wrapper {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layui-input:hover,
|
||||
.layui-input:focus-within {
|
||||
border-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.layui-input-clear,
|
||||
.layui-input-prefix,
|
||||
.layui-input-suffix,
|
||||
.layui-input-password {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layui-input-clear,
|
||||
.layui-input-password,
|
||||
.layui-input-prefix,
|
||||
.layui-input-suffix {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-input-has-prefix {
|
||||
input {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-input-clear,
|
||||
.layui-input-password {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.layui-input-clear:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.layui-input input::-webkit-input-placeholder {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.layui-input input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-input-disabled {
|
||||
border-color: var(--input-border-color)!important;
|
||||
}
|
||||
|
||||
.layui-input-disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.layui-input-disabled,
|
||||
.layui-input-disabled * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.layui-input{
|
||||
&[size="lg"] {
|
||||
.set-size(@input-lg);
|
||||
}
|
||||
&[size="md"] {
|
||||
.set-size(@input-md);
|
||||
}
|
||||
&[size="sm"] {
|
||||
.set-size(@input-sm);
|
||||
}
|
||||
&[size="xs"] {
|
||||
.set-size(@input-xs);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayFullscreen",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
ref,
|
||||
withDefaults,
|
||||
computed,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
Ref,
|
||||
} from "vue";
|
||||
import "./index.less";
|
||||
|
||||
export interface FullscreenProps {
|
||||
target?: HTMLElement;
|
||||
immersive?: boolean;
|
||||
position?: string;
|
||||
zIndex?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<FullscreenProps>(), {
|
||||
immersive: true,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["fullscreenchange"]);
|
||||
type MethodMap = [
|
||||
"requestFullscreen",
|
||||
"exitFullscreen",
|
||||
"fullscreenElement",
|
||||
"fullscreenEnabled",
|
||||
"fullscreenchange",
|
||||
"fullscreenerror"
|
||||
];
|
||||
|
||||
const methodMap: any[] = [
|
||||
[
|
||||
"requestFullscreen",
|
||||
"exitFullscreen",
|
||||
"fullscreenElement",
|
||||
"fullscreenEnabled",
|
||||
"fullscreenchange",
|
||||
"fullscreenerror",
|
||||
],
|
||||
[
|
||||
"webkitRequestFullscreen",
|
||||
"webkitExitFullscreen",
|
||||
"webkitFullscreenElement",
|
||||
"webkitFullscreenEnabled",
|
||||
"webkitfullscreenchange",
|
||||
"webkitfullscreenerror",
|
||||
],
|
||||
[
|
||||
"webkitRequestFullScreen",
|
||||
"webkitCancelFullScreen",
|
||||
"webkitCurrentFullScreenElement",
|
||||
"webkitCancelFullScreen",
|
||||
"webkitfullscreenchange",
|
||||
"webkitfullscreenerror",
|
||||
],
|
||||
[
|
||||
"mozRequestFullScreen",
|
||||
"mozCancelFullScreen",
|
||||
"mozFullScreenElement",
|
||||
"mozFullScreenEnabled",
|
||||
"mozfullscreenchange",
|
||||
"mozfullscreenerror",
|
||||
],
|
||||
[
|
||||
"msRequestFullscreen",
|
||||
"msExitFullscreen",
|
||||
"msFullscreenElement",
|
||||
"msFullscreenEnabled",
|
||||
"MSFullscreenChange",
|
||||
"MSFullscreenError",
|
||||
],
|
||||
];
|
||||
// 默认请求全屏的元素
|
||||
const defaultElement: HTMLElement = document.documentElement;
|
||||
// 要请求全屏显示的元素
|
||||
let targetEl: Ref<HTMLElement | undefined> = ref<HTMLElement | undefined>(
|
||||
props.target || defaultElement
|
||||
);
|
||||
// 是否全屏
|
||||
const isFullscreen = ref(false);
|
||||
// 是否支持全屏
|
||||
let isSupported: boolean = false;
|
||||
|
||||
// 包装全屏 API,屏蔽浏览器差异
|
||||
const unprefixedMethods: MethodMap = methodMap[0];
|
||||
const fullscreenAPI: Record<string, string> = {};
|
||||
for (const methodList of methodMap) {
|
||||
if (methodList[1] in document) {
|
||||
for (const [index, method] of methodList.entries()) {
|
||||
fullscreenAPI[unprefixedMethods[index]] = method;
|
||||
}
|
||||
isSupported = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 进入全屏
|
||||
* @param targetEl 请求全屏显示的元素,不是所有元素都支持,建议用 div
|
||||
*/
|
||||
async function enter(targetEl: HTMLElement | undefined) {
|
||||
if (!isSupported) return;
|
||||
if (!targetEl) targetEl = activeEl.value || defaultElement;
|
||||
let fullscreenEnter = null;
|
||||
if (props.immersive) {
|
||||
// @ts-ignore
|
||||
fullscreenEnter = Promise.resolve(
|
||||
// @ts-ignore
|
||||
targetEl[fullscreenAPI.requestFullscreen]()
|
||||
);
|
||||
} else {
|
||||
styleLayFullscreen(targetEl, false);
|
||||
fullscreenEnter = Promise.resolve(
|
||||
targetEl?.classList.add("layui-fullscreen")
|
||||
);
|
||||
}
|
||||
return await fullscreenEnter?.then(() => {
|
||||
isFullscreen.value = true;
|
||||
emit("fullscreenchange", isFullscreen.value);
|
||||
return !!document.fullscreenElement;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出全屏
|
||||
* @param targetEl 退出全屏元素
|
||||
*/
|
||||
async function exit(targetEl: HTMLElement | Document | undefined) {
|
||||
if (!isSupported) return;
|
||||
if (!targetEl) targetEl = activeEl.value || document;
|
||||
let fullscreenExit = null;
|
||||
if (props.immersive) {
|
||||
// @ts-ignore
|
||||
fullscreenExit = Promise.resolve(document[fullscreenAPI.exitFullscreen]());
|
||||
} else {
|
||||
if (targetEl instanceof Document) return;
|
||||
styleLayFullscreen(targetEl, true);
|
||||
fullscreenExit = Promise.resolve(
|
||||
targetEl?.classList.remove("layui-fullscreen")
|
||||
);
|
||||
}
|
||||
return await fullscreenExit?.then(() => {
|
||||
isFullscreen.value = false;
|
||||
emit("fullscreenchange", isFullscreen.value);
|
||||
return !!document.fullscreenElement;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 进入或退出全屏
|
||||
*/
|
||||
async function toggle() {
|
||||
if (isFullscreen.value) {
|
||||
await exit(activeEl.value);
|
||||
} else {
|
||||
await enter(activeEl.value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param el HTML 元素
|
||||
* @param isRemove 是否移除样式
|
||||
*/
|
||||
const styleLayFullscreen = function (
|
||||
el: HTMLElement,
|
||||
isRemove: boolean = false
|
||||
) {
|
||||
el.style.position = isRemove ? "" : props.position || "";
|
||||
el.style.zIndex = isRemove ? "" : props.zIndex || "";
|
||||
};
|
||||
|
||||
const activeEl = computed(() => (targetEl.value = props.target));
|
||||
|
||||
/**
|
||||
* 处理 fullscreenchange 和浏览器窗口内全屏 Escape 按键事件
|
||||
* @param event 键盘事件
|
||||
*/
|
||||
const onFullscreenchange = function (event: KeyboardEvent) {
|
||||
if (isFullscreen.value && !document.fullscreenElement) {
|
||||
if (props.immersive) {
|
||||
isFullscreen.value = false;
|
||||
emit("fullscreenchange", isFullscreen.value);
|
||||
} else if (event.key === "Escape") {
|
||||
exit(activeEl.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 屏蔽 F11 按键原生事件,用 fullscreenAPI 代替
|
||||
* @param event 键盘事件
|
||||
*/
|
||||
const onKeydownF11 = function (event: KeyboardEvent) {
|
||||
// DOM 根节点全屏
|
||||
let isRootNodeFullscreen =
|
||||
props.immersive && (!activeEl.value || activeEl.value === defaultElement);
|
||||
if (event.key === "F11" && isRootNodeFullscreen) {
|
||||
event.preventDefault();
|
||||
toggle();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
//@ts-ignore
|
||||
document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
|
||||
document.addEventListener("keydown", onFullscreenchange);
|
||||
document.addEventListener("keydown", onKeydownF11);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
//@ts-ignore
|
||||
document.removeEventListener(
|
||||
fullscreenAPI.fullscreenchange,
|
||||
onFullscreenchange
|
||||
);
|
||||
document.removeEventListener("keydown", onFullscreenchange);
|
||||
document.removeEventListener("keydown", onKeydownF11);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot
|
||||
name="default"
|
||||
:isFullscreen="isFullscreen"
|
||||
:enter="enter"
|
||||
:exit="exit"
|
||||
:toggle="toggle"
|
||||
></slot>
|
||||
</template>
|
||||
Reference in New Issue
Block a user