基础不扎实呀。。。
Q1
首先是关于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
Q2
参考: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。
<template>
...
</template>
<script lang="ts" setup>
import { slideInit } from './slide';
onMounted(() => {
slideInit();
})
...
</script>
// 加了scoped,局部的
<style lang="less" scoped>
@import url('./index.less');
</style>
// 全局(为了生成DOM的样式能生效专门将其css写在一个单独的css文件)
<style lang="less">
@import url('./slide.less');
</style>
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,
},
];
......
}