学习应用一下不常用的element-plus抛出的指令

学习应用一下element-plus抛出的指令

click-outside

效果图

作用

这个指令的主要目的是监听页面上的点击事件，并判断点击是否发生在指定元素之外。如果是，那么执行一些操作，如关闭弹出窗口

使用

<template>
  <div
    v-click-outside="() => toggele('', false)"
    v-if="show"
    :class="['absolute']"
    :key="path.x + path.y"
    :style="{ left: path.x + 'px', top: path.y + 'px' }"
  >
    <el-card class="relative z-10">
      <template #header>
        <div class="card-header">
          <span>操作菜单栏</span>
        </div>
      </template>
      <div class="text item" @click="closeAll">关闭所有</div>
      <div class="text item" @click="closeOther">关闭其他</div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from "@/store/index"
import { ClickOutside as vClickOutside } from "element-plus"

const store = useGlobalStore()
const show = ref(false)
const index = ref("")
defineProps({
  path: {
    type: Object,
    default: () => {
      return {
        x: 0,
        y: 0
      }
    }
  }
})
const closeAll = () => {
  console.log("关闭所有")
  store.clearTab()
  toggele("", false)
}
const closeOther = () => {
  console.log("关闭其他")
  store.closeOtherTab(index.value)
  toggele("", false)
}

const toggele = (key: string, visible = true) => {
  if (key) {
    index.value = key
  }
  show.value = visible
  console.log(show.value)
}

defineExpose({
  toggele
})
</script>

<style>
.mouseWheel {
  height: 500px;
  overflow-y: scroll;
}
</style>

mousewheel

效果图

作用

允许直接在模板中绑定滚轮事件的处理函数，而无需手动添加事件监听器，从而简化了鼠标滚轮事件处理的复杂度。

使用

<template>
  <div v-mousewheel="handleScroll" class="my-container">
    <!-- 这里可以是任何你希望在滚轮滚动时互动的内容，比如一个列表或图片等 -->
    <div class="h-[200px]" v-for="(item, index) in 10" :key="index">{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
import { Mousewheel as vMousewheel } from "element-plus"

const handleScroll = (event: WheelEvent) => {
  console.log("滚动了", event)
}
</script>
<style>
.my-container {
  height: 600px;
  overflow-y: scroll;
}
</style>

repeat-click

效果图

作用

这个指令可以帮助开发者在用户进行连续快速点击操作时触发特定的函数或动作，比如长按加减等

使用

<template>
  <el-button v-repeat-click="{ handler: handleRepeatClick, interval: 1000, delay: 500 }">连续点击我</el-button>
</template>

<script setup>
import { vRepeatClick } from "element-plus"

let count = 0

function handleRepeatClick() {
  count++
  console.log("按钮被点击了", count)
}
</script>