refactor(line): 重构 line, 支持竖直分割线和带内容分割线
This commit is contained in:
parent
95751c826d
commit
c61e8677a1
57
package/component/src/component/line/index.less
Normal file
57
package/component/src/component/line/index.less
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
@import (reference) "../../theme/variable.less";
|
||||||
|
|
||||||
|
.layui-line {
|
||||||
|
&-horizontal {
|
||||||
|
position: relative;
|
||||||
|
clear: both;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 10px 0;
|
||||||
|
border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
|
||||||
|
border-top-style: none;
|
||||||
|
border-left-style: none;
|
||||||
|
border-right-style: none;
|
||||||
|
|
||||||
|
&.layui-line-with-text {
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-vertical {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 1px;
|
||||||
|
max-width: 1px;
|
||||||
|
height: 1em;
|
||||||
|
margin: 0 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-left: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
|
||||||
|
border-top-style: none;
|
||||||
|
border-bottom-style: none;
|
||||||
|
border-right-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: currentColor;
|
||||||
|
line-height: 2;
|
||||||
|
background-color: #FFF;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
|
||||||
|
&-center {
|
||||||
|
left: var(--layui-line-text-offset);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
left: var(--layui-line-text-offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
right: var(--layui-line-text-offset);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -5,13 +5,68 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { computed, useSlots } from 'vue';
|
||||||
|
import './index.less'
|
||||||
export interface LayLineProps {
|
export interface LayLineProps {
|
||||||
|
direction?: 'horizontal' | 'vertical';
|
||||||
|
contentPosition?: 'center' | 'left' | 'right';
|
||||||
|
borderWidth?: string;
|
||||||
|
borderStyle?: string;
|
||||||
|
offset?: string;
|
||||||
theme?: string;
|
theme?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps<LayLineProps>();
|
const props = withDefaults(defineProps<LayLineProps>(),{
|
||||||
|
direction: 'horizontal',
|
||||||
|
contentPosition: 'center',
|
||||||
|
borderWidth: '1px',
|
||||||
|
borderStyle: 'solid',
|
||||||
|
offset: '25px',
|
||||||
|
})
|
||||||
|
|
||||||
|
const slots = useSlots();
|
||||||
|
const lineTheme: string[] = ['red', 'orange', 'green', 'cyan', 'blue', 'black', 'gray'];
|
||||||
|
const isSupportedTheme: boolean = lineTheme.includes(props.theme ?? "");
|
||||||
|
|
||||||
|
const lineClass = computed(() => ([
|
||||||
|
`layui-line-${props.direction}`,
|
||||||
|
{
|
||||||
|
[`layui-border-${props.theme}`]: isSupportedTheme,
|
||||||
|
[`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,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const lineTextStyle = computed(() => ({
|
||||||
|
'--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 undefined
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<hr :class="['layui-border-' + theme]" />
|
<div
|
||||||
|
:class="lineClass"
|
||||||
|
:style="lineStyle"
|
||||||
|
>
|
||||||
|
<span v-if="$slots.default && direction === 'horizontal'"
|
||||||
|
:class="[`layui-line-text layui-line-text-${contentPosition}`]"
|
||||||
|
:style="lineTextStyle"
|
||||||
|
>
|
||||||
|
<slot/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -4,6 +4,9 @@
|
|||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: describe 默认为水平分割线
|
||||||
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -21,6 +24,8 @@
|
|||||||
<lay-line theme="blue"></lay-line><br/>
|
<lay-line theme="blue"></lay-line><br/>
|
||||||
黑色分割线
|
黑色分割线
|
||||||
<lay-line theme="black"></lay-line><br/>
|
<lay-line theme="black"></lay-line><br/>
|
||||||
|
自定义颜色
|
||||||
|
<lay-line theme="#EEF08D"></lay-line><br/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -37,14 +42,83 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 带内容的分割线
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: describe 带内容的分割线,contentPosition 属性设置内容位置,offset 属性设置内容偏移量, 单位 <code>px</code> 或百分比值。也可以通过 <code>border-style</code>和<code>border-width</code>自定义样式
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-line>🌲 🌲 🌲 🌲</lay-line><br>
|
||||||
|
<lay-line contentPosition="left">left 默认</lay-line><br>
|
||||||
|
<lay-line contentPosition="right" offset="8%">right 百分比</lay-line><br>
|
||||||
|
<lay-line border-style="dashed" border-width="3px">自 定 义 宽 度 和 样 式</lay-line><br>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: title 竖直分割线
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: describe 设置 <code>direction = 'vertical'</code> 即可使用竖直分割线
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
默认分割线
|
||||||
|
<lay-line direction="vertical"></lay-line>
|
||||||
|
赤色分割线
|
||||||
|
<lay-line direction="vertical" theme="red"></lay-line>
|
||||||
|
橙色分割线
|
||||||
|
<lay-line direction="vertical" theme="orange"></lay-line>
|
||||||
|
墨绿分割线
|
||||||
|
<lay-line direction="vertical" theme="green"></lay-line>
|
||||||
|
青色分割线
|
||||||
|
<lay-line direction="vertical" theme="cyan"></lay-line>
|
||||||
|
蓝色分割线
|
||||||
|
<lay-line direction="vertical" theme="blue"></lay-line>
|
||||||
|
黑色分割线
|
||||||
|
<lay-line direction="vertical" theme="black"></lay-line>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
::: title Line 属性
|
::: title Line 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| Name | Description | Accepted Values |
|
| 属性 | 说明 | 可选值 |
|
||||||
| ----- | ----------- | --------------------------------------------- |
|
| ----- | ----------- | --------------------------------------------- |
|
||||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
| direction | 分割线的方向 | `horizontal` `vertical`|
|
||||||
|
| contentPosition | 分割线内容位置 | `center` `left` `right` |
|
||||||
|
| offset | 分割线内容偏移量,单位 px | eg: `30px` `20%`|
|
||||||
|
| theme | 主题 | `red` `orange` `green` `cyan` `blue` `black` `gray` 或 string |
|
||||||
|
| borderWidth | 分割线宽度,单位 px | eg: `2px`|
|
||||||
|
| borderStyle | 分割线样式 | <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style">参见MDN:border-style</a> |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title Line 插槽
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 插槽 | 说明 |
|
||||||
|
| ------ | ---------- |
|
||||||
|
| default| 默认插槽,仅支持 direction 为 `horizontal`|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user