浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2023, December 15, 3:06 PM
在用 antv 的 modal 对话框时，你会发现弹出来的框有一个很大的边框，打开 css 会找到 ant-modal-content 这个 class。如果你直接 加这个样式 padding: 0，或者 :deep(.ant-modal-content){padding: 0 }你会发现都不起作用
即使，即使你用了 important 也还是不起作用
这时候 看浏览器工具栏的右侧，会有类似 :where(xxxx) .ant-modal-content 这样的样式，也就是说他本身就是一个伪类，如果你直接对它操作是不起作用的。
网上找了很多资料。最后找到说，其实他有一个 wrap-class-name 的属性。用了这个属性后，整个对话框里的样式就可以跟着这个外层类走了。因此设定：<a-modal wrap-class-name="wrap-modal" ></a-modal>
再添加样式：
XML/HTML代码
- .wrap-modal{
- .ant-modal-content{
- padding: 0!important;
- }
- }
再次看弹窗。一切正常啦 ~
Javascript | 评论:0
| 阅读:4283
Submitted by gouki on 2023, December 10, 11:35 PM
一般来说象这种效果实现还是比较有意思的
在文字下层加上一定高度的背景色，半透明，而且模糊。。。
话不多说，上代码：
CSS代码
- .text_bg {
- display: inline-block;
- position: relative;
- z-index: 1;
- }
-
- .text_bg::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 40%;
- background-color: #B6D16F;
- opacity: .7;
- z-index: -1;
- filter: blur(1px);
- }
上述代码中最重要的其实就是那两个z-index。否则你会发现背景色其实压在了文字上方。
其他的基本上都是基本操作，只是额外用了一个:after的伪类。在当前这个例子里。用before和after的最终显示效果其实是一样的
Javascript | 评论:0
| 阅读:4302
Submitted by gouki on 2023, September 13, 10:41 PM
在使用 phpstorm/webstorm 进行前端开发的时候，一般会设置 alias，比如@，但在 IDEA 中，如果项目是 vite/vuejs 的时候 ，无法识别路径。
网上教程很多，什么设置.eslintrc.js / jsconfig.json / tsconfig.json 之类的，但其实重启 IDE 后仍然无法识别。
查了一下资料，原来目前 phpstorm 对@的 alias，只支持 webpack，也就是说，如果你的前端项目是 webpack 的，其实是能够识别的。因此，只要在项目根目录下，随便建一个文件，尽量不要叫 webpack.config.js，以防被项目自动识别。你可以建一个 alias.config.js，内容如下：
JavaScript代码
- const path = require("path");
- module.exports = {
- resolve: {
- alias: {
- '@': path.resolve(__dirname, 'resources/js'),
- '~': path.resolve(__dirname, 'resources')
- }
- }
- }
看到这个 resource/js 就知道当前是在 laravel 项目下面了。
在 Ide 的 setting中 ：
Languaes & Frameworks > Javascript > Webpack ，选择手动，指定 alias.config.js ，确定后，再打开 *.vue 文件，会发现原来的 import 文件都能够自动识别了。
Tags: vite, laravel, webpack, phpstorm, webstorm
Javascript | 评论:0
| 阅读:5999
Submitted by gouki on 2023, September 12, 11:39 PM
解决 tailwindCss 与 elementUI 最简单办法就是
1、在 app.js(或main.js)中，先加载 tailwindCss 再加载 elementUI 和相关 css
2、在 tailwind.config.js 中，plugins节点下，增加：
JavaScript代码
- plugin(function ({addBase}) {
- addBase({
- ".el-button": {
- "background-color": "var(--el-button-bg-color,val(--el-color-white))"
- }
- })
- }),
说白了，就是继续针对 el-button 重新赋值。
再打开页面就完全正常了。
Javascript | 评论:0
| 阅读:5352
Submitted by gouki on 2023, September 3, 10:10 PM
一般而言，elementUI的prop+rules可以用来对字段进行校验。大多数情况下感觉都没什么问题，毕竟官方的例子摆在那里。element-plus的例子没有的，element-ui2的例子也比较全。
但element-plus和elementui中都 没有对number类型进行介绍，如果直接{type:'number',....} 不管你填入什么值 ，都会报错，即使你用el-input+type="number"，效果仍然一样
这是因为vue对所有的input默认都是当成string来解析的，因此你对一个string判断number，肯定就是失败的
网上80%的例子都是说采用：v-model.number="form.xxx" 来处理，确实，这样处理是OK的，但你会发现一个很严重的问题，那就是能输入的内容都是integer了。没法有小数点
这时候其实还是可以看element-plus所使用的async-validator的官方例子，因为黑夜的象{required:true},{type:"array"}等，都是来自于async-validator的官方支持，而官方是支持type="number"的。现在剩下的其实就是将el-input中的内容转为Number进行判断。仅此而已
官方的例子中有transform，这是一个钩子函数，用于验证前将数据进行简单的转换，比如我们就可以{type:"number",transform: Number}，如果不能转成Number，其实也就失败了
---
临时写的，就先这样，后续有机会慢慢写的更详细一点，也或许就不再写了
参考：
1、https://github.com/yiminghe/async-validator
2、https://www.cnblogs.com/alabo1999/p/14990310.html （正好找到这一篇足够详细，估计我也不会再多写了）
Javascript | 评论:0
| 阅读:4285
