效果图

可以抓住小箭头进行左右拖拽，不会做git图，所以只有静态效果QAQ

代码

<template><div class="tip"draggable="true"@dragstart="start"    //拖拽开始时@drag="dragging"    //拖拽种@dragend = "end"    //拖拽结束时:style="{width: length + 'px'}"></div>
</template><script setup lang='ts'>
import { ref } from "vue"
let x = ref(0);
let length = ref(300);
let startx = ref(0);function start(e){e.dataTransfer.setDragImage(e.target, window.outerWidth, window.outerHeight);//取消丑陋的阴影startx.value = e.offsetX
}
function dragging(e){    //根据偏移量计算widthx.value = e.offsetX - startx.valuelength.value = length.value + x.value startx.value = e.offsetX
}
function end(){    //初始化x.value= 0startx.value = 0length.value = 300
}
</script><style lang="less" scoped>
.tip{margin-top: 100px;height: 50px;background-color: red;clip-path: polygon(0 0 , 80% 0 , 100% 50% , 80% 100% , 0 100%);
}
</style>