在vue3中结合TypeScript给树节点绑定双击事件

caicaiyaonuli

已于 2024-02-18 10:10:12 修改

阅读量120

点赞数 1

文章标签： typescript

于 2024-02-18 10:08:30 首次发布

本文链接：https://blog.csdn.net/caicaiyaonuli/article/details/136146419

版权

:node-props="nodeProps"

const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    onDblclick() {
      if (option.treeNodeType == TreeNodeType.TABLE) {
        message.info('[DoubleClick] ' + option.label);
      }
    },
  };
}

注意事件名为onDblclick

优惠劵

caicaiyaonuli

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
在vue3中结合TypeScript给树节点绑定双击事件

【代码】在vue3中结合TypeScript给树节点绑定双击事件。
复制链接

扫一扫

在Vue.js中使用TypeScript的方法

11-21

虽然 vue2.x 对TypeScript的支持还不是非常完善，但是从今年即将到来的3.0版本在GitHub上的仓库 vue-next 看，为TS提供更好的官方支持应该也会是一个重要特性，那么，在迎接3.0之前，不妨先来看看目前版本二者的搭配食用方法吧~ 创建项目虽然GitHub上有各种各样相关的Starter，但是使用 Vue CLI 应该是目前相对比较好的方式，在使用 vue create 创建新项目时，对 preset 选择 Manually select features 选项，之后添加 TypeScript 如果想在vue应用中完整使用ES6中提供的类特性，那么在 cla

vue3+typescript+ElementUI后台管理DEMO

02-27

Vue3+TypeScript实战项目，使用 ElementUI 搭建页面，完成登录、商品列表、用户列表、角色列表、退出登录。通过页面展示、搜索、分页、编辑等功能的实现练习怎么在vue3中使用TypeScript。...

1 条评论您还未登录，请先登录后发表或查看评论

vue实现在v-html的html字符串中绑定事件

10-16

今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

在Vue项目中使用Typescript的实现

10-15

主要介绍了在Vue项目中使用Typescript的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

VUE：el-tree 节点双击事件

yhj68100055的博客

02-07

2175

VUE：el-tree 节点双击事件

VUE tree树双击选中(显示层级结构) 及 vuedraggable插件拖拽功能的实现

xu_duo_i的博客

08-17

2389

VUE tree树双击选中(显示层级结构) 及 vuedraggable插件拖拽功能的实现

【Vue3】自定义拖拽指令并阻止点击事件

JustID_的博客

10-26

1301

本文介绍以Vue指令的形式实现组件拖拽功能。

antv/x6_2.0学习使用（六、事件系统）

bighead的博客

01-08

1837

/ 表示一个删除按钮，点击时删除该节点image: {width: 20,},});可以通过绑定的事件名 node:delete 或通用的 cell:customevent、node:customevent、edge:customevent 事件名来监听。});});功能演示。

VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind

Mr_simoon的博客

03-20

4905

第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。

在Vue组件中使用 TypeScript的方法

08-27

typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法。这篇文章主要介绍了在Vue组件中使用 TypeScript的方法,需要的朋友可以参考下

关于在vue2.6+ts技术栈下高德地图API的使用方法

weixin_42833042的博客

01-20

3328

最近公司某个项目用上了vue2.6+typescript的技术栈，整个工程都是用vue-cli3直接生成的，自带了ts-loader来解析ts文件，非常方便。但是对于一些没有没有声明文件的第三方模块，用起来会比较麻烦，过程中，我们用到的高德地图就是其中之一，虽然官方推荐使用vue-amap，但是想追求粒度更细的操作，还是原生的api更为方便，下面来记录一下全程的配置过程。一、引入api文件 ...

vue2+3 pinia v-router学习记录

picktheshy的博客

03-19

460

vue2+3 pinia v-router 学习记录

Vue教程-3-Webpack快速入门

狼行千里吃肉

10-29

218

目录 Webpack Webpack安装 Webpack基本使用 webpack.config.js package.json loader 案例 less/scss/stylus样式文件加载图片 ES6转ES5 配置Vue el与template区别模块抽离过程1：template阶段模块抽离过程2：自定义组件阶段模块抽离过程3：自定义组件封装阶段模块抽离过程4：webpack封装阶段 plugin使用 BannerPlugin插件 HtmlWebpackP

【Vue】基础语法

小数点儿_

03-16

975

目录错误路径组件钩子函数props 属性computed 计算属性mixins 混入属性watch 监听属性指令v-on 指令v-bind 指令v-model 指令自定义指令样式绑定classstylerouter 路由响应式系统reactiverefAjax(axios) Vue3 教程 Vue3 教程官网 Vue3 入门指南与实战案例 vue create 名称 cd 所在文件夹 npm run serve 在浏览器中打开提供的网站在index.html编写，每次保存网站都会更新 <!--

《前端面试题》- TypeScript - TypeScript的优/缺点

小张微说的博客

04-22

7080

问题简述TypeScript的优/缺点答案优点增强了代码的可读性和可维护性包容性，js可以直接改成ts，ts编译报错也可以生成js文件，兼容第三方库，即使不是ts编写的社区活跃，完全支持es6 缺点增加学习成本增加开发成本，因为增加了类型定义需要编译，类型检查会增加编译时长，语法和类型系统复杂的话时间特别特别长 eval和new Function()这种操作类型系统管不到 ...

android手机应用源码Imsdroid语音视频通话源码.rar

最新发布

05-20

android手机应用源码Imsdroid语音视频通话源码.rar

营销计划汇报PPT，市场品牌推广渠道产品营销策略tbb.pptx

05-20

营销计划汇报PPT，市场品牌推广渠道产品营销策略tbb.pptx

在vue3中使用typescript

04-04

Vue 3 在设计时就考虑了 TypeScript 的支持，因此使用 TypeScript 开发 Vue 3 应用非常方便。下面是使用 TypeScript 开发 Vue 3 应用的步骤： 1. 创建一个 TypeScript 项目首先需要创建一个 TypeScript 项目，可以使用 Vue CLI 创建一个 TypeScript 项目： ``` vue create my-project ``` 在创建项目时选择 TypeScript： ``` ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TypeScript, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript for auto-detected polyfills? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ``` 2. 安装 Vue 3 因为 Vue 3 目前还处于 beta 版本，所以需要安装 `vue@next`。 ``` npm install vue@next --save ``` 3. 编写组件在 TypeScript 中编写 Vue 组件需要使用类的形式，例如： ```typescript import { defineComponent } from 'vue'; export default defineComponent({ name: 'HelloWorld', props: { msg: String, }, setup(props) { return { msg: props.msg, }; }, }); ``` 4. 配置 TypeScript 在 Vue 3 中使用 TypeScript 需要做一些配置，如在 `tsconfig.json` 中添加 `Vue` 的声明文件： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "allowSyntheticDefaultImports": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true }, "include": ["src", "tests", "typings", "shims-vue.d.ts"], "exclude": ["node_modules"], "files": ["./node_modules/vue/types/vue.d.ts"] } ``` 还需要在 `shims-vue.d.ts` 中声明 Vue 类型： ```typescript declare module '*.vue' { import { defineComponent } from 'vue'; const component: ReturnType<typeof defineComponent>; export default component; } declare module 'vue' { export interface ComponentCustomProperties { $store: Store<State>; } } ``` 5. 使用组件在 Vue 3 中使用 TypeScript 编写的组件和使用 JavaScript 编写的组件是一样的，只需要像平常一样引入组件即可： ```vue <template> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> </template> <script lang="ts"> import { defineComponent } from 'vue'; import HelloWorld from '@/components/HelloWorld.vue'; export default defineComponent({ components: { HelloWorld, }, }); </script> ``` 以上就是在 Vue 3 中使用 TypeScript 的步骤。需要注意的是，因为 Vue 3 目前还处于 beta 版本，所以在使用时可能会遇到一些问题。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交