vue3项目中组件引入ts/原生js文件并调用其方法遇到的一些问题

2024-07-01 20:29| 来源: 网络整理| 查看: 265

基础不扎实呀。。。

question Q1Q2Q3

首先是关于ts/js的模块化编程例如一个slide.ts文件：

// 省略一些代码...... // 模块 export function slideInit() { new Slide().init(); } // 非模块，当引入vue组件中使用（比如调用上面的slideInit方法）时候会报错 // error: Couldn't resolve component "default" at "/" new Slide().init();

vue中使用：

import { slideInit } from './slide';

参考： JavaScript中的模块化编程：https://blog.csdn.net/tyxjolin/article/details/130462589

参考：Vue中使用原生js创建DOM，元素样式不生效解决办法：https://blog.csdn.net/qq_45118905/article/details/126840908

在Vue项目中也会遇到需要动态创建DOM的情况，但是采用指定className的方式给创建的DOM元素指定样式不起作用，在调试界面能看到类名被解析，但是样式未加载。

measureTooltipElement = document.createElement('div') measureTooltipElement.className = "ol-tooltip ol-tooltip-measure"

样式：

.ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 14px 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } .ol-tooltip-measure { opacity: 1; font-weight: bold; }

但是在页面渲染时却不生效：参考了网上众多方法，有以下几种可能：

Vue组件中样式Style中scoped导致样式局部生效，因为采用scoped每个类渲染后会有一个单独的data-v-xxxx编码格式，防止样式污染，去除即可。使用样式穿透，跳过scoped，这样就不用去除scoped造成全局样式污染。Vue2使用/deep/ className，Vue3使用:deep(className)，此外还有>>>（可以尝试一下，我这里没有效果）。 // Vue3 :deep(.ol-tooltip) { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 14px 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } :deep(.ol-tooltip-measure) { opacity: 1; font-weight: bold; } // Vue2 /deep/ .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 14px 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } /deep/ .ol-tooltip-measure { opacity: 1; font-weight: bold; } 可能是类的优先级，在子类前加上父类，这里时动态创建的类，所以使用了也没效果。我解决的办法：重新创建一个CSS/SCSS样式文件，然后在Vue组件中引用该文件即可，将不生效的样式都放在该样式文件中，不需要再去除scoped和deep。 ... import { slideInit } from './slide'; onMounted(() => { slideInit(); }) ... // 加了scoped，局部的 @import url('./index.less'); // 全局（为了生成DOM的样式能生效专门将其css写在一个单独的css文件） @import url('./slide.less'); Q3

项目一般打包的时候会处理文件hash 写的图片路径明明是这个，但项目运行起来却变成另一个，有些还自动转成base64 在这里插入图片描述遇到这种情况，如果你的ts/js文件中有拼接文件路径的，在单独的纯html+js+css里运行没问题，但放到项目中，因为会打包编译转换，所以路径啥的都变了，自然访问不到图片。解决办法就是直接引用打包好的图片地址：

import f1 from '@/assets/images/f1.png' import f2 from '@/assets/images/f2.png' import f3 from '@/assets/images/f3.png' import f4 from '@/assets/images/f4.png' export function xxfun() { banners = [ { imageName: f1, }, { imageName: f2, }, { imageName: f3, }, { imageName: f4, }, ]; ...... }

【本文地址】

公司简介

联系我们