项目中常见问题记录

lyz_bk

已于 2023-05-05 22:11:11 修改

阅读量2.8k

点赞数 1

分类专栏： Vue 文章标签： vue.js html javascript

于 2021-06-07 14:59:29 首次发布

本文链接：https://blog.csdn.net/lyz_112233/article/details/117661862

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端参数null传后端接受问题

1、前端null，后端字符串类型接受会是带有一个字节的空字符串，所以此时前端参数最好不要设置null,设置“”

2、前端null，后端接收是Interget类型，可行不会报错

vue中如何使得元素强制性加载

1、this.$forceupdate() //强制渲染页面

2、v-if //通过参数true||false 来控制组件重新渲染

3、如果v-if不灵敏时候，推荐用key，改变key值可以重新渲染组件，key = Math.random() //推荐

element el-cascader级联选择器样式修改

1、最重要的一点！！！
style不要加scoped不然会失效；我试了快一下午；样式都不起作用去掉scoped就好了！

-------------------------2023.5.5更新------------------------

其实上面的方法虽然能解决问题，但是会存在一个新的问题，vue框架页面跳转是页面内容重新渲染，不是整体资源重新加载，所以上面的写法会导致其他页面组件样式受到此写法影响。

解决方案如下：

element select 、cascader、time-picker等有下拉框的组件都会有此问题，因为此类组件的下拉框是将dom添加在全局的，所以为了不影响全局样式，在dom上加个自定义样式，然后在此自定义样式下，书写样式。el-select、el-cascader等组件都有prop-class属性，赋值自定义样式即可。

解决Uncaught (in promise) undefined问题

添加.catch(() => {}),马上药到病除

el-dialog属性配置

:append-to-body="true"

:visible.sync="dialogVisiable"

:close-on-click-modal="false"

表单重置，vlidator错误提示清空

this.$refs.editFrom.resetFields()

this.$refs.editFrom.clearValidate()

省略号换行（可以一行二行）

//一行

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

word-break: break-all;

//两行

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

line-clamp: 2;

-webkit-box-orient: vertical;

对象中的值更新，同时刷新到

this.$set(this.submitFormData, 'time' + (index + 1), bj.monitorValue)

强制更新组件

v-if="showFlag" 与 this.$nextTick(() => {this.showFlag = true})搭配使用

input:-internal-autofill-selected 默认选择颜色透明

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   -webkit-transition-delay: 99999s;
   -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

背景颜色渐变

background: -webkit-gradient(
      linear,
      10% 10%,
      100% 100%,
      color-stop(0, rgba(7, 90, 94, 0.13)),
      color-stop(0.2, rgba(68, 169, 195, 0.68)),
      color-stop(1, rgba(105, 215, 255, 0))
    );

window.localStorage用法

注意：存储对象是字符串，如果存储是对象，获取的时候为null,所以在存储对象时要转换成字符串

const obj = {id:1,name:'小哥'}
localStorage.setItem("userInfo",JSON.stringify(obj)); // 存储转化json字符串
JSON.parse(localStorage.getItem("userInfo")) // 获取转json对象
localStorage.removeItem("userInfo); // 删除具体某个存储数据
localStorage.clear();// 清空所有存储的数据

项目编译时报错

npm WARN deprecated core-js@2.6.12: core-js@＜3.3 is no longer maintained and not recommended for usa


正确解决方法


npm install npm@6.14.13  -g

数组数据更新时，组件数据不变（值得注意点）

使用filter()，concat()，slice()方法操作数组，不会更新视图；
使用push()，pop()，shift()，unshift()，splice()，sort()，reverse()方法操作数组，会触发视图更新。

learn 框架

前端项目也可以存在多个项目，项目之间存在相互依赖关系，learn框架能够很好的解决此方法。learn bootstrap => 加载各个子项目中的依赖包，也能将各个子项目打包成相对应的依赖包，共子项目依赖。