效果图

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

代码

javascript"><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){    //根据偏移量计算width
  x.value = e.offsetX - startx.value
  length.value = length.value + x.value 
  startx.value = e.offsetX
}
function end(){    //初始化
  x.value= 0
  startx.value = 0
  length.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>