vue3 日常遇到问题汇总(涉及class- validator、ant-design-vue)

1. 在使用class-validator 验证的的时候需要注意:

  • 使用正则校验的话,需要把字段变更成字符串

2. 关于字典表类型不一致问题 添加管道

在这里插入图片描述
定义的类型和这个一致
定义的类型和这个一致

3. 关于校验规则错误的问题

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

4. 编辑数据之后不更新页面错误问题

在这里插入图片描述

const { proxy: { $forceUpdate },}: any = getCurrentInstance(); // 强制刷新

watch(
  () => 
  form, (newVal) => {
    if (newVal) {
        form = newVal;
        nextTick(() => {
          $forceUpdate();
        })
        console.log(newVal.__errors, 'errrors');
    }
  },{deep: true}
  );

编辑之后校验规则不生效的问题
在这里插入图片描述

5. 解决antdesign DatePicker日期组件传参时间比选中时间少一天的问题

moment先格式化一下即可

 const nowDay = moment(new Date()).format(YYYY-MM-DD);

6. a-input 添加toolTip 提示

toopTip 提示 内加 a-input 需要嵌套一层div

const reg = /^([1-9]{1}\d{1,9})(\.\d{1,2})?$/;

7. vue3子组件ref读取不到问题

< script setup >模式子组件必须使用 defineExpose 暴露出你需要让外部访问的方法或参数

引用外部链接-解决方法

8. ant-select 选择器跟随滚动问题

在这里插入图片描述
引入外部链接

:getPopupContainer="(triggerNode) => triggerNode.parentNode"

9. 关于页面滚动事件处理

如果需要滚动到元素位置
document.getElementById(el).scrollIntoView();
或者如果您需要沿轴滚动
window.scrollTo(0, 1000)

scrollTo(offsetTop) {
  const parent = document.querySelector('#app')
  parent.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  })
}

10. 前端请求接口提示Content type ‘application/x-www-form-urlencoded;charset=UTF-8‘ not supported

// 在请求方法里添加Content-Type如下
url: url,
method:‘post’ ,
data: parameter,
headers: {
‘Content-Type’: ‘application/json’,
},

11. echarts 问题 目录展示问题

在这里插入图片描述

formatter: function (params) {
             if (params.value > 0) {
               return params.value;
             } else {
               return '';
             }
           },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值