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

build: 发布 1.0.4 版本

Browse Source
This commit is contained in:
就眠儀式 2022-04-21 09:35:53 +08:00
parent bb94f7c291
commit 1a721dfbf7
1 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
package/component/src/component/line/index.vue
View File

@ -5,11 +5,11 @@ export default {
</script>
<script setup lang="ts">
import { computed, useSlots } from 'vue';
import './index.less'
import { computed, useSlots } from "vue";
import "./index.less";
export interface LayLineProps {
direction?: 'horizontal' | 'vertical';
contentPosition?: 'center' | 'left' | 'right';
direction?: "horizontal" | "vertical";
contentPosition?: "center" | "left" | "right";
borderWidth?: string;
borderStyle?: string;
offset?: string;
@ -17,52 +17,59 @@ export interface LayLineProps {
}
const props = withDefaults(defineProps<LayLineProps>(), {
direction: 'horizontal',
contentPosition: 'center',
borderWidth: '1px',
borderStyle: 'solid',
offset: '25px',
})
direction: "horizontal",
contentPosition: "center",
borderWidth: "1px",
borderStyle: "solid",
offset: "25px",
});
const slots = useSlots();
const lineTheme: string[] = ['red', 'orange', 'green', 'cyan', 'blue', 'black', 'gray'];
const lineTheme: string[] = [
"red",
"orange",
"green",
"cyan",
"blue",
"black",
"gray",
];
const isSupportedTheme: boolean = lineTheme.includes(props.theme ?? "");
const lineClass = computed(() => ([
const lineClass = computed(() => [
`layui-line-${props.direction}`,
{
[`layui-border-${props.theme}`]: isSupportedTheme,
[`layui-line-with-text`]: Boolean(slots.default)}
])
);
[`layui-line-with-text`]: Boolean(slots.default),
},
]);
const lineStyle = computed(() => ({
'border-color': !isSupportedTheme ? props.theme : undefined,
'--layui-line-border-width': props.borderWidth,
'--layui-line-border-style': props.borderStyle,
"border-color": !isSupportedTheme ? props.theme : undefined,
"--layui-line-border-width": props.borderWidth,
"--layui-line-border-style": props.borderStyle,
}));
const lineTextStyle = computed(() => ({
'--layui-line-text-offset': (props.contentPosition != 'center' ? props.offset : '50%'),
'transform': calcTranslate()
"--layui-line-text-offset":
props.contentPosition != "center" ? props.offset : "50%",
transform: calcTranslate(),
}));
function calcTranslate() {
if (props.offset.includes("%")) {
return props.contentPosition === 'right'
? 'translate(50%, -50%)'
: 'translate(-50%, -50%)'
return props.contentPosition === "right"
? "translate(50%, -50%)"
: "translate(-50%, -50%)";
}
return undefined
return undefined;
}
</script>
<template>
<div
:class="lineClass"
:style="lineStyle"
>
<span v-if="$slots.default && direction === 'horizontal'"
<div :class="lineClass" :style="lineStyle">
<span
v-if="$slots.default && direction === 'horizontal'"
:class="[`layui-line-text layui-line-text-${contentPosition}`]"
:style="lineTextStyle"
>