2024-08-07 10:31:42 +08:00
|
|
|
|
<template>
|
2024-08-07 21:40:27 +08:00
|
|
|
|
<view class="wrap" :style="{ height: `${height}px` }">
|
2024-08-07 10:31:42 +08:00
|
|
|
|
<view class="divider" :style="[elStyle]"></view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
/**
|
|
|
|
|
* 分割线
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import { computed } from 'vue';
|
|
|
|
|
|
|
|
|
|
// 接收参数
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
// 线条颜色
|
|
|
|
|
lineColor: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '#000',
|
|
|
|
|
},
|
|
|
|
|
// 线条样式:'dotted', 'solid', 'double', 'dashed'
|
|
|
|
|
borderType: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: 'dashed',
|
|
|
|
|
},
|
|
|
|
|
// 线条宽度
|
|
|
|
|
lineWidth: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 1,
|
|
|
|
|
},
|
|
|
|
|
// 高度
|
|
|
|
|
height: {
|
|
|
|
|
type: [Number, String],
|
2024-08-07 21:40:27 +08:00
|
|
|
|
default: 'auto',
|
2024-08-07 10:31:42 +08:00
|
|
|
|
},
|
|
|
|
|
// 左右边距:none - 无边距,horizontal - 左右留边
|
|
|
|
|
paddingType: {
|
|
|
|
|
type: String,
|
2024-08-07 21:40:27 +08:00
|
|
|
|
default: 'none',
|
|
|
|
|
},
|
2024-08-07 10:31:42 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const elStyle = computed(() => {
|
|
|
|
|
return {
|
|
|
|
|
'border-top-width': `${props.lineWidth}px`,
|
|
|
|
|
'border-top-color': props.lineColor,
|
|
|
|
|
'border-top-style': props.borderType,
|
2024-08-07 21:40:27 +08:00
|
|
|
|
margin: props.paddingType === 'none' ? '0' : '0px 16px',
|
2024-08-07 10:31:42 +08:00
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2024-08-07 21:40:27 +08:00
|
|
|
|
.wrap {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2024-08-07 10:31:42 +08:00
|
|
|
|
|
2024-08-07 21:40:27 +08:00
|
|
|
|
.divider {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2024-08-07 10:31:42 +08:00
|
|
|
|
}
|
|
|
|
|
</style>
|