前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >奇葩的Html空格校验问题~

奇葩的Html空格校验问题~

作者头像
执行上下文
发布2022-07-26 15:12:09
1.4K0
发布2022-07-26 15:12:09
举报
文章被收录于专栏:执行上下文

1、ant design 弹窗关闭后页面不能滚动!

问题描述:

在使用modal弹窗时候,关闭后导致页面无法滚动,检查后发现是body上设置了样式 overflow:hidden 导致不可滚动。

解决思路:

1、手动设置overflow为auto

2、单独的样式覆盖

峰回路转:

经过搜索后,问题就出在抽屉drawer,默认情况drawer直接挂在body上面的,有一个getContainer属性可以改变挂载节点。

最终解决方案:

代码语言:javascript
复制
:get-container="false"

2、element-ui date-picker 报错

问题描述

最近项目在控制台莫名的报 Prop being mutated: "placement" 错误。查看之后发现是 element的 **el-date-picker **组件抛出的错误。

在网上搜索后发现是在某个版本 将placement从created赋值改到 props placement 来适应位置。

也就是说placement 是data对象现在是props传入的。

所有就报错了。

解决方法

直接

代码语言:javascript
复制
npm uninstall element-ui

npm install element-ui@2.15.6

github PR 地址 PR #21806[1]

3、Html空格校验问题

1、问题描述

输入框校验不能输入中文空格,但是在同步到目标网站后,出现中文字符报错,但是从数据上,审查元素看 都看不出来有什么问题。手动删除空格在添加空格又发现校验通过。

2、解决过程

1、想通过正则来校验中文空格和英文空格的不同。2、通过ascii码来看是否有什么不同的。

试了半天还是不行。

最后在审查元素的时候,发现同样的值校验不通过和通过的dom是一样的。大无语事件。

不正常的值

正常的值

相比正常的不正常的值中的空格是**&nbsp**。

3、解决办法

找到问题后,通过校验半角字符除去空格之外就可以了。

代码语言:javascript
复制
HALF_WORDS: {
    pattern: '\\u0020-\\u007E',
    message: '英文半角字符',
  },

4、JSX语法导致控制台报错。

问题描述:

在ant design-vue中为table设置默认空样式的时候,使用jsx写法,导致报错。

代码语言:javascript
复制
emptyText: (
    <a-empty
      description={"暂无数据~"}
      imageStyle={{ height: 80, width: 80 }}
      image={require("@/assets/imgs/ksj.png")}
    ></a-empty>
  ),
};

解决方法:

安装兼容插件解决

代码语言:javascript
复制
@vue/babel-preset-jsx
@vue/babel-helper-vue-jsx-merge-pros

参考资料

[1]

PR #21806: https://github.com/ElemeFE/element/pull/21908

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 执行上下文 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、ant design 弹窗关闭后页面不能滚动!
    • 问题描述:
      • 解决思路:
        • 峰回路转:
          • 最终解决方案:
          • 2、element-ui date-picker 报错
            • 问题描述
              • 解决方法
              • 3、Html空格校验问题
                • 1、问题描述
                  • 2、解决过程
                    • 3、解决办法
                    • 4、JSX语法导致控制台报错。
                      • 问题描述:
                        • 解决方法:
                          • 参考资料
                          领券
                          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档