项目中常见问题记录

前端参数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 => 加载各个子项目中的依赖包,也能将各个子项目打包成相对应的依赖包,共子项目依赖。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值