zyejMAll-mobile/sheep/ui/su-subline/su-subline.vue

63 lines
1.2 KiB
Vue
Raw Normal View History

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>