54 lines
913 B
Vue
54 lines
913 B
Vue
<template>
|
||
<view class="divider" :style="{ margin: margin }">
|
||
<view
|
||
:style="{
|
||
backgroundColor: color,
|
||
height: thickness + 'rpx',
|
||
width: hasMargin ? 'calc(100% - ' + sideMargin + 'rpx)' : '100%'
|
||
}"
|
||
></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Divider",
|
||
props: {
|
||
// 分割线颜色
|
||
color: {
|
||
type: String,
|
||
default: "#e5e5e5"
|
||
},
|
||
// 分割线厚度
|
||
thickness: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
// 上下外边距（如："20rpx 0"）
|
||
margin: {
|
||
type: String,
|
||
default: "20rpx 0"
|
||
},
|
||
// 是否有左右边距
|
||
hasMargin: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 左右边距大小
|
||
sideMargin: {
|
||
type: Number,
|
||
default: 40
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.divider {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
</style> |