当前位置: 首页 > article >正文

vue3的自定义指令

<template>
    <div v-move:aaa.sbb="flag" v-show-model="'haveRole'">移动</div>
</template>
<script setup lang="ts">
import { Directive, ref } from 'vue';

const flag = ref<boolean>(false)
const VMove: Directive = {
    created() {
        
    },
    mounted(...args: Array<any>) {
        console.log(args);
        let el = args[0] as HTMLElement;
        const mousedown = (e: MouseEvent) => {
            console.log(e)
        }
        el.addEventListener('mousedown', mousedown);

        //IntersectionObserver 监听元素的可见部分比例 
        const obser = new IntersectionObserver((enr) => {
            console.log(enr);
            obser.unobserve(el);
        })
        obser.observe(el);
    },
    updated() {

    }
}

const VShowModel: Directive<HTMLElement, string> = (el, bind) => {
    console.log(el)
    console.log(bind.value)
}
</script>
<style></style>


http://www.kler.cn/news/135420.html

相关文章:

  • WMS仓储管理系统的工作流程是什么
  • ElasticSearch 安装(单机版本)
  • 云原生微服务-理论篇
  • 【运维篇】5.6 Redis server 主从复制配置
  • C++中使用构造函数进行类型转换
  • C++——模板
  • Java中异常的捕获与处理
  • 你听说过“消费多少返利多少的”模式吗?
  • 基于Vue+SpringBoot的医院门诊预约挂号系统 开源项目
  • 【C/PTA】函数专项练习(二)
  • C语言幂级数求近似值
  • JC/T 2339-2015 地暖用相变储能材料及构件检测
  • 游戏报错d3dcompiler_47.dll缺失怎么修复,总结多种修复方法
  • Linux文件目录以及文件类型
  • Iceberg学习笔记(1)—— 基础知识
  • Linux:zip包的压缩与解压
  • C#开发的OpenRA游戏之属性QuantizeFacingsFromSequence(7)
  • 测试用例的设计方法(全):正交实验设计方法|功能图分析方法|场景设计方发
  • 代码随想录 11.16 || 动态规划 LeetCode 583.两个字符串的删除操作、72.编辑距离
  • 网工内推 | 国企、港企网工,年底双薪,NA以上认证即可
  • CentOS 安装etcd集群 —— 筑梦之路
  • SpringCloud -Token传递之Feign
  • 【数据结构与算法】Kadane‘s算法(动态规划、最大子数组和)
  • 趣学python编程 (四、数据结构和算法介绍)
  • 【10套模拟】【7】
  • 【C++上层应用】1. 异常处理
  • 异步爬取+多线程+redis构建一个运转丝滑且免费http-ip代理池 (二)
  • 执行sql,提示Illegal instruction(非法指令)
  • C语言——函数的嵌套调用
  • 【zabbix监控三】zabbix之部署代理服务器