App.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <el-config-provider :locale="locale" :size="config.size" :zIndex="config.zIndex" :button="config.button">
  3. <router-view></router-view>
  4. </el-config-provider>
  5. </template>
  6. <script>
  7. const debounce = (fn, delay) => {
  8. let timer = null;
  9. return function () {
  10. let context = this;
  11. let args = arguments;
  12. clearTimeout(timer);
  13. timer = setTimeout(function () {
  14. fn.apply(context, args);
  15. }, delay);
  16. }
  17. }
  18. const _ResizeObserver = window.ResizeObserver;
  19. window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  20. constructor(callback) {
  21. callback = debounce(callback, 16);
  22. super(callback);
  23. }
  24. }
  25. import colorTool from "@/utils/color";
  26. export default {
  27. name: "App",
  28. data() {
  29. return {
  30. config: {
  31. size: "default",
  32. zIndex: 2000,
  33. button: {
  34. autoInsertSpace: false
  35. }
  36. }
  37. }
  38. },
  39. computed: {
  40. locale() {
  41. return this.$i18n.messages[this.$i18n.locale].el
  42. }
  43. },
  44. created() {
  45. // 设置主题颜色
  46. const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get("APP_COLOR")
  47. if (app_color) {
  48. document.documentElement.style.setProperty("--el-color-primary", app_color);
  49. for (let i = 1; i <= 9; i++) {
  50. document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color, i / 10));
  51. }
  52. for (let i = 1; i <= 9; i++) {
  53. document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color, i / 10));
  54. }
  55. // vxe-Table
  56. document.documentElement.style.setProperty("--vxe-ui-font-primary-color", app_color);
  57. document.documentElement.style.setProperty("--vxe-ui-font-primary-darken-color", app_color);
  58. document.documentElement.style.setProperty("--vxe-ui-font-primary-lighten-color", app_color);
  59. }
  60. }
  61. }
  62. </script>
  63. <style lang="scss">
  64. @use "@/style/style.scss";
  65. </style>