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

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

click-outside

效果图

作用

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

使用
js 复制代码
<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

效果图
作用

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

使用
js 复制代码
<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

效果图
作用

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

使用
js 复制代码
<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>
相关推荐
范文杰11 分钟前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪19 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪28 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy1 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端