init
This commit is contained in:
Binary file not shown.
@@ -0,0 +1,72 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, inject, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, normalizeStyle, unref, createVNode, withCtx, createCommentVNode } from "vue";
|
||||
import { _ as _sfc_main$1 } from "../transition/index2.js";
|
||||
const _hoisted_1 = { class: "layui-colla-item" };
|
||||
const _hoisted_2 = { key: 0 };
|
||||
const _hoisted_3 = { class: "layui-colla-content" };
|
||||
const __default__ = {
|
||||
name: "LayCollapseItem"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
id: null,
|
||||
title: null,
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const { accordion, activeValues, emit, collapseTransition } = inject("layCollapse");
|
||||
let isShow = computed(() => {
|
||||
return activeValues.value.includes(props.id);
|
||||
});
|
||||
const showHandle = function() {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
const _isShow = isShow.value;
|
||||
if (accordion) {
|
||||
activeValues.value = !_isShow ? [props.id] : [];
|
||||
} else if (_isShow) {
|
||||
activeValues.value.splice(activeValues.value.indexOf(props.id), 1);
|
||||
} else {
|
||||
activeValues.value.push(props.id);
|
||||
}
|
||||
emit("update:modelValue", accordion ? activeValues.value[0] || null : activeValues.value);
|
||||
emit("change", props.id, !_isShow, activeValues.value);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createElementVNode("h2", {
|
||||
class: normalizeClass(["layui-colla-title", { "layui-disabled": __props.disabled }]),
|
||||
onClick: showHandle
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "title", { props }, () => [
|
||||
createTextVNode(toDisplayString(__props.title), 1)
|
||||
]),
|
||||
createElementVNode("i", {
|
||||
class: "layui-icon layui-colla-icon layui-icon-right",
|
||||
style: normalizeStyle({
|
||||
transform: unref(isShow) ? "rotate(90deg)" : "none",
|
||||
transition: unref(collapseTransition) ? "all 0.2s ease 0s" : ""
|
||||
})
|
||||
}, null, 4)
|
||||
], 2),
|
||||
createVNode(_sfc_main$1, { enable: unref(collapseTransition) }, {
|
||||
default: withCtx(() => [
|
||||
unref(isShow) ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
||||
createElementVNode("div", _hoisted_3, [
|
||||
createElementVNode("p", null, [
|
||||
renderSlot(_ctx.$slots, "default", { props })
|
||||
])
|
||||
])
|
||||
])) : createCommentVNode("", true)
|
||||
]),
|
||||
_: 3
|
||||
}, 8, ["enable"])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
@@ -0,0 +1,43 @@
|
||||
@import './code.css';
|
||||
@import './markdown.css';
|
||||
@import './mobile.css';
|
||||
|
||||
.layui-menu-lg li {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.layui-menu-lg .layui-menu-body-title a:hover,
|
||||
.layui-menu-lg li:hover {
|
||||
background: 0 0;
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
|
||||
.layui-menu-lg li .layui-menu-body-panel {
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.layui-menu-lg li .layui-menu-body-panel-left {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-checked,
|
||||
.layui-menu .layui-menu-item-checked2 {
|
||||
background-color: var(--global-neutral-color-2) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-checked a,
|
||||
.layui-menu .layui-menu-item-checked2 a {
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
|
||||
.layui-menu-body-title a {
|
||||
display: block;
|
||||
margin: -5px -15px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.theme-panel .layui-dropdown{
|
||||
width: auto
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,49 @@
|
||||
import { OriginalTreeData, StringOrNumber } from "./tree.type";
|
||||
import { Nullable } from "../../types";
|
||||
declare type CustomKey = string | number;
|
||||
declare type CustomString = (() => string) | string;
|
||||
export interface TreeData {
|
||||
id: CustomKey;
|
||||
title: CustomString;
|
||||
children: TreeData[];
|
||||
parentKey: Nullable<StringOrNumber>;
|
||||
isRoot: boolean;
|
||||
isChecked: boolean;
|
||||
isDisabled: boolean;
|
||||
isLeaf: boolean;
|
||||
hasNextSibling: boolean;
|
||||
parentNode: Nullable<TreeData>;
|
||||
}
|
||||
interface ReplaceFields {
|
||||
id: string;
|
||||
title: string;
|
||||
children: string;
|
||||
}
|
||||
interface TreeConfig {
|
||||
checkStrictly: boolean | string;
|
||||
showCheckbox: boolean;
|
||||
checkedKeys: StringOrNumber[];
|
||||
expandKeys: StringOrNumber[];
|
||||
nodeMap: Map<StringOrNumber, TreeData>;
|
||||
originMap: Map<StringOrNumber, OriginalTreeData>;
|
||||
replaceFields: ReplaceFields;
|
||||
}
|
||||
declare class Tree {
|
||||
protected config: TreeConfig;
|
||||
protected treeData: TreeData[];
|
||||
constructor(config: TreeConfig, origin: OriginalTreeData | OriginalTreeData[]);
|
||||
init(origin: OriginalTreeData | OriginalTreeData[]): void;
|
||||
createTree(origin: OriginalTreeData | OriginalTreeData[], parentKey?: StringOrNumber): TreeData[];
|
||||
getNode(origin: OriginalTreeData, parentKey: StringOrNumber, hasNextSibling: boolean): TreeData;
|
||||
treeForeach(tree: any, func: Function): void;
|
||||
setChildrenChecked(checked: boolean, nodes: TreeData[]): void;
|
||||
setParentChecked(checked: boolean, parent: TreeData): void;
|
||||
setCheckedKeys(checked: boolean, checkStrictly: boolean | string, node: TreeData): void;
|
||||
getData(): TreeData[];
|
||||
getKeys(): {
|
||||
checkedKeys: any[];
|
||||
expandKeys: any[];
|
||||
};
|
||||
getOriginData(key: StringOrNumber): OriginalTreeData;
|
||||
}
|
||||
export { Tree };
|
||||
@@ -0,0 +1,3 @@
|
||||
x<01>V<EFBFBD>R<EFBFBD>0<10>s<EFBFBD>B<EFBFBD><17>A<EFBFBD>IJ<49><4A><EFBFBD><EFBFBD><EFBFBD>l<EFBFBD><6C><0E><><EFBFBD>de<><65>]]<5D>8A<38><04>[<5B><><EFBFBD>sκ<14>$<24><>O<EFBFBD><4F>?<3F><EFBFBD>&<26> j<><6A>Z<EFBFBD><5A><07>5?d<>s<><73>ZZ)K>V(<28>JI<4A>C<EFBFBD><43>5-<2D><><EFBFBD><EFBFBD>f5 <0C> <20>L<EFBFBD>Q<EFBFBD>bl&N<><4E>xNܮ:<3A>QjZ)<29><><EFBFBD><EFBFBD><EFBFBD>wx<77><78>j<EFBFBD> <09>><3E><> <1F><><EFBFBD>ze<7A><65><EFBFBD><05>\0 <0B>ܥ<EFBFBD>8<EFBFBD><38>-<2D><><EFBFBD>?<3F><>HN<48> <1F><>ߠ<EFBFBD>]A<><41>d|h<><68><EFBFBD>1J@<40>$;]<5D>·[
|
||||
ڸ<EFBFBD>z<05>r<EFBFBD><72><EFBFBD>ؕt%<25><><EFBFBD>2w<32><77><EFBFBD><EFBFBD>W<EFBFBD>-T3<13>b<EFBFBD>V<EFBFBD><56>Ԃ!p<><70>dKo<10>G=+<2B>3<EFBFBD><01>p<EFBFBD> 9Y痏<59>m 9<><39>FIK
|
||||
<EFBFBD>E 7W^="p}s<>`<60>,y$f<><05><>q<EFBFBD><71>!49|<7C>_<EFBFBD>R <20><><19>x<18>ocj<63>v<>XŗYAc<41>Yc種vD<76><44><EFBFBD>dw<64>=<3D><>٣<EFBFBD><D9A3><EFBFBD>L<EFBFBD><4C>`B<><ۚ<><DB9A>;<3B>'<27><>\<08>'?P>z<><7A> <1E><>,<2C><>n<EFBFBD><6E>]<5D>+5<><35><EFBFBD>;eV<65><56>ʁ<><CA81>alǶM <20>\r<><72>ͺ<EFBFBD><CDBA>X*k&D<>q<><71>,7{<7B><><EFBFBD>OI<> <09>5c㥾|v<10><>=<3D>-<2D><><EFBFBD><EFBFBD><EFBFBD>O 𧓜%<25><06>({/xz<78>R<EFBFBD><52><EFBFBD><EFBFBD><13><>yq2&<26>d<EFBFBD>*Q<>Q<EFBFBD><51>(L<>Ou<><75><11>9<18><>{<7B>;<3B>+<2B>ӝ<EFBFBD><D39D>H8<48>k<19>QPt<50><10>qɪ<71>V<EFBFBD>A<EFBFBD> \<5C> "<22><><EFBFBD>u<EFBFBD><75><EFBFBD><EFBFBD>)<29>^8<><38>v`B<><42>vN<76><4E>܋ϗv>_1<5F><31>^*c._<>u&<17>os<01><> FNѹ<4E>#ÀN<C380>T<EFBFBD>MBfY<66><59><EFBFBD>r<EFBFBD>(<28><>*Y<>E<EFBFBD><45><EFBFBD><EFBFBD>
|
||||
@@ -0,0 +1,106 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, computed, h, renderSlot, isVNode, Comment, Fragment, createTextVNode } from "vue";
|
||||
var index = /* @__PURE__ */ (() => ".layui-space{display:inline-flex}.layui-space-horizontal .layui-space-item{display:flex;align-items:center}.layui-space-vertical{flex-direction:column}.layui-space-wrap{flex-wrap:wrap}.layui-space-fill{display:flex}.layui-space-align-start{align-items:flex-start}.layui-space-align-center{align-items:center}.layui-space-align-end{align-items:flex-end}.layui-space-align-baseline{align-items:baseline}.layui-space-item{width:inherit}\n")();
|
||||
const _sfc_main = defineComponent({
|
||||
name: "LaySpace",
|
||||
props: {
|
||||
align: {
|
||||
type: String
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: "horizontal"
|
||||
},
|
||||
fill: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: [Number, String, Array],
|
||||
default: "sm"
|
||||
},
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const computAlign = computed(() => {
|
||||
var _a;
|
||||
return (_a = props.align) != null ? _a : props.direction === "horizontal" ? "center" : "";
|
||||
});
|
||||
const spaceClass = computed(() => [
|
||||
"layui-space",
|
||||
{
|
||||
[`layui-space-align-${computAlign.value}`]: computAlign.value,
|
||||
[`layui-space-${props.direction}`]: props.direction,
|
||||
[`layui-space-wrap`]: props.wrap,
|
||||
[`layui-space-fill`]: props.fill
|
||||
}
|
||||
]);
|
||||
const spaceStyle = computed(() => {
|
||||
const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
|
||||
let gap = "";
|
||||
if (Array.isArray(props.size)) {
|
||||
gap = props.size.map((size) => {
|
||||
if (typeof size === "number") {
|
||||
return `${size}px`;
|
||||
}
|
||||
if (typeof size === "string") {
|
||||
return sizeMap[size] || size;
|
||||
}
|
||||
return size;
|
||||
}).join(" ");
|
||||
} else if (typeof props.size === "string") {
|
||||
gap = sizeMap[props.size] || props.size;
|
||||
} else if (typeof props.size === "number") {
|
||||
gap = `${props.size}px`;
|
||||
}
|
||||
return {
|
||||
gap
|
||||
};
|
||||
});
|
||||
const itemStyle = computed(() => [
|
||||
props.fill ? { flexGrow: 1, minWidth: "100%" } : {}
|
||||
]);
|
||||
const extractChildren = () => {
|
||||
const result = [];
|
||||
const children = renderSlot(slots, "default").children;
|
||||
const elementData = Array.isArray(children) ? [...children] : [];
|
||||
while (elementData.length) {
|
||||
const vnode = elementData.shift();
|
||||
if (vnode === null)
|
||||
continue;
|
||||
if (Array.isArray(vnode)) {
|
||||
elementData.unshift(...vnode);
|
||||
}
|
||||
if (!isVNode(vnode) || vnode.type === Comment)
|
||||
continue;
|
||||
if (vnode.type === Fragment && Array.isArray(vnode.children)) {
|
||||
elementData.unshift(vnode.children);
|
||||
} else if (typeof vnode === "string" || typeof vnode === "number") {
|
||||
result.push(createTextVNode(vnode));
|
||||
} else {
|
||||
result.push(vnode);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
return () => {
|
||||
const children = extractChildren();
|
||||
return h("div", {
|
||||
class: spaceClass.value,
|
||||
style: spaceStyle.value
|
||||
}, children.map((child, index2) => {
|
||||
var _a;
|
||||
return h("div", {
|
||||
key: (_a = child.key) != null ? _a : `item-${index2}`,
|
||||
class: "layui-space-item",
|
||||
style: itemStyle.value
|
||||
}, h(child));
|
||||
}));
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
@@ -0,0 +1,2 @@
|
||||
x<01><><EFBFBD>N<EFBFBD>0 Ey<45>+<2B><03>AB9_<39>4<EFBFBD>j-<2D>+<2B>YW*<2A><>j<05><Y<>l<EFBFBD>{<7B>C<EFBFBD><43><m<>o <1E><>*<2A><>
|
||||
<EFBFBD>4wH<EFBFBD>Nac<EFBFBD><EFBFBD><EFBFBD>#<23>.<2E> ň<><C588><EFBFBD><EFBFBD>E}ַ<> 3<>R<> <0C><>+ <1D>}<7D>s=<3D>\n<><6E><EFBFBD>_<EFBFBD>f<EFBFBD>U<EFBFBD>[K<>bF<62><46>A<EFBFBD><41><EFBFBD><EFBFBD><EFBFBD>|*4E<34><45><EFBFBD><EFBFBD> 4<15> <1E><><EFBFBD>P8UE<55><<3C>ur6o]`U<><55>F`<60>(F|<7C>Z<EFBFBD>e8<65>WC9<43> <1E>HW^<5E><>}<7D>{/{<7B>`_<><5F><10><05>V),q<>k<EFBFBD>v`F ҏ<>-<2D>̑ʰ<CC91>qM<71><4D> @<40><>
|
||||
@@ -0,0 +1,373 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 需要用户处理事务，又不希望跳转页面以致打断工作流程时，承载相应的操作。
|
||||
:::
|
||||
|
||||
::: title 基本使用
|
||||
:::
|
||||
|
||||
::: demo 通过 `lay-layer` 创建一个基础弹层, 使用 `v-model` 控制显示状态。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible1">打开</lay-button>
|
||||
<lay-layer title="基础使用" v-model="visible1">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const visible1 = ref(false)
|
||||
const changeVisible1 = function() {
|
||||
visible1.value = !visible1.value
|
||||
}
|
||||
return {
|
||||
visible1,
|
||||
changeVisible1
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁止拖拽
|
||||
:::
|
||||
|
||||
::: demo 通过 `move` 属性设置弹层是否可拖动, 默认为 `true`。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible2">打开</lay-button>
|
||||
<lay-layer title="标题" :move="false" v-model="visible2">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible2 = ref(false)
|
||||
const changeVisible2 = function() {
|
||||
visible2.value = !visible2.value
|
||||
}
|
||||
return {
|
||||
visible2,
|
||||
changeVisible2
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 放大缩小
|
||||
:::
|
||||
|
||||
::: demo 通过 `maxmin` 属性开启放大缩小操作, 默认为 `false`。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible3">打开</lay-button>
|
||||
<lay-layer title="标题" v-model="visible3" :maxmin="true">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible3 = ref(false)
|
||||
const changeVisible3 = function() {
|
||||
visible3.value = !visible3.value
|
||||
}
|
||||
return {
|
||||
visible3,
|
||||
changeVisible3
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定位置
|
||||
:::
|
||||
|
||||
::: demo 通过 `offset` 属性设置初始显示位置, 支持 `string` 与 `array` 类型。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible4">打开</lay-button>
|
||||
<lay-layer title="标题" v-model="visible4" move="true" :offset="['100px','100px']">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible4 = ref(false)
|
||||
const changeVisible4 = function() {
|
||||
visible4.value = !visible4.value
|
||||
}
|
||||
return {
|
||||
visible4,
|
||||
changeVisible4
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸拉伸
|
||||
:::
|
||||
|
||||
::: demo 通过 `resize` 属性开启窗体拉伸, 默认为 `false`。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
|
||||
<lay-layer title="拉伸尺寸" :resize="true" v-model="visible8">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible8 = ref(false)
|
||||
const changeVisible8 = function() {
|
||||
visible8.value = !visible8.value
|
||||
}
|
||||
return {
|
||||
visible8,
|
||||
changeVisible8
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 远程窗体
|
||||
:::
|
||||
|
||||
::: demo 你可以使用 layer 展示其他网站页面, 只需要设置 `type` 属性为 2, `content` 属性设置为指定页面的链接。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible5" type="primary">打开</lay-button>
|
||||
<lay-layer title="加载 Iframe 内容" :area="['500px','400px']" v-model="visible5" move="true" :type="2" content="http://www.pearadmin.com"></lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible5 = ref(false)
|
||||
const changeVisible5 = function() {
|
||||
visible5.value = !visible5.value
|
||||
}
|
||||
return {
|
||||
visible5,
|
||||
changeVisible5
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 定义操作
|
||||
:::
|
||||
|
||||
::: demo 通过 `btn` 属性定义弹层底部操作。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible6">打开</lay-button>
|
||||
<lay-layer title="标题" v-model="visible6" :btn="btn6">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible6 = ref(false)
|
||||
const changeVisible6 = function() {
|
||||
visible6.value = !visible6.value
|
||||
}
|
||||
const btn6 = [
|
||||
{text:'确认', callback: ()=>{ alert("确认事件") }},
|
||||
{text:'取消', callback: ()=>{ alert("取消事件") }}
|
||||
]
|
||||
return {
|
||||
btn6,
|
||||
visible6,
|
||||
changeVisible6
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 关闭遮盖
|
||||
:::
|
||||
|
||||
::: demo 通过 `shade` 属性设置开启遮盖层, `shadeClose` 属性用于指定在点击遮盖层时是否关闭对应窗体。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
|
||||
<lay-layer title="开启遮盖" move="true" shade="true" shadeClose="true" v-model="visible7">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible7 = ref(false)
|
||||
const changeVisible7 = function() {
|
||||
visible7.value = !visible7.value
|
||||
}
|
||||
return {
|
||||
visible7,
|
||||
changeVisible7
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 关闭标题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible9" type="primary">关闭标题</lay-button>
|
||||
<lay-layer title="false" move="true" shade="false" v-model="visible9">
|
||||
内容
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
const visible9 = ref(false)
|
||||
const changeVisible9 = function() {
|
||||
visible9.value = !visible9.value
|
||||
}
|
||||
return {
|
||||
visible9,
|
||||
changeVisible9
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 函数调用
|
||||
:::
|
||||
|
||||
::: demo 你可以通过 `lay-layer` 标签来创建弹, 亦可以通过 `layer.open` 方法来唤起一个弹出层。
|
||||
|
||||
<template>
|
||||
<lay-button @click="open" type="primary">打开</lay-button>
|
||||
<lay-button @click="close" type="primary">关闭</lay-button>
|
||||
<lay-button @click="closeAll" type="primary">关闭所有</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { layer } from "@layui/layer-vue"
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
let id = null;
|
||||
|
||||
const open = function() {
|
||||
id = layer.open({title:"标题",content:"内容", shade: false, btn: [
|
||||
{text:"关闭", callback: function(layerId) {
|
||||
layer.close(layerId);
|
||||
}}
|
||||
]})
|
||||
}
|
||||
|
||||
const close = function() {
|
||||
layer.close(id)
|
||||
}
|
||||
|
||||
const closeAll = function() {
|
||||
layer.closeAll()
|
||||
}
|
||||
|
||||
return {
|
||||
open,
|
||||
close,
|
||||
closeAll
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 弹层属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 备注 | 描述 | 默认值 |
|
||||
| --------------- | ------------- | --------------------------|
|
||||
| title | 标题 | -- |
|
||||
| move | 允许拖拽 | `false` |
|
||||
| maxmin | 最小化 最大化 | `false` |
|
||||
| offset | 位置 | -- |
|
||||
| area | 尺寸 | -- |
|
||||
| v-model | 展示 隐藏 | false |
|
||||
| content | 内容 | -- |
|
||||
| shade | 开启遮盖 | -- |
|
||||
| shadeClose | 遮盖点击关闭 | -- |
|
||||
| shadeOpacity | 遮盖层透明度 | `0.1` |
|
||||
| zIndex | 自定义层级 | -- |
|
||||
| type | 类型 | `1: component` `2: iframe` |
|
||||
| closeBtn | 显示关闭 | true |
|
||||
| btn | 按钮 格式:{text:"",callback:function(){}} | -- |
|
||||
| btnAlign | 按钮布局 | `l` `r` `c` |
|
||||
| anim | 入场动画 | `0` `-` `6` |
|
||||
| isOutAnim | 关闭动画 | `true` `false` |
|
||||
| success | 显示回调 | -- |
|
||||
| close | 关闭回调 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor modal
|
||||
:::
|
||||
|
||||
::: previousNext modal
|
||||
:::
|
||||
Reference in New Issue
Block a user