疑难杂症
文章平均质量分 78
该专栏存储在实际工作开发中遇到的各种非常规问题,即为了提醒自己,也为了帮助他人。
努力的小朱同学
未来很长,梦想很远。
展开
-
在项目中如何利用JS去修改CSS的属性值 --- sass变量方法
关于在vue或nuxt项目中,利用JS去修改CSS样式方法有很多,比如:通过变量控制类名、通过变量控制style、通过JS去设置元素的style等等。但这些都是通过去修改元素的属性来修改,而不是去直接修改css样式表中的样式属性。本文讲述通过JS去修改 sass 变量的方式,来修改元素的样式表中的属性值。.........原创 2022-07-08 20:14:08 · 2548 阅读 · 2 评论 -
后端接口返回图形验证码数据流,前端应如何渲染展示
我们不能直接将图片数据流展示到页面上,所以我们需要想办法让图片验证码正常的展示在页面中。此处我列举两种办法:通过img标签的src去请求接口、通过原生ajax进行数据流转换。原创 2022-09-18 19:39:09 · 6778 阅读 · 2 评论 -
CSS 之 posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果
推测原因: 我一开始认为是因为父元素设置 `tranform` 属性后,就创建了一个新的BFC(块格式上下文),该元素内部的样式相对独立,所以子元素的`fixed`定位,才会以父元素为参照对象。但是经过实验,其他可以创建BFC的样式却不会导致这种特性,说明还跟`tranform`某些特性有关。浏览器限制: 经过我的测试,这个特性表现,目前在大部分主流浏览器中存在(Chrome、FireFox、Safari、Edge、猎豹、搜狗、360浏览器)原创 2022-09-08 10:45:31 · 1021 阅读 · 2 评论 -
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
通过官方文档可以得知两个重点:① 通过v-html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v-html插入的html@click、v-if等,则不会生效,因为他们没有被Vue编译,而浏览器并不会识别这些vue语法,所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性,那么该标签内的样式就不会对v-html生成的页面元素起作用,还是因为这些元素没有被当做Vue模板进行编译,所以不生效。原创 2022-09-05 00:12:39 · 14515 阅读 · 2 评论 -
vue 之 CSS进行样式穿透的方法(/deep/、::v-deep、>>> 、:deep、额外的全局<style>)
在很多vue的组件库 , 如vant,elementUI, iview等都可能自定义一些样式文件,如果我们在项目中引入了样式组件或者通过v-html渲染了数据,然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用,修改无效, 但如果直接去掉scoped话又会影响全局样式,令人头疼。本文是介绍:样式穿透和额外的全局的方式来解决该问题。原创 2022-09-05 00:11:00 · 8688 阅读 · 6 评论 -
在项目中如何利用JS去修改CSS的属性值(二) --- :root+var()方法
之前我写过一篇博客,是通过 JS+Sass变量修改CSS的属性值的方式来实现的该需求,但在后续的测试过程中我发现,这个方式不兼容IE11及以下版本,但我所写的项目需要兼容IE11,所以我最终使用了`:root{}` + `var()` + `css-vars-ponyfill`的方法来解决该问题。...原创 2022-08-13 21:42:55 · 5243 阅读 · 0 评论 -
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
1、在项目的assets文件夹下创建一个fonts的文件夹2、将UI给的字体文件放到该目录下3、在 fonts 文件夹中新建一个fonts.css 文件4、在 fonts.css 文件中引入字体,并定义字体名称5、在项目中使用第三方字体,分为以下两种情况:...原创 2022-08-04 22:43:25 · 2734 阅读 · 1 评论 -
Vue-Router报错:Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navigation
该错误是因为vue-router的内部没有对编程式导航进行catch处理,所以在使用`this.$router.push()` 和 `this.$router.replace` 进行路由跳转时,往同一地址跳转时或者在跳转的 mounted/activated 等函数中再次向其他地址跳转时会出现报错。但是在3.1.0版本及更高版本中,页面在跳转路由控制台会报Uncaught (in promise)的问题,push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。......原创 2022-07-25 09:39:30 · 3948 阅读 · 0 评论 -
下拉列表组件使用 iScroll.js 实现滚动效果遇到的坑
我是在 Nuxt 项目中,封装了一个关键词远程搜索的下拉框组件,输入关键词后,去后台搜索相关数据,下拉框内只能展示5条数据,需要向下滚动来查看其他数据,然后为避免数据量过大,限制每次加载十条数据,通过点击列表最后的加载更多项来加载更多数据。 .........原创 2022-07-19 20:17:02 · 593 阅读 · 0 评论 -
git push 失败,提示:error: RPC failed; HTTP 411 curl 22 The requested URL returned error: 411
是因为代码太久没提交,一次性要提交的包体积太大,超出了 git push 的最大缓存字节数(git push 使用 HTTP传输请求数据,默认最大字节数为1M字节)原创 2022-07-17 23:29:57 · 1093 阅读 · 2 评论