Electron+Vue3 MAC 版日历开发记录(26)——FullCalendar Event 配色__Vue.js__Electron__前端
发布于 3 年前 作者 banyungong 1631 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

这是我参与更文挑战的第26天,活动详情查看: 更文挑战

当我们开始调整主题时,发现最大的问题来自,FullCalendar 和 Naive UI 拥有两套不同风格的样式,至少颜色上面有所区别,看下面这个截图:

其中我们发现一个特别显眼的地方就是:Event 事件的显示颜色和界面显得不搭。而且如果改变主题,显示的颜色基本不会跟着改变:

这就需要我们自己寻找 FullCalendar 有没有可以配置的地方,能让我们使用 Naive UI 的样式。

这里,我可不想自己再写 css 样式,因为自己写的容易和 Naive UI 的两个主题的其中一个不匹配。

FullCalendar 配置

具体我们查看 FullCalendar 官网,看看有哪些可以配置的:

原来在 FullCalendar 官网文档 中已提供了有关 Event 显示的配色可自定义:

如:eventTextColor, Sets the text color for all events on the calendar.

所以我们可以开始配置这些参数,让整个效果看起来和 Naive UI 比较协同。

Naive UI 配置

有了 Event 可自定义显示,那我们也需要找到 Naive UI 的主题配置参数:

好在于 Naive UI 提供了 useThemeVars,它包含了常见的主题变量:

{
  "name": "common",
  "fontFamily": "v-sans, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
  "fontFamilyMono": "v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace",
  "fontWeight": "400",
  "fontWeightStrong": "500",
  "cubicBezierEaseInOut": "cubic-bezier(.4, 0, .2, 1)",
  "cubicBezierEaseOut": "cubic-bezier(0, 0, .2, 1)",
  "cubicBezierEaseIn": "cubic-bezier(.4, 0, 1, 1)",
  "borderRadius": "3px",
  "borderRadiusSmall": "2px",
  "fontSize": "14px",
  "fontSizeTiny": "12px",
  "fontSizeSmall": "14px",
  "fontSizeMedium": "14px",
  "fontSizeLarge": "15px",
  "fontSizeHuge": "16px",
  "lineHeight": "1.6",
  "heightTiny": "22px",
  "heightSmall": "28px",
  "heightMedium": "34px",
  "heightLarge": "40px",
  "heightHuge": "46px",
  "transformDebounceScale": "scale(1)",
  "baseColor": "#FFF",
  "primaryColor": "#18a058",
  "primaryColorHover": "#36ad6a",
  "primaryColorPressed": "#0c7a43",
  "primaryColorSuppl": "#36ad6a",
  "infoColor": "#2080f0",
  "infoColorHover": "#4098fc",
  "infoColorPressed": "#1060c9",
  "infoColorSuppl": "#4098fc",
  "successColor": "#18a058",
  "successColorHover": "#36ad6a",
  "successColorPressed": "#0c7a43",
  "successColorSuppl": "#36ad6a",
  "warningColor": "#f0a020",
  "warningColorHover": "#fcb040",
  "warningColorPressed": "#c97c10",
  "warningColorSuppl": "#fcb040",
  "errorColor": "#d03050",
  "errorColorHover": "#de576d",
  "errorColorPressed": "#ab1f3f",
  "errorColorSuppl": "#de576d",
  "textColorBase": "#000",
  "textColor1": "rgb(31, 34, 37)",
  "textColor2": "rgb(51, 54, 57)",
  "textColor3": "rgb(158, 164, 170)",
  "textColorDisabled": "rgba(194, 194, 194, 1)",
  "placeholderColor": "rgba(194, 194, 194, 1)",
  "placeholderColorDisabled": "rgba(209, 209, 209, 1)",
  "iconColor": "rgba(194, 194, 194, 1)",
  "iconColorHover": "rgba(146, 146, 146, 1)",
  "iconColorPressed": "rgba(175, 175, 175, 1)",
  "iconColorDisabled": "rgba(209, 209, 209, 1)",
  "opacity1": "0.82",
  "opacity2": "0.72",
  "opacity3": "0.38",
  "opacity4": "0.24",
  "opacity5": "0.18",
  "dividerColor": "rgb(239, 239, 245)",
  "borderColor": "rgb(224, 224, 230)",
  "closeColor": "rgba(122, 122, 122, 1)",
  "closeColorHover": "rgba(89, 89, 89, 1)",
  "closeColorPressed": "rgba(149, 149, 149, 1)",
  "closeColorDisabled": "rgba(194, 194, 194, 1)",
  "clearColor": "rgba(194, 194, 194, 1)",
  "clearColorHover": "rgba(146, 146, 146, 1)",
  "clearColorPressed": "rgba(175, 175, 175, 1)",
  "scrollbarColor": "rgba(0, 0, 0, 0.25)",
  "scrollbarColorHover": "rgba(0, 0, 0, 0.4)",
  "progressRailColor": "rgba(235, 235, 235, 1)",
  "railColor": "rgb(219, 219, 223)",
  "popoverColor": "#fff",
  "tableColor": "#fff",
  "cardColor": "#fff",
  "modalColor": "#fff",
  "bodyColor": "#fff",
  "tagColor": "rgb(250, 250, 252)",
  "avatarColor": "rgba(204, 204, 204, 1)",
  "invertedColor": "rgb(0, 20, 40)",
  "inputColor": "rgba(255, 255, 255, 1)",
  "codeColor": "rgb(244, 244, 248)",
  "tabColor": "rgb(250, 250, 252)",
  "actionColor": "rgb(250, 250, 252)",
  "tableHeaderColor": "rgb(250, 250, 252)",
  "hoverColor": "rgb(243, 243, 245)",
  "tableColorHover": "rgba(0, 0, 100, 0.02)",
  "pressedColor": "rgb(237, 237, 239)",
  "opacityDisabled": "0.5",
  "inputColorDisabled": "rgb(250, 250, 252)",
  "boxShadow1": "0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)",
  "boxShadow2": "0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)",
  "boxShadow3": "0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)"
}

下面我根据这些参数,随便设置看看效果:

// FullcalendarSub.vue
import { useThemeVars } from 'naive-ui';

...

calendarOptions: {
  ...
  eventColor: this.themeVars.primaryColor,

具体看显示效果:

小结

有了 FullCalendar 和 Naive UI 相互提供可以协同的参数配置,剩下的就是交给我们自己多花时间好好调整,让界面更加好看和一致。

由于时间关系,我没在改变主题时,触发颜色变化的代码的完善,明天继续!

代码已同步到 github 上了:https://github.com/fanly/fanlymenu

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 叶梅树 原文链接:https://juejin.im/post/6978129692528214024

回到顶部