学习应用一下不常用的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>
相关推荐
机器视觉知识推荐、就业指导1 分钟前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow8 分钟前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷13 分钟前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试14 分钟前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog17 分钟前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
Stella252119 分钟前
10前端项目----商品详情页/滚轮行为
前端
阑梦清川29 分钟前
AI超级智能体项目教程(二)---后端项目初始化(设计knif4j接口文档的使用)
java·前端·数据库
程序猿--豪1 小时前
webpack详细打包配置,包含性能优化、资源处理...
前端·webpack·性能优化
乌夷1 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
小小小小宇1 小时前
前端监控 SDK
前端