theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💗 publish 0.2.5

Browse Source
This commit is contained in:
就眠儀式
2021-11-28 18:53:42 +08:00
parent 4a4ee87b65
commit 9689f24063
35 changed files with 111 additions and 2579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/button/index.vue
View File

@@ -53,7 +53,7 @@ const classes = computed(() => {
v-if="loading"
class="
layui-icon
layui-icon-loading-1
layui-icon-loading-one
layui-anim
layui-anim-rotate
layui-anim-loop

2
src/module/icon/index.ts
View File

@@ -1,5 +1,5 @@
import type { App } from 'vue'
import Component from './index.vue'
import { LayIcon as Component } from '@layui/icons-vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {

31
src/module/icon/index.vue
View File

@@ -1,31 +0,0 @@
<script lang="ts">
export default {
name: "LayIcon",
};
</script>
<script setup lang="ts">
import { computed, defineProps } from "vue";
export interface LayIconProps {
prefix?: string;
color?: string;
size?: string;
type?: string;
}
const props = withDefaults(defineProps<LayIconProps>(), {
prefix: "layui-icon",
});
const styles = computed(() => {
return {
color: props.color,
fontSize: props.size,
};
});
</script>
<template>
<i :class="[prefix, type]" :style="styles" />
</template>

2
src/module/iconPicker/index.vue
View File

@@ -83,7 +83,7 @@
<script setup name="LayIconPicker" lang="ts">
import { defineProps, Ref, ref } from 'vue'
import icons from "../../font/iconfont"
import { LayIconList as icons } from "@layui/icons-vue"
const props = withDefaults(
defineProps<{

0
src/module/layer/README.md Normal file
View File

9
src/module/layer/index.ts
View File

@@ -1,9 +0,0 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LayLayer', Component)
}
export default Component as IDefineComponent

220
src/module/layer/index.vue
View File

@@ -1,220 +0,0 @@
<script lang="ts">
export default {
name: "LayLayer",
};
</script>
<script lang="ts" setup>
import { onMounted, onUpdated, ref, useSlots, watch } from "vue";
import useMove from "../../hooks/useMove";
import { guid } from "../../tools/guidUtil";
const slot = useSlots();
onMounted(() => {
moveHandle();
});
onUpdated(() => {
moveHandle();
});
export interface LayLayerProps {
id?: string;
zIndex?: number;
title?: string;
offset?: string[];
width?: string;
height?: string;
visible?: boolean | string;
maxmin?: boolean | string;
btn?: Record<string, unknown>[];
move?: boolean | string;
type?: number;
content?: string;
shade?: boolean | string;
shadeClose?: boolean | string;
closeBtn?: boolean | string;
btnAlign?: string;
anim?: number | boolean;
isOutAnim?: boolean;
}
const props = withDefaults(defineProps<LayLayerProps>(), {
id: "layer-" + guid(),
zIndex: 99999999,
title: "标题",
offset: () => ["50%", "50%"],
width: "390px",
height: "330px",
visible: true,
maxmin: false,
move: false,
type: 1,
btn: () => [],
shade: false,
shadeClose: true,
closeBtn: true,
btnAlign: "l",
anim: 0,
content: "",
isOutAnim: true
});
const top = ref(props.offset[0].indexOf('%') != -1 ? "calc(" + props.offset[0] + " - (" + props.height + "/2 ))" : props.offset[0]);
const left = ref(props.offset[1].indexOf('%') != -1 ? "calc(" + props.offset[1] + " - (" + props.width + "/2 ))" : props.offset[1]);
const width = ref(props.width);
const height = ref(props.height);
const max = ref(false);
const contentHeight = ref(
props.btn.length > 0
? "calc(" + height.value + " - 100px)"
: "calc(" + height.value + " - 50px)"
);
watch(max, function () {
if (max.value) {
contentHeight.value =
props.btn.length > 0 ? "calc(100% - 100px)" : "calc(100% - 50px)";
} else {
contentHeight.value =
props.btn.length > 0
? "calc(" + height.value + " - 100px)"
: "calc(" + height.value + " - 50px)";
}
});
const emit = defineEmits(["close", "update:visible"]);
const moveHandle = function () {
if (props.move) {
const el = document.getElementById(props.id);
if (el != null) {
useMove(el);
}
}
};
const shadeHandle = function () {
if (props.shadeClose) {
emit("close");
emit("update:visible", false);
}
};
const closeHandle = function () {
emit("close");
emit("update:visible", false);
};
const minHandle = function () {
emit("close");
emit("update:visible", false);
};
const maxBeforeTop = ref()
const maxBeforeLeft = ref()
const maxHandle = function () {
if (max.value) {
width.value = props.width;
height.value = props.height;
top.value = maxBeforeTop.value;
left.value = maxBeforeLeft.value;
} else {
let dom = document.getElementById(props.id);
maxBeforeTop.value = dom?.style.top
maxBeforeLeft.value = dom?.style.left
width.value = "100%";
height.value = "100%";
top.value = "0px";
left.value = "0px";
}
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>

9
src/module/layer/modal/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import type { App } from 'vue'
import { LayModal } from '@layui/layer-vue';
import type { IDefineComponent } from '../../type/index'
LayModal.install = (app: App) => {
app.component(LayModal.name || 'LayModal', LayModal)
}
export default LayModal as IDefineComponent

7
src/module/table/index.vue
View File

@@ -14,6 +14,9 @@ import {
defineEmits,
} from "vue";
import { Recordable } from "../type";
import { guid } from "../../tools/guidUtil";
const tableId = guid();
const props = withDefaults(
defineProps<{
@@ -91,7 +94,7 @@ const rowDoubleClick = function (data: any) {
};
const print = function () {
let subOutputRankPrint = document.getElementById("lay-table") as HTMLElement;
let subOutputRankPrint = document.getElementById(tableId) as HTMLElement;
let newContent = subOutputRankPrint.innerHTML;
let oldContent = document.body.innerHTML;
document.body.innerHTML = newContent;
@@ -102,7 +105,7 @@ const print = function () {
</script>
<template>
<div id="lay-table">
<div :id="tableId">
<table class="layui-hide" lay-filter="test" />
<div
class="layui-form layui-border-box layui-table-view layui-table-view-1"