[新增] layer 组件 outAnim 出场动画
This commit is contained in:
就眠儀式
parent
05f379c680
commit
8ac00ad877
@ -268,6 +268,7 @@ export default {
|
||||
| closeBtn | 显示关闭 | true |
|
||||
| btn | 按钮 | |
|
||||
| btnAlign | 按钮布局 | `l` `r` `c` |
|
||||
| anim | 弹层动画 | `0` `-` `6` |
|
||||
| anim | 入场动画 | `0` `-` `6` |
|
||||
| isOutAnim | 关闭动画 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
@ -10,6 +10,14 @@
|
||||
::: demo
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.2.4">
|
||||
[重构] row col 栅格组件, 支持 24 栅格。<br>
|
||||
[重构] layui.css 样式, 集成 less 编译器。<br>
|
||||
[重构] button, button-group, button-container 非破坏性改进代码。<br>
|
||||
[修复] themeline 时间线，因 mackdown 造成的样式污染。<br>
|
||||
[新增] layer 弹层出场动画, 允许使用 isOutAmin 关闭。<br>
|
||||
[删除] rate 评分 theme 属性默认值。<br>
|
||||
</lay-timeline-item>
|
||||
<lay-timeline-item title="0.2.3">
|
||||
[新增] table 表格 列筛选功能。<br>
|
||||
[新增] table 表格 row 行单击, row-double 行双击事件。<br>
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lay-table-box table tbody {
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.lay-table-box table th,
|
||||
.lay-table-box table td {
|
||||
font-size: 14px;
|
||||
|
||||
4
src/module/header/index.less
Normal file
4
src/module/header/index.less
Normal file
@ -0,0 +1,4 @@
|
||||
.layui-header {
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
}
|
||||
@ -1,17 +1,15 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayHeader",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-header">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayHeader',
|
||||
}
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
<style>
|
||||
.layui-header {
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
@ -1,86 +1,3 @@
|
||||
<template>
|
||||
<!-- 遮盖 -->
|
||||
<div
|
||||
v-if="visible && shade"
|
||||
class="layui-layer-shade"
|
||||
style="background-color: rgb(0, 0, 0); opacity: 0.1"
|
||||
:style="{ zIndex: zIndex }"
|
||||
@click="shadeHandle"
|
||||
></div>
|
||||
<!-- 元素 -->
|
||||
<div
|
||||
v-if="visible"
|
||||
:id="id"
|
||||
class="layui-layer layui-layer-border layer-anim"
|
||||
:class="[
|
||||
'layer-anim-0' + anim,
|
||||
type === 1 ? 'layui-layer-dialog' : '',
|
||||
type === 2 ? 'layui-layer-iframe' : '',
|
||||
]"
|
||||
style="position: fixed"
|
||||
:style="{
|
||||
top: top,
|
||||
left: left,
|
||||
width: width,
|
||||
height: height,
|
||||
zIndex: zIndex,
|
||||
}"
|
||||
>
|
||||
<div class="layui-layer-title" style="cursor: move">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="layui-layer-content" :style="{ height: contentHeight }">
|
||||
<div v-if="type === 1" style="height: 100%">
|
||||
<slot v-if="slot.default"></slot>
|
||||
<template v-else>
|
||||
{{ content }}
|
||||
</template>
|
||||
</div>
|
||||
<iframe
|
||||
v-if="type === 2"
|
||||
scrolling="auto"
|
||||
allowtransparency="true"
|
||||
frameborder="0"
|
||||
:src="content"
|
||||
style="width: 100%; height: 100%"
|
||||
></iframe>
|
||||
</div>
|
||||
<span class="layui-layer-setwin"
|
||||
><a
|
||||
v-if="maxmin"
|
||||
class="layui-layer-min"
|
||||
href="javascript:;"
|
||||
@click="minHandle"
|
||||
><cite></cite></a
|
||||
><a
|
||||
v-if="maxmin"
|
||||
class="layui-layer-ico layui-layer-max"
|
||||
:class="[max ? 'layui-layer-maxmin' : '']"
|
||||
href="javascript:;"
|
||||
@click="maxHandle"
|
||||
></a>
|
||||
<a
|
||||
v-if="closeBtn"
|
||||
class="layui-layer-ico layui-layer-close layui-layer-close1"
|
||||
href="javascript:;"
|
||||
@click="closeHandle"
|
||||
></a
|
||||
></span>
|
||||
<div
|
||||
v-if="btn && btn.length > 0"
|
||||
class="layui-layer-btn"
|
||||
:class="['layui-layer-btn-' + btnAlign]"
|
||||
>
|
||||
<template v-for="(b, index) in btn" :key="index">
|
||||
<a :class="['layui-layer-btn' + index]" @click="b.callback">{{
|
||||
b.text
|
||||
}}</a>
|
||||
</template>
|
||||
</div>
|
||||
<span class="layui-layer-resize"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayLayer",
|
||||
@ -119,7 +36,8 @@ export interface LayLayerProps {
|
||||
shadeClose?: boolean | string;
|
||||
closeBtn?: boolean | string;
|
||||
btnAlign?: string;
|
||||
anim?: number;
|
||||
anim?: number | boolean;
|
||||
isOutAnim?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayLayerProps>(), {
|
||||
@ -140,6 +58,7 @@ const props = withDefaults(defineProps<LayLayerProps>(), {
|
||||
btnAlign: "l",
|
||||
anim: 0,
|
||||
content: "",
|
||||
isOutAnim: true
|
||||
});
|
||||
|
||||
const top = ref(props.offset[0]);
|
||||
@ -208,3 +127,87 @@ const maxHandle = function () {
|
||||
max.value = !max.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 遮盖 -->
|
||||
<div
|
||||
v-if="visible && shade"
|
||||
class="layui-layer-shade"
|
||||
style="background-color: rgb(0, 0, 0); opacity: 0.1"
|
||||
:style="{ zIndex: zIndex }"
|
||||
@click="shadeHandle"
|
||||
></div>
|
||||
<!-- 元素 -->
|
||||
<transition :leave-to-class="isOutAnim ? 'layer-anim-close':''">
|
||||
<div
|
||||
v-if="visible"
|
||||
:id="id"
|
||||
:class="[
|
||||
anim!== false ? 'layer-anim layer-anim-0' + anim : '',
|
||||
type === 1 ? 'layui-layer-dialog' : '',
|
||||
type === 2 ? 'layui-layer-iframe' : '',
|
||||
]"
|
||||
class="layui-layer layui-layer-border"
|
||||
:style="{
|
||||
top: top,
|
||||
left: left,
|
||||
width: width,
|
||||
height: height,
|
||||
zIndex: zIndex,
|
||||
}"
|
||||
>
|
||||
<div class="layui-layer-title" style="cursor: move">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="layui-layer-content" :style="{ height: contentHeight }">
|
||||
<div v-if="type === 1" style="height: 100%">
|
||||
<slot v-if="slot.default"></slot>
|
||||
<template v-else>
|
||||
{{ content }}
|
||||
</template>
|
||||
</div>
|
||||
<iframe
|
||||
v-if="type === 2"
|
||||
scrolling="auto"
|
||||
allowtransparency="true"
|
||||
frameborder="0"
|
||||
:src="content"
|
||||
style="width: 100%; height: 100%"
|
||||
></iframe>
|
||||
</div>
|
||||
<span class="layui-layer-setwin"
|
||||
><a
|
||||
v-if="maxmin"
|
||||
class="layui-layer-min"
|
||||
href="javascript:;"
|
||||
@click="minHandle"
|
||||
><cite></cite></a
|
||||
><a
|
||||
v-if="maxmin"
|
||||
class="layui-layer-ico layui-layer-max"
|
||||
:class="[max ? 'layui-layer-maxmin' : '']"
|
||||
href="javascript:;"
|
||||
@click="maxHandle"
|
||||
></a>
|
||||
<a
|
||||
v-if="closeBtn"
|
||||
class="layui-layer-ico layui-layer-close layui-layer-close1"
|
||||
href="javascript:;"
|
||||
@click="closeHandle"
|
||||
></a
|
||||
></span>
|
||||
<div
|
||||
v-if="btn && btn.length > 0"
|
||||
class="layui-layer-btn"
|
||||
:class="['layui-layer-btn-' + btnAlign]"
|
||||
>
|
||||
<template v-for="(b, index) in btn" :key="index">
|
||||
<a :class="['layui-layer-btn' + index]" @click="b.callback">{{
|
||||
b.text
|
||||
}}</a>
|
||||
</template>
|
||||
</div>
|
||||
<span class="layui-layer-resize"></span>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -5,46 +5,43 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LayMenu" lang="ts">
|
||||
import { computed, defineProps, provide, ref, watch } from 'vue'
|
||||
import { computed, defineProps, provide, ref, watch } from "vue";
|
||||
|
||||
const emit = defineEmits(['update:selectedKey', 'update:openKeys'])
|
||||
export interface LayMenuProps {
|
||||
selectedKey?: string;
|
||||
openKeys?: string[];
|
||||
tree?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
selectedKey?: string
|
||||
openKeys?: string[]
|
||||
tree?: boolean
|
||||
}>(),
|
||||
{
|
||||
selectedKey: '',
|
||||
openKeys: function () {
|
||||
return []
|
||||
},
|
||||
tree: false,
|
||||
}
|
||||
)
|
||||
const emit = defineEmits(["update:selectedKey", "update:openKeys"]);
|
||||
|
||||
const isTree = computed(() => props.tree)
|
||||
const props = withDefaults(defineProps<LayMenuProps>(), {
|
||||
selectedKey: "",
|
||||
openKeys: () => [],
|
||||
tree: false,
|
||||
});
|
||||
|
||||
const isTree = computed(() => props.tree);
|
||||
|
||||
const openKeys = computed({
|
||||
get() {
|
||||
return props.openKeys
|
||||
return props.openKeys;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:selectedKey', val)
|
||||
emit("update:selectedKey", val);
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const selectedKey = computed({
|
||||
get() {
|
||||
return props.selectedKey
|
||||
return props.selectedKey;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:selectedKey', val)
|
||||
emit("update:selectedKey", val);
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
provide('isTree', isTree)
|
||||
provide('selectedKey', selectedKey)
|
||||
provide('openKeys', openKeys)
|
||||
provide("isTree", isTree);
|
||||
provide("selectedKey", selectedKey);
|
||||
provide("openKeys", openKeys);
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export interface SelectItem {
|
||||
label?: string
|
||||
value?: string
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user