在Ts中定义全局方法（function），进行调用

最新推荐文章于 2024-01-30 11:37:37 发布
最新推荐文章于 2024-01-30 11:37:37 发布
阅读量1.9k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45220510/article/details/128535481
版权
在Vue3中由于不支持require，文章提出了一种解决方案，即创建一个全局函数get_img_url，该函数通过URL和import.meta.url来引用本地静态资源。这个方法在vue文件中定义，并在vite-env.d.ts中声明，使得在项目全局可调用，便于引用图片等静态资源。
摘要由CSDN通过智能技术生成

在这里举一个例子,因为vue3无法使用require,无法调用本地静态资源

所以定义一个全局方法调用本地资源

首先在vue文件中定义一个方法，如下：

 

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
(window as any)['get_img_url'] = (name: any) => {
  return new URL(`/src/assets/img/${name}`, import.meta.url).href;
}
const data = reactive({
  img_url: [
    { url: get_img_url("login1.jfif") },
    { url: get_img_url("login2.jfif") },
    { url: get_img_url("login3.jfif") },
    { url: get_img_url("login4.jfif") },
  ],
});
const { img_url } = toRefs(data)
</script>

然后在vite-env.d.ts 中定义

 declare let get_img_url:(name: any)=> string;

就可以在全局随意调用方法 get_img_url()

wlik
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript学习
m0_51431448的博客
06-26 573
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。是为大型应用的开发而设计，并且可以编译为JavaScript，是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+
Typescript基础语法——函数
Kätzchen-408的博客
04-08 336
Typescript基础语法——函数函数ts中函数的写法命名函数匿名函数完整写法可选参数和默认参数剩余参数(rest参数)函数重载 函数 ts中函数的写法 命名函数 函数声明： function add(x: string, y: string): string { return x + y } 匿名函数 函数表达式： const add2 = function (x: number, y: number): number { return x + y } 完整写法 co
TS — 声明变量的关键字const，let，var的使用和区别
sjsjsjsj1010的博客
04-04 3868
声明变量的关键字const，let，var的使用和区别
vue3+ts 全局函数和变量的使用
weixin_45932157的博客
11-29 642
【代码】vue3+ts 全局函数和变量的使用。
vue3 注册全局方法 定义全局方法
热门推荐
圆圈圈的博客
10-20 2万+
定义工具类 // 格式化时间 function FormatDate (time: string) { if (Tool.isNotEmpty(time)) { const date = new Date(time) // 注意js里面的getMonth是从0开始的 let FormattedDateTime = null const year = date.getFullYear() const month = (date.getMonth() + 1)
axios的ts二次封装+调用
02-02
本文将详细讲解如何对axios进行TypeScript（简称ts）的二次封装，以及如何在实际项目中调用封装后的接口。 首先，让我们理解什么是axios的二次封装。二次封装通常是为了提高代码的可复用性和可维护性，将常见的功能...
JavaScript中arguments和this对象用法分析
12-12
1. **作为普通函数调用**：如果函数不是作为对象的属性被调用，`this`将绑定到全局对象，通常在浏览器环境中是`window`对象。 2. **作为对象方法调用**：当函数作为对象的方法调用时，`this`将指向那个对象。 3. **...
SQL利用Function创建长整形的唯一ID示例代码
09-09
`newid()` 函数在SQL Server中用于生成全局唯一标识符（GUID），虽然保证了全局唯一性，但其36个字符的长度可能导致存储空间浪费和查询效率降低。此外，由于`newid()`返回的是无序的，对于需要按照保存顺序排列的...
JS中call/apply、arguments、undefined/null方法详解
11-24
在继承场景下，通过`call`或`apply`，子类可以在构造函数中调用父类的构造函数，从而继承父类的属性和方法。例如，上面的`Animal`和`Cat`的例子就展示了如何通过`call`实现简单的继承。 至于多重继承，JavaScript中...
vue中实现图片压缩 file文件的方法
10-15
为了方便在其他组件中调用这个压缩方法，我们需要在`api.js`文件的结尾处暴露这个方法： ```javascript export default { compressImg, }; ``` 在项目的入口文件`main.js`中，我们将`api.js`导入并注册为Vue的...
ts全局变量定义
宏斌的博客
10-21 5500
全局定义可以获得全局ts支持
typescript中如何创建全局类型
最新发布
qq_42391246的博客
01-30 965
文件是 TypeScript 中创建全局类型的推荐方法，因为它不会污染全局命名空间，并且可以清楚地表明哪些类型是全局可用的。记得将这些声明文件包含在你的 TypeScript 项目配置中，这样 TypeScript 编译器就可以识别它们。在 TypeScript 中，如果你想要创建一个全局可用的类型，你可以在全局作用域中声明这个类型。这个文件不需要导入，TypeScript 会自动将其中的声明视为全局可用。如果你在模块系统（如 CommonJS 或 ES6 模块）中工作，你仍然可以通过在。
vue3+TS自动化封装全局api
weixin_44368048的博客
09-28 2154
vue3+TS自动化封装全局api
ts中引入js文件以及使用全局js方法报错问题
想搞全栈的前端
09-18 1万+
ts中引入js报错 一、 无法找到模块“@/xxx/xxx”的声明文件。“xxx.js”隐式拥有 “any” 类型。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Txigu319-1631930149705)(C:\Users\oyzq\AppData\Roaming\Typora\typora-user-images\1631929576599.png)] 解决办法： 使用 require引用 const { encryptionJump,decryptJump } =
cocoscreater在ts脚本里使用全局对象
wjysg8408982的博客
09-01 1818
在ts脚本里使用全局对象在js脚本里使用全局对象 在js脚本里使用全局对象 因为js是弱类型的语言，所以在定义数据时，可以不用声明，直接在类里this.出来用就行了，所有在声明全局对象时window.命名就能直接使用了 // 例子 cc.Class({ extends: cc.Component, onLoad () { // 在函数内直接使用全局对象并把当前对象赋值给window.global这个全局类型 window.global = this;
TS 函数
0.0 的博客
02-18 1104
在 TS 中，要使用函数，要求必须约束函数参数和返回值的类型。 一、基础语法 1、JS 中函数 函数声明式： function 函数名(参数) { return 返回值 } 函数表达式： const 变量名 = function(参数) { return 返回值 } 2、TS 中的函数 函数声明式： function 函数名(参数: 参数类型): 返回值类型 { return 返回值 } 函数表达式分为以下几种写法： 1）只定义函数参数和返回值的类型 const 变量名 = f
VUE+TS 方法整理
前端Cocoko
04-09 2972
内容 《Vue.js 权威指南》GIT源码篇 -双向绑定 1、keep-alive -生命周期刷新操作 1、keep-alive -生命周期刷新操作 简介： 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 适用场景： https://www.jb51.net/article/131110.htm beforeRouteEnter 总会触发： 不使用 keep-alive 时， beforeRouteEnter --> created --&...
vue3 ts 调用全局组件
06-03
如果你想在 Vue3 TypeScript 中调用全局组件，可以通过在 `components` 对象中注册组件来实现。 首先，在你的全局组件中，你需要使用 `app.component` 方法将组件注册到 Vue 的实例中，例如： ```typescript import { defineComponent } from 'vue'; export default defineComponent({ name: 'MyGlobalComponent', // ... 组件的其它配置 }); // 注册全局组件 app.component('my-global-component', MyGlobalComponent); ``` 然后，在你的组件中，你可以像这样直接使用该组件： ```vue <template> <div> <my-global-component /> </div> </template> ``` 这里假设你把组件命名为 `MyGlobalComponent`，并将其注册为 `my-global-component`。 同时，你还需要在你的组件中引入 `app` 对象，例如： ```typescript import { defineComponent, App } from 'vue'; export default defineComponent({ name: 'MyComponent', // ... 组件的其它配置 }); // 在组件中使用全局组件 export default function useGlobalComponent(app: App) { app.component('my-global-component', MyGlobalComponent); } ``` 然后在你的组件中，你可以像这样使用 `useGlobalComponent` 函数： ```typescript import { defineComponent } from 'vue'; import useGlobalComponent from './useGlobalComponent'; export default defineComponent({ name: 'MyComponent', // ... 组件的其它配置 setup() { useGlobalComponent(app); // ... 继续你的逻辑 }, }); ``` 这样，就可以在你的组件中使用全局组件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值