App.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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. document.documentElement.style.setProperty("--el-color-primary", this.$CONFIG.COLOR);
  47. for (let i = 1; i <= 9; i++) {
  48. document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(this.$CONFIG.COLOR, i / 10));
  49. }
  50. for (let i = 1; i <= 9; i++) {
  51. document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(this.$CONFIG.COLOR, i / 10));
  52. }
  53. }
  54. }
  55. </script>
  56. <style lang="scss">
  57. @import "@/style/style.scss";
  58. </style>