1、ant design 弹窗关闭后页面不能滚动!
问题描述:
在使用modal弹窗时候,关闭后导致页面无法滚动,检查后发现是body上设置了样式 overflow:hidden 导致不可滚动。
解决思路:
1、手动设置overflow为auto 2、单独的样式覆盖
峰回路转:
经过搜索后,问题就出在抽屉drawer,默认情况drawer直接挂在body上面的,有一个getContainer属性可以改变挂载节点。
最终解决方案:
:get-container="false"
2、element-ui date-picker 报错
问题描述
最近项目在控制台莫名的报 Prop being mutated: "placement" 错误。查看之后发现是 element的 *el-date-picker *组件抛出的错误。
在网上搜索后发现是在某个版本 将placement从created赋值改到 props placement 来适应位置。
也就是说placement 是data对象现在是props传入的。
所有就报错了。
解决方法
直接
``` npm uninstall element-ui
npm install element-ui@2.15.6 ```
github PR 地址 PR #21806
3、Html空格校验问题
1、问题描述
输入框校验不能输入中文空格,但是在同步到目标网站后,出现中文字符报错,但是从数据上,审查元素看 都看不出来有什么问题。手动删除空格在添加空格又发现校验通过。
2、解决过程
1、想通过正则来校验中文空格和英文空格的不同。 2、通过ascii码来看是否有什么不同的。
试了半天还是不行。
最后在审查元素的时候,发现同样的值校验不通过和通过的dom是一样的。大无语事件。
相比正常的不正常的值中的空格是 。
3、解决办法
找到问题后,通过校验半角字符除去空格之外就可以了。
HALF_WORDS: { pattern: '\\u0020-\\u007E', message: '英文半角字符', },
4、JSX语法导致控制台报错。
问题描述:
在ant design-vue中为table设置默认空样式的时候,使用jsx写法,导致报错。
``` emptyText: (
), }; ```
解决方法:
安装兼容插件解决
@vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-pros