一、实现效果👀
二、代码实现🤖
<div class="line"></div>
.line {
width: 1px; /* 虚线宽度 */
background-image: linear-gradient(to bottom, #78FBCE 0%, #78FBCE 80%, transparent 50%;
background-size: 2px 12px; /* 虚线点间隔距离和虚线点长度 */
background-repeat: repeat-y;
transform: rotate(-45deg; /* 虚线倾斜角度 */
}
你还可以加上定位属性去调整线条位置等等。至此，线条效果就是实现啦！
三、封装：Vue3.0中组件封装🍬
1、🚚组件封装：
// DotLine.vue组件
<template>
<div class="line" :style="`
height: ${long};
transform: rotate(${rotate}deg;
left:${left} ;
right: ${right};
top:${top};
bottom:${bottom};`
">
</div>
</template>
<script setup lang="ts">
defineProps({
/**虚线长度 */
long: {
type: String,
default: "100px"
},
/** 虚线倾斜角度*/
rotate: {
type: Number,
default: -45
},
/**虚线距离容器左边定位 */
left: {
type: String,
default: ""
},
/** 虚线距离容器右边定位*/
right: {
type: String,
default: ""
},
/** 虚线距离容器顶部定位*/
top: {
type: String,
default: ""
},
/** 虚线距离容器底部定位*/
bottom: {
type: String,
default: ""
}
}
</script>
<style scoped>
.line {
width: 1px;
background-image: linear-gradient(to bottom, #78FBCE 0%, #78FBCE 80%, transparent 50%;
background-size: 2px 12px;
background-repeat: repeat-y;
position: absolute;
transform: rotate(-45deg;
}
</style>
2、🛖组件使用：
<DotLine long="88.4137px" :rotate=-45 left="223px" top="200px"></DotLine>
🎉以上就完成啦！欢迎大佬提出改进意见，或者其他的优质方案哦~