wenlng / go-captcha-vue

This is the vue package for go-captcha
http://gocaptcha.wencodes.com/package/vue/
MIT License
41 stars 20 forks source link

可以自定义样式么 #5

Closed CooperJiang closed 3 weeks ago

CooperJiang commented 2 months ago

可以支持自定义配置样式或者主题么? showTheme 似乎无效果

wenlng commented 1 month ago

可以支持自定义配置样式或者主题么? showTheme 似乎无效果

1、showTheme 是显示默认的底色+边框,showTheme:false 时隐藏底色+边框,一般为了适配某些UI框架的Diglog弹窗样式,然后也可以自定义底色+边框等样式 2、可以通过文档枚举变量自定义配置主题: http://gocaptcha.wencodes.com/other/captcha-theme/ 3、如果想要改变某个固定的布局样式,可以直接类优先级方法覆盖它,加上 ! important

CooperJiang commented 1 month ago

如果要动态切换暗色亮色模式 能支持么

wenlng commented 1 month ago

如果要动态切换暗色亮色模式 能支持么

可以实现,你了解一下 css var 变量,可以在 dark 类级下控制相关变量 --xxx-color: #xxxx ! important ,然后在 captcha 父级设置类样式 dark 例如: .dark { --go-captcha-theme-text-color: #8f94a7 !important;; --go-captcha-theme-bg-color: #18181a !important; --go-captcha-theme-btn-color: #ffffff !important;; --go-captcha-theme-btn-bg-color: #4e87ff !important;; --go-captcha-theme-btn-border-color: #4e87ff !important;; --go-captcha-theme-active-color: #3e7cff !important;; --go-captcha-theme-border-color: #3c3f44 !important;; --go-captcha-theme-icon-color: #696d7b !important;; --go-captcha-theme-drag-bar-color: #3c3f44 !important;; --go-captcha-theme-drag-bg-color: #3e7cff !important;; --go-captcha-theme-drag-icon-color: #ffffff !important;; --go-captcha-theme-round-color: #3c3f44 !important;; --go-captcha-theme-loading-icon-color: #3e7cff !important;; }