63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="wrap" :style="{height: `${height}px`}">
|
|||
|
|
<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],
|
|||
|
|
default: 'auto'
|
|||
|
|
},
|
|||
|
|
// 左右边距：none - 无边距，horizontal - 左右留边
|
|||
|
|
paddingType: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'none'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const elStyle = computed(() => {
|
|||
|
|
return {
|
|||
|
|
'border-top-width': `${props.lineWidth}px`,
|
|||
|
|
'border-top-color': props.lineColor,
|
|||
|
|
'border-top-style': props.borderType,
|
|||
|
|
margin: props.paddingType === 'none' ? '0' : '0px 16px'
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|