vue2 自定義指令

<ul v-srcollx="{active, total:7}" 
  class="items-center justify-center whitespace-nowrap overflow-hidden " style=" transition: all 0.5s;">
  <li v-for="(item,i) in 7" :key="i" @click="active=i" 
	style="width:140px;height:100px;line-height:100px;display:inline-block;"
	class="align-middle">
	<div :class="`circle ${active == i ? 'active':''}`">xx</div>
  </li>
</ul>

<script>
export default {
  data() {
    return {
		active:0,
    }
  },
  directives: {
    srcollx:(el, data, vnode)=>{
      clearTimeout(timers)
      const w = el?.querySelector?.('li')?.offsetWidth
      let maxL =  -w * (data.value.total - 5)
      timers = setTimeout(()=>{
        let res = 0
        if(data.value?.active > 2 && w){
          if(data.value.active >= data.value.total-2) res =  maxL// 5可視區數量
          else res = -w * (data.value.active - 2)
        }else{
        }
        el.style.marginLeft = res
      })
      el.onmousedown =(e)=>{
        e.preventDefault()
        e.stopPropagation()
        el.onmouseover = (o)=>{
          if(Math.abs(e.x - o.x)>3){
            el.querySelectorAll('li').forEach(o=> o.style.cursor="move");
            isMove = true
            el.style.marginLeft = +el.style.marginLeft?.replace?.('px','') + o.x - e.x
            if(el.style.marginLeft?.replace?.('px','')>=0) {
              el.style.marginLeft = 0
            }else if(+el.style.marginLeft?.replace?.('px','') <= maxL) {
              el.style.marginLeft = maxL
            }
            
          }
        }
        el.onmouseup = () =>{
          el.querySelectorAll('li').forEach(o=> o.style.cursor="pointer");
          el.onmouseout = null;
          el.onmouseover = null;
        }
      }
    }
  },
  
}
</script>