手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表查看gouki的文章

优化 Filament 的 flatpickr 插件

Filament 自带的日期组件在实际使用的时候功能还是相对比较少,因此在看到有 flatpickr 插件提供后,就想着替换了他。替换后发现功能确实达到我想要的,但带来的另一个问题是,纯英文的,语言包无法使用。即使显式的传入'local'=>'zh'也没用。

 
为此翻看源码,结果发现,作者在 2 年前就不维护了,直接更新 PHP 和 blade 模板发现都无效。检查他整体代码后,发现只能通过重新编译他的 filament-component 来解决
 
于是做了以下几步
1、将项目拷贝到 /plugins/下
2、在 composer.json 里指定路径 
3、将 "coolsam/flatpickr": 的版本,改成"@dev",
4、重新 composer u
5、进入 flatpickr 的项目,pnpm i,安装 Esbuild,修改 resources/js/components/flatpickr.js,在顶部 import flatpickrLocales from 'flatpickr/dist/l10n';
然后,在 this.fp = xxx 的上一行加入:flatpickr.localize(flatpickrLocales)
这是因为 flatpickr 对就在的是 FlatPickrFn,具体的几个方法可以点击 import flatpickr from "flatpickr"; 进行查看
6、重新 node bin/build.js 
虽然这时候生成了,但并不会更新到 public 里,还需要手工执行 php artisan filament:assets 
至此,更新成功
 
然后在调用的组件里引入:customConfig(['locale'=>'zh'])即可。测试了一下 zh_tw 也没问题
PHP代码
  1. Flatpickr::make('created_at')->label(创建日期') 
  2.     ->customConfig([ 
  3.          'locale' => 'zh',  
  4.     ])->monthSelect(),  
So easy。
 
 
---EOF---
因为比较懒,所以没有 PR 到原库,同时也没有自己根据原库弄个新库
 
 
 

Tags: filament, flatpickr

宝塔网站申请免费ssl证书报错:/usr/bin/curl: symbol lookup error

问题如下:/usr/bin/curl: symbol lookup error: /usr/bin/curl: undefined symbol: curl_easy_header

系统用的是腾讯自带的宝塔,上去看了一下,curl 是 7.70,开始以为是版本问题,于是 yum install curl,结果发现,安装的居然是 8.40 的。这个就纠结了。关键是我也不知道这个 8.40 安装在哪里了。
whereis curl,发现有多个位置有,每一个都运行了一下,结果发现都是 7.70,这个就让人纳闷了,最后选择了先取消 rpm 中的 curl 的关联,再yum remove curl
这时候再运行 curl 命令就会发现,在/usr/bin/curl 下的这个不正常了。报的就是上面的错。所以猜测他误用了 yum 的 curl-config,而/usr/local/bin/curl 则是正常。
于是直接 rm /usr/bin/curl 和 /usr/bin/curl-config ,再运行宝塔的获取 SSL证书。顺利通过

uniapp 打包 H5,如何直接部署到 OSS 或者其他平台?

UNIAPP 这玩意吧,你要说有用吧,也有,要说没用吧,也不至于。

uniapp 之前都是拿来做小程序或者 APP的,因为做 H5,就没必要了,对吧。但偶尔其实做做 H5 也挺快的,特别是不需要什么特别权限的时候,毕竟用它自带的 pages.json 连路由也省了。
 
H5 默认打包的时候是打包在 dist/build/h5的目录下面,但事实上我们在部署静态网站的时候,不可能都是叫 H5 的。所以这时候要注意几个点
1、打包到指定目录:在 package.json 中 build:h5 的命令前,指定 UNI_OUTPUT_DIR=dist/build/xxx。
2、此时要注意,在 API 里请求,仍然是/h5,如果这里也要改,得注意 manifest.json 的 H5 节点下,有一个:route.base,设置为和 UNI_OUTPUT_DIR 同名
3、如果要考虑在编译的时候指定域名。则在 H5节点下面,增加:domain
4、如果整体部署在其他平台,类似 oss\qiniu\cos 等。则调整 publicPath 的路径。
 
弄好之后,可以考虑用一键工具进行上传。七牛有 qshell,cos 和 oss 也有其他工具(网上可以搜一下有现成的)。上传前先清空服务器目录,或者进行覆盖 性处理。
到此,整体完成

解决 UniApp 的雷达图在微信小程序里的多边形阴影问题

 UniApp 配合 Echart,问题还真不少。而且很多官网的例子为了兼容,居然都是引用的老版本,也就导致在查看参数的时候发现数据结构不对了。而且生成的也都是 Canvas,所以,引起问题的就是指 canvas 下的。

 
上一篇说了文字的阴影,解决了。。今天说的是雷达图多边形配上颜色后,在小程序员也会自带阴影,解决方法类似,但位置会有点变化。
在 series 的 data 中,在这里面加入:areaStyle,哪个值对应的多边形要加阴影,就在哪个里面加入这个节点。因为会配置阴影的颜色和透明度,其实在相应的 areaStyle 里本身也会有:color 和 opacity 的值,这时候 也是相应的加入:shadowBlur:10,至少得 10,否则 shadowColor:'transparent'就不起使用了。
 
这里的用值其实很奇怪,它不是你设置为 0 或者-1 就能解决,开始也是在这里走了很多弯路,后来想起文字模糊是通过改为 transparent 解决的,想着这里也应该是。果然,生效了。
 
至此,手机上的显示效果基本与 PC 端一致了。关键是和设计稿也差不多。安逸的很(这个阴影比较奇怪,在模拟器上根本看不出来,只有在真机上才行。但我真机模拟一直失败,只能通过一次次的发布来查看体验版,为此,利用微信开发工具的 cli 写了个管道解决快速上传的问题,后面单独讲)。

解决小程序 echart 中字体模糊的问题

 小程序里使用了 Echart 之后,会遇到字体模糊,但是在开发工具下又看不出来,只有在真机上才会体现出来

网上所谓的教程中,有一大堆是说 canvas 在 resize 后,分辨率不对了,才会导致模糊,建议是改分辨率,设置的高一点。然而这种改法在真机上无效(测试机上也看不到效果)
 
直到看到在微信的论坛里有一篇:https://developers.weixin.qq.com/community/develop/doc/0006469c3a83c8a7ab8fef30351000,其中有人提出来,应该是设置 textStyle 中的textShadowBlur:10,textShadowColor:'transparent'之后就 OK 了。
 
我因为对 axiaName 进行了自定义的处理,是把样式放在 rich 中进行自由定义的,就在每一个样式里都加上了这个(主要是每次上传太累,就没有多做测试,是否放在统一的 textStyle 里就可以直接解决)
 
至此,问题解决。
 
我的 formatter 是这样的:

JavaScript代码
  1. formatter: (value: any, indicator: any) => {   
  2.   return `{${indicator.titleColor}|${indicator.text}}\n{${indicator.color}|⦿} {${indicator.textColor}|${indicator.label}}`  
  3. },  
所以才需要手工加样式
Records:307212345678910»