init
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,138 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySplitPanel",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, provide, withDefaults, onMounted } from "vue";
|
||||
import "./index.less";
|
||||
import { useMousePressed } from "@vueuse/core";
|
||||
|
||||
export interface StepProps {
|
||||
vertical?: boolean;
|
||||
minSize?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<StepProps>(), {
|
||||
vertical: false,
|
||||
minSize: 50,
|
||||
});
|
||||
const target = ref();
|
||||
const { pressed } = useMousePressed({ target: target });
|
||||
|
||||
let domEvent = ref();
|
||||
let domStatus = ref(pressed);
|
||||
let parentVertical = ref();
|
||||
|
||||
onMounted(() => {
|
||||
const boxWidth = target.value.offsetWidth;
|
||||
const boxHeight = target.value.offsetHeight;
|
||||
target.value.addEventListener(
|
||||
"mousemove",
|
||||
(event: { layerX: any; layerY: any }) => {
|
||||
if (domStatus.value && domEvent.value) {
|
||||
const prevDom = domEvent.value.target.previousElementSibling;
|
||||
const nextDom = domEvent.value.target.nextElementSibling;
|
||||
if (!props.vertical) {
|
||||
const prevDomLeft =
|
||||
domEvent.value.target.previousElementSibling.offsetLeft;
|
||||
const prevDomWidth =
|
||||
domEvent.value.target.previousElementSibling.offsetWidth;
|
||||
const nextDomWidth =
|
||||
domEvent.value.target.nextElementSibling.offsetWidth;
|
||||
const otherWidth = boxWidth - (prevDomWidth + nextDomWidth + 5);
|
||||
const otherWidthPercentage =
|
||||
((prevDomWidth + nextDomWidth + 5) / boxWidth) * 100;
|
||||
if (
|
||||
event.layerX - prevDomLeft < props.minSize ||
|
||||
boxWidth - (event.layerX - prevDomLeft) - otherWidth < props.minSize
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
prevDom.style.flexBasis =
|
||||
((event.layerX - prevDomLeft) / (prevDomWidth + nextDomWidth + 5)) *
|
||||
otherWidthPercentage +
|
||||
"%";
|
||||
nextDom.style.flexBasis =
|
||||
((boxWidth - (event.layerX - prevDomLeft) - otherWidth) /
|
||||
(prevDomWidth + nextDomWidth + 5)) *
|
||||
otherWidthPercentage +
|
||||
"%";
|
||||
} else {
|
||||
const prevDomTop =
|
||||
domEvent.value.target.previousElementSibling.offsetTop;
|
||||
const prevDomHeight =
|
||||
domEvent.value.target.previousElementSibling.offsetHeight;
|
||||
const nextDomHeight =
|
||||
domEvent.value.target.nextElementSibling.offsetHeight;
|
||||
const otherHeight = boxHeight - (prevDomHeight + nextDomHeight + 5);
|
||||
const otherHeightPercentage =
|
||||
((prevDomHeight + nextDomHeight + 5) / boxHeight) * 100;
|
||||
if (
|
||||
event.layerY - prevDomTop < props.minSize ||
|
||||
boxHeight - (event.layerY - prevDomTop) - otherHeight <
|
||||
props.minSize
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
prevDom.style.flexBasis =
|
||||
((event.layerY - prevDomTop) /
|
||||
(prevDomHeight + nextDomHeight + 5)) *
|
||||
otherHeightPercentage +
|
||||
"%";
|
||||
nextDom.style.flexBasis =
|
||||
((boxHeight - (event.layerY - prevDomTop) - otherHeight) /
|
||||
(prevDomHeight + nextDomHeight + 5)) *
|
||||
otherHeightPercentage +
|
||||
"%";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const moveChange = (event: any, status: boolean, isVertical: boolean) => {
|
||||
domEvent.value = event;
|
||||
domStatus.value = status;
|
||||
parentVertical.value = isVertical;
|
||||
};
|
||||
|
||||
const mouseup = () => {
|
||||
domStatus.value = false;
|
||||
domEvent.value = null;
|
||||
parentVertical.value = false;
|
||||
};
|
||||
|
||||
// 定义初始化个数数组
|
||||
const steps = ref([]);
|
||||
// 监听有几个lay-split-panel-item
|
||||
watch(steps, () => {
|
||||
steps.value.forEach(
|
||||
(instance: { setIndex: (arg0: any) => void }, index: any) => {
|
||||
instance.setIndex(index);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// 向lay-split-panel-item传递参数
|
||||
provide("laySplitPanel", {
|
||||
props,
|
||||
steps,
|
||||
target,
|
||||
moveChange,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="target"
|
||||
:class="['lay-split-panel', vertical ? 'lay-split-panel-vertical' : '']"
|
||||
:style="{
|
||||
cursor: domStatus ? (!vertical ? 'col-resize' : 'row-resize') : '',
|
||||
}"
|
||||
v-on="{ mouseup: mouseup }"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,83 @@
|
||||
import{r as p,o as e,j as c,h as t,i as n,v as s}from"./.pnpm.8fb36023.js";const l={class:"markdown-body"},u=n("p",{class:"describe-plugin"},"\u6700\u7B80\u5355\u7684\u4F7F\u7528\u65B9\u5F0F\u53C2\u7167\u4EE5\u4E0B CodeSandbox \u6F14\u793A\uFF0C\u4E5F\u63A8\u8350 Fork \u672C\u4F8B\u6765\u8FDB\u884C Bug Report\u3002",-1),i=n("p",null,[n("a",{href:"https://codesandbox.io/s/11mvy",style:{"margin-left":"30px","margin-bottom":"30px","margin-top":"10px",display:"block"}},[n("img",{src:"https://codesandbox.io/static/img/play-codesandbox.svg"})])],-1),k=n("p",{class:"describe-plugin"},"\u4F7F\u7528 npm \u5DE5\u5177\u5B89\u88C5 layui vue\uFF0C\u82E5\u5B89\u88C5\u7F13\u6162\uFF0C\u53EF\u5C1D\u8BD5\u7528 pnpm \u6216\u5176\u4ED6\u955C\u50CF\u6E90\u3002",-1),r=n("div",{class:"language-"},[n("pre",null,[n("code",{"v-pre":""},`npm install @layui/layui-vue --save
|
||||
`)])],-1),g=n("div",{class:"language-js"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"import"),s(" App "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'./App.vue'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" createApp "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(" Layui "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@layui/layui-vue'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token string"},"'@layui/layui-vue/lib/index.css'"),s(`
|
||||
|
||||
`),n("span",{class:"token function"},"createApp"),n("span",{class:"token punctuation"},"("),s("App"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"use"),n("span",{class:"token punctuation"},"("),s("Layui"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"mount"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'#app'"),n("span",{class:"token punctuation"},")"),s(`
|
||||
`)])])],-1),d=n("p",{class:"describe-plugin"},"\u4EE5\u4E0A\u4EE3\u7801\u4FBF\u5B8C\u6210\u4E86 layui-vue \u7684\u6CE8\u518C\u3002\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0C\u6837\u5F0F\u6587\u4EF6\u9700\u8981\u5355\u72EC\u5F15\u5165\u3002",-1),m=n("p",{class:"describe-plugin"},[s("\u9996\u5148\u4F60\u9700\u8981\u5B89\u88C5 "),n("a",{href:"https://github.com/antfu/unplugin-vue-components",target:"_blank",style:{color:"#5FB878"}},[n("code",null,"unplugin-vue-components")]),s(" \u548C "),n("a",{href:"https://github.com/antfu/unplugin-auto-import",target:"_blank",style:{color:"#5FB878"}},[n("code",null,"unplugin-auto-import")]),s(" \u4E24\u6B3E\u63D2\u4EF6\u3002")],-1),y=n("div",{class:"language-"},[n("pre",null,[n("code",{"v-pre":""},`npm install -D unplugin-vue-components unplugin-auto-import
|
||||
`)])],-1),v=n("p",{class:"describe-plugin"},"\u7136\u540E\u4FEE\u6539 vite.config.js \u6216 vue.config.js \u7684\u914D\u7F6E\u3002",-1),_=n("div",{class:"language-js"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"import"),s(" AutoImport "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unplugin-auto-import/vite'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(" Components "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unplugin-vue-components/vite'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" LayuiVueResolver "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unplugin-vue-components/resolvers'"),s(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
||||
`),n("span",{class:"token literal-property property"},"plugins"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(`
|
||||
`),n("span",{class:"token function"},"AutoImport"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
|
||||
`),n("span",{class:"token literal-property property"},"resolvers"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token function"},"LayuiVueResolver"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(`
|
||||
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
|
||||
`),n("span",{class:"token function"},"Components"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
|
||||
`),n("span",{class:"token literal-property property"},"resolvers"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token function"},"LayuiVueResolver"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(`
|
||||
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
|
||||
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(`
|
||||
`),n("span",{class:"token punctuation"},"}"),s(`
|
||||
`)])])],-1),f=n("p",{class:"describe-plugin"},"Resolver \u89E3\u6790\u5668\u9009\u9879\u914D\u7F6E\u3002",-1),b=n("div",{class:"language-ts"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"LayuiVueResolverOptions"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
||||
`),n("span",{class:"token comment"},`/**
|
||||
* \u5C06\u6837\u5F0F\u4E0E\u7EC4\u4EF6\u4E00\u8D77\u5BFC\u5165
|
||||
*
|
||||
* @default 'css'
|
||||
*/`),s(`
|
||||
importStyle`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token builtin"},"boolean"),s(),n("span",{class:"token operator"},"|"),s(),n("span",{class:"token string"},"'css'"),s(`
|
||||
|
||||
`),n("span",{class:"token comment"},`/**
|
||||
* \u662F\u5426\u89E3\u6790\u56FE\u6807
|
||||
*
|
||||
* @default false
|
||||
*/`),s(`
|
||||
resolveIcons`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token builtin"},"boolean"),s(`
|
||||
|
||||
`),n("span",{class:"token comment"},`/**
|
||||
* \u6392\u9664\u4E0D\u9700\u8981\u81EA\u52A8\u5BFC\u5165\u7684\u7EC4\u4EF6
|
||||
*
|
||||
* eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
|
||||
*/`),s(`
|
||||
exclude`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token builtin"},"Array"),n("span",{class:"token operator"},"<"),n("span",{class:"token builtin"},"string"),s(),n("span",{class:"token operator"},"|"),s(" RegExp"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},";"),s(`
|
||||
`),n("span",{class:"token punctuation"},"}"),s(`
|
||||
`)])])],-1),h=n("p",{class:"describe-plugin"},"\u539F\u751F\u652F\u6301 es-module \u7684 tree shaking \u7528\u6CD5\u3002",-1),x=n("p",{class:"describe-plugin"},"\u5982\u679C\u4F60\u5B8C\u5168\u4F7F\u7528 layui-vue \u6784\u5EFA\u9879\u76EE, \u6211\u4EEC\u66F4\u63A8\u8350\u5168\u5C40\u6CE8\u518C\u4E0E\u81EA\u52A8\u6309\u9700\u7684\u65B9\u5F0F\u3002",-1),w=n("div",{class:"language-js"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"import"),s(" App "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'./App.vue'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" createApp "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" LayButton"),n("span",{class:"token punctuation"},","),s(" LayTable "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@layui/layui-vue'"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token string"},"'@layui/layui-vue/es/button/index.css'"),n("span",{class:"token punctuation"},";"),s(`
|
||||
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token string"},"'@layui/layui-vue/es/table/index.css'"),n("span",{class:"token punctuation"},";"),s(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"var"),s(" app "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"createApp"),n("span",{class:"token punctuation"},"("),s("App"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),s(`
|
||||
|
||||
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"component"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},'"LayButton"'),n("span",{class:"token punctuation"},","),s(" LayButton"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
||||
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"component"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},'"LayTable"'),n("span",{class:"token punctuation"},","),s(" LayTable"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
||||
|
||||
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"mount"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'#app'"),n("span",{class:"token punctuation"},")"),s(`
|
||||
`)])])],-1),A=n("p",{class:"describe-plugin"},"\u6839\u636E\u4E0D\u540C\u7684 CDN \u63D0\u4F9B\u5546\u6709\u4E0D\u540C\u7684\u5F15\u5165\u65B9\u5F0F\uFF0C\u6211\u4EEC\u5728\u8FD9\u91CC\u4EE5 unpkg \u4E3E\u4F8B\u3002",-1),L=n("div",{class:"language-html"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token doctype"},[n("span",{class:"token punctuation"},"<!"),n("span",{class:"token doctype-tag"},"DOCTYPE"),s(),n("span",{class:"token name"},"html"),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("html")]),s(),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"},'"'),s("en"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("head")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("meta")]),s(),n("span",{class:"token attr-name"},"charset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("UTF-8"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("link")]),s(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("stylesheet"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//unpkg.com/@layui/layui-vue/lib/index.css"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//unpkg.com/vue@3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"}),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//unpkg.com/@layui/layui-vue"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"}),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("head")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("body")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("app"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("lay-button")]),s(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("primary"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("{{ message }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("lay-button")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
|
||||
`),n("span",{class:"token keyword"},"const"),s(" App "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"{"),s(`
|
||||
`),n("span",{class:"token function"},"data"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
||||
`),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
||||
`),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},'"Hello World"'),s(`
|
||||
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
|
||||
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
|
||||
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
|
||||
`),n("span",{class:"token keyword"},"const"),s(" app "),n("span",{class:"token operator"},"="),s(" Vue"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"createApp"),n("span",{class:"token punctuation"},"("),s("App"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
||||
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"use"),n("span",{class:"token punctuation"},"("),s("LayuiVue"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
||||
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"mount"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},'"#app"'),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("body")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("html")]),n("span",{class:"token punctuation"},">")]),s(`
|
||||
`)])])],-1),R={},T={__name:"getStarted",setup(B,{expose:o}){return o({frontmatter:{}}),(V,q)=>{const a=p("lay-field");return e(),c("div",l,[t(a,{id:"\u5FEB\u901F\u4E0A\u624B",title:"\u5FEB\u901F\u4E0A\u624B",style:{"margin-top":"21px","margin-bottom":"20px"}}),u,i,t(a,{id:"\u5B89\u88C5\u7EC4\u4EF6",title:"\u5B89\u88C5\u7EC4\u4EF6",style:{"margin-top":"21px","margin-bottom":"20px"}}),k,r,t(a,{id:"\u5168\u5C40\u6CE8\u518C",title:"\u5168\u5C40\u6CE8\u518C",style:{"margin-top":"21px","margin-bottom":"20px"}}),g,d,t(a,{id:"\u81EA\u52A8\u6309\u9700",title:"\u81EA\u52A8\u6309\u9700",style:{"margin-top":"21px","margin-bottom":"20px"}}),m,y,v,_,f,b,t(a,{id:"\u624B\u52A8\u5F15\u5165",title:"\u624B\u52A8\u5F15\u5165",style:{"margin-top":"21px","margin-bottom":"20px"}}),h,x,w,t(a,{id:"\u5728\u7EBF\u5B89\u88C5",title:"\u5728\u7EBF\u5B89\u88C5",style:{"margin-top":"21px","margin-bottom":"20px"}}),A,L])}}};export{T as default,R as frontmatter};
|
||||
@@ -0,0 +1,174 @@
|
||||
#!/usr/bin/perl
|
||||
|
||||
use strict;
|
||||
use warnings;
|
||||
use IPC::Open2;
|
||||
|
||||
# An example hook script to integrate Watchman
|
||||
# (https://facebook.github.io/watchman/) with git to speed up detecting
|
||||
# new and modified files.
|
||||
#
|
||||
# The hook is passed a version (currently 2) and last update token
|
||||
# formatted as a string and outputs to stdout a new update token and
|
||||
# all files that have been modified since the update token. Paths must
|
||||
# be relative to the root of the working tree and separated by a single NUL.
|
||||
#
|
||||
# To enable this hook, rename this file to "query-watchman" and set
|
||||
# 'git config core.fsmonitor .git/hooks/query-watchman'
|
||||
#
|
||||
my ($version, $last_update_token) = @ARGV;
|
||||
|
||||
# Uncomment for debugging
|
||||
# print STDERR "$0 $version $last_update_token\n";
|
||||
|
||||
# Check the hook interface version
|
||||
if ($version ne 2) {
|
||||
die "Unsupported query-fsmonitor hook version '$version'.\n" .
|
||||
"Falling back to scanning...\n";
|
||||
}
|
||||
|
||||
my $git_work_tree = get_working_dir();
|
||||
|
||||
my $retry = 1;
|
||||
|
||||
my $json_pkg;
|
||||
eval {
|
||||
require JSON::XS;
|
||||
$json_pkg = "JSON::XS";
|
||||
1;
|
||||
} or do {
|
||||
require JSON::PP;
|
||||
$json_pkg = "JSON::PP";
|
||||
};
|
||||
|
||||
launch_watchman();
|
||||
|
||||
sub launch_watchman {
|
||||
my $o = watchman_query();
|
||||
if (is_work_tree_watched($o)) {
|
||||
output_result($o->{clock}, @{$o->{files}});
|
||||
}
|
||||
}
|
||||
|
||||
sub output_result {
|
||||
my ($clockid, @files) = @_;
|
||||
|
||||
# Uncomment for debugging watchman output
|
||||
# open (my $fh, ">", ".git/watchman-output.out");
|
||||
# binmode $fh, ":utf8";
|
||||
# print $fh "$clockid\n@files\n";
|
||||
# close $fh;
|
||||
|
||||
binmode STDOUT, ":utf8";
|
||||
print $clockid;
|
||||
print "\0";
|
||||
local $, = "\0";
|
||||
print @files;
|
||||
}
|
||||
|
||||
sub watchman_clock {
|
||||
my $response = qx/watchman clock "$git_work_tree"/;
|
||||
die "Failed to get clock id on '$git_work_tree'.\n" .
|
||||
"Falling back to scanning...\n" if $? != 0;
|
||||
|
||||
return $json_pkg->new->utf8->decode($response);
|
||||
}
|
||||
|
||||
sub watchman_query {
|
||||
my $pid = open2(\*CHLD_OUT, \*CHLD_IN, 'watchman -j --no-pretty')
|
||||
or die "open2() failed: $!\n" .
|
||||
"Falling back to scanning...\n";
|
||||
|
||||
# In the query expression below we're asking for names of files that
|
||||
# changed since $last_update_token but not from the .git folder.
|
||||
#
|
||||
# To accomplish this, we're using the "since" generator to use the
|
||||
# recency index to select candidate nodes and "fields" to limit the
|
||||
# output to file names only. Then we're using the "expression" term to
|
||||
# further constrain the results.
|
||||
my $last_update_line = "";
|
||||
if (substr($last_update_token, 0, 1) eq "c") {
|
||||
$last_update_token = "\"$last_update_token\"";
|
||||
$last_update_line = qq[\n"since": $last_update_token,];
|
||||
}
|
||||
my $query = <<" END";
|
||||
["query", "$git_work_tree", {$last_update_line
|
||||
"fields": ["name"],
|
||||
"expression": ["not", ["dirname", ".git"]]
|
||||
}]
|
||||
END
|
||||
|
||||
# Uncomment for debugging the watchman query
|
||||
# open (my $fh, ">", ".git/watchman-query.json");
|
||||
# print $fh $query;
|
||||
# close $fh;
|
||||
|
||||
print CHLD_IN $query;
|
||||
close CHLD_IN;
|
||||
my $response = do {local $/; <CHLD_OUT>};
|
||||
|
||||
# Uncomment for debugging the watch response
|
||||
# open ($fh, ">", ".git/watchman-response.json");
|
||||
# print $fh $response;
|
||||
# close $fh;
|
||||
|
||||
die "Watchman: command returned no output.\n" .
|
||||
"Falling back to scanning...\n" if $response eq "";
|
||||
die "Watchman: command returned invalid output: $response\n" .
|
||||
"Falling back to scanning...\n" unless $response =~ /^\{/;
|
||||
|
||||
return $json_pkg->new->utf8->decode($response);
|
||||
}
|
||||
|
||||
sub is_work_tree_watched {
|
||||
my ($output) = @_;
|
||||
my $error = $output->{error};
|
||||
if ($retry > 0 and $error and $error =~ m/unable to resolve root .* directory (.*) is not watched/) {
|
||||
$retry--;
|
||||
my $response = qx/watchman watch "$git_work_tree"/;
|
||||
die "Failed to make watchman watch '$git_work_tree'.\n" .
|
||||
"Falling back to scanning...\n" if $? != 0;
|
||||
$output = $json_pkg->new->utf8->decode($response);
|
||||
$error = $output->{error};
|
||||
die "Watchman: $error.\n" .
|
||||
"Falling back to scanning...\n" if $error;
|
||||
|
||||
# Uncomment for debugging watchman output
|
||||
# open (my $fh, ">", ".git/watchman-output.out");
|
||||
# close $fh;
|
||||
|
||||
# Watchman will always return all files on the first query so
|
||||
# return the fast "everything is dirty" flag to git and do the
|
||||
# Watchman query just to get it over with now so we won't pay
|
||||
# the cost in git to look up each individual file.
|
||||
my $o = watchman_clock();
|
||||
$error = $output->{error};
|
||||
|
||||
die "Watchman: $error.\n" .
|
||||
"Falling back to scanning...\n" if $error;
|
||||
|
||||
output_result($o->{clock}, ("/"));
|
||||
$last_update_token = $o->{clock};
|
||||
|
||||
eval { launch_watchman() };
|
||||
return 0;
|
||||
}
|
||||
|
||||
die "Watchman: $error.\n" .
|
||||
"Falling back to scanning...\n" if $error;
|
||||
|
||||
return 1;
|
||||
}
|
||||
|
||||
sub get_working_dir {
|
||||
my $working_dir;
|
||||
if ($^O =~ 'msys' || $^O =~ 'cygwin') {
|
||||
$working_dir = Win32::GetCwd();
|
||||
$working_dir =~ tr/\\/\//;
|
||||
} else {
|
||||
require Cwd;
|
||||
$working_dir = Cwd::cwd();
|
||||
}
|
||||
|
||||
return $working_dir;
|
||||
}
|
||||
Reference in New Issue
Block a user