<script setup lang="ts">
  defineOptions({ name: 'DemoCustomPage', inheritAttrs: false, meta: { title: '自定义指令' } })

  const { createToast } = useMessage()

  const throttleNum = ref(0)
  const debounceNum = ref(0)

  function throttleClick(event: Event) {
    throttleNum.value++
    console.log(event)
  }
  function debounceClick(event: Event) {
    debounceNum.value++
    console.log(event)
  }

  function onScroll(event: Event) {
    console.log(event)
    createToast({ message: '触底啦' })
  }
  function longTouchClick(event: Event) {
    console.log(event)
    createToast({ message: '长按事件' })
  }
</script>

<template>
  <div>
    <div class="p-20px">
      <van-button plain type="primary" size="small" v-auth="['custom']">权限指令</van-button>
      <van-button plain type="primary" size="small" v-auth="['s_admin', 'test']" class="ml-50px">按钮级别</van-button>
    </div>
    <div class="p-20px">
      <van-button plain type="primary" size="small" v-throttle="throttleClick">节流指令</van-button>
      <div class="mt-12px text-28px">点击次数{{ throttleNum }}</div>
    </div>
    <div class="p-20px">
      <van-button plain type="primary" size="small" v-debounce="debounceClick">防抖指令</van-button>
      <div class="mt-12px text-28px">点击次数{{ debounceNum }}</div>
    </div>
    <div class="p-20px">
      <van-button plain type="primary" size="small" v-longTouch:stop="longTouchClick">长按指令</van-button>
    </div>
    <div class="p-20px h-200px overflow-scroll" v-scroll="onScroll">
      <div class="mt-12px text-28px" v-for="key in 30" :key="key">触底指令 | 滚动触发</div>
    </div>
  </div>
</template>

<style scoped lang="less">
  // a{
  //   overflow-y: scroll;
  // }
</style>
