首页 > 其他分享 >vue echarts hooks 封装

vue echarts hooks 封装

时间：2024-01-26 09:55:56浏览次数：23  
标签：borderColor vue show color hooks rgba lineStyle echarts 255

vue中echarts hooks的封装，监听主体的变化，监听窗口大小的变化。监听元素大小的变化

  1. hooks
import echarts from '@/echart/themeInit'
import { debounce } from '@/utils/dehounce'
import { useAppStore } from '@/pinia'

const useEchartHooks = (id, groupId) => {
  const appStore = useAppStore()

  appStore.$subscribe(e => {
    if (e.storeId === 'app') {
      changeChartTheme()
    }
  })

  let chart = null
  let options = null

  const renderChart = val => {
    options = val
    if (!chart) {
      chart = echarts.init(document.getElementById(id), appStore.theme)
      chart.group = groupId
    }

    // nextTick防止样式未组装完成就开始渲染页面
    nextTick(() => {
      chart.setOption(options, true)
    })
  }

  const getEchart = () => {
    return chart
  }

  const changeChartTheme = () => {
    chart.dispose()
    chart = echarts.init(document.getElementById(id), appStore.theme)
    chart.setOption(options, true)
  }

  const state = reactive({
    sidebarEle: null,
    mySider: null,
    resize: null,
    tabEle: null,
    tabObserver: null
  })

  const sidebarResize = e => {
    if (e.propertyName === 'width') {
      state.resize()
    }
  }

  const tabsResize = () => {
    nextTick(() => {
      chart.resize()
    })
  }

  const initListener = () => {
    state.resize = debounce(() => {
      resize()
    }, 100)
    window.addEventListener('resize', state.resize)

    // 监听侧边菜单栏
    state.sidebarEle = document.querySelector('.g-sider-container')
    state.sidebarEle && state.sidebarEle.addEventListener('transitionend', sidebarResize)
    // 监听自定义侧边栏
    state.mySider = document.querySelector('.sider-resize-echart')
    state.mySider && state.mySider.addEventListener('transitionend', sidebarResize)
    // 监听tabs
    state.tabEle = document.querySelector('.el-tab-pane')
    if (state.tabEle) {
      state.tabObserver = new MutationObserver(tabsResize)
      state.tabObserver.observe(state.tabEle, { attributes: true })
    }
  }

  const destroyListener = () => {
    window.removeEventListener('resize', state.resize)
    state.resize = null

    state.sidebarEle && state.sidebarEle.removeEventListener('transitionend', sidebarResize)
    state.mySider && state.mySider.removeEventListener('transitionend', sidebarResize)
    state.tabEle && state.tabObserver.disconnect()
  }

  const resize = () => {
    chart && chart.resize()
  }

  onMounted(() => {
    initListener()
  })

  onActivated(() => {
    if (!state.resize) {
      initListener()
    }
    resize()
  })

  onBeforeUnmount(() => {
    destroyListener()
    chart && chart.dispose()
    chart = null
  })

  onDeactivated(() => {
    destroyListener()
  })
  return { renderChart, getEchart, resize }
}

export default useEchartHooks
  1. themeInit.js
// project.json为配置文件，.json文件为主题数据 **浪费我一天时间，shit**

import * as echarts from 'echarts'
import lightTheme from './theme/light.json'
import darkTheme from './theme/dark.json'

echarts.registerTheme('light', lightTheme)
echarts.registerTheme('dark', darkTheme)

export default echarts
  1. 暗色主体 dark.json
{
    "color": [
        "#1890ff",
        "#dcb727",
        "#2fc25b",
        "#eb7a1e",
        "#5558f1",
        "#24b0e8",
        "#921eb2",
        "#176dbc",
        "#c59f5c",
        "#1cb0af",
        "#6859c5",
        "#a6c51a"
    ],
    "backgroundColor": "transparent",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#3185DC",
            "fontSize": 16,
            "fontWeight": "bold"
        },
        "subtextStyle": {
            "color": "#3185DC"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "areaStyle": {
            "opacity": 0.1
        },
        "symbolSize": 6,
        "symbol": "emptyCircle",
        "smooth": false
    },
    "radar": {
        "axisLine": {
            "lineStyle": {
                "color": "rgba(255,255,255,0.2)",
                "width": 0.5
            }
        },
        "splitLine": {
            "lineStyle": {
                "color": [
                    "rgba(255,255,255,0.2)"
                ],
                "width": 0.5
            }
        },
        "splitArea": {
            "show": true,
            "areaStyle": {
                "color": [
                    "rgba(0,0,0,0.1)", "#161E35"
                ]
            }
        },
        "itemStyle": {
            "opacity": 0
        },
        "axisName": {
            "color": "#fff"
        }
    },
    "bar": {
        "barMaxWidth": "25",
        "itemStyle": {
            "barBorderWidth": "0",
            "barBorderColor": "#cccccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#eb7a1e",
            "color0": "#2fc25b",
            "borderColor": "#eb7a1e",
            "borderColor0": "#2fc25b",
            "borderWidth": 1
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        },
        "lineStyle": {
            "width": 1,
            "color": "#aaaaaa"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": false,
        "color": [
            "#1890ff",
            "#dcb727",
            "#2fc25b",
            "#eb7a1e",
            "#5558f1",
            "#24b0e8",
            "#921eb2",
            "#176dbc",
            "#c59f5c",
            "#1cb0af",
            "#6859c5",
            "#a6c51a"
        ],
        "label": {
            "color": "#ffffff"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#eeeeee",
            "borderColor": "#444444",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#eeeeee",
            "borderColor": "#444444",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#454b5d"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#c0c4cc"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed",
                "color": [
                    "rgba(255,255,255,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#c0c4cc"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed",
                "color": [
                    "rgba(255,255,255,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        },
        "nameTextStyle": {
            "color": "#c0c4cc"
        },
        "nameGap": 10
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(255,255,255,0.4)"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#c0c4cc"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "rgba(255,255,255,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(255,255,255,0.4)"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#c0c4cc"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "rgba(255,255,255,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#c0c4cc"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#c0c4cc"
            }
        }
    },
    "legend": {
        "itemWidth": 16,
        "itemHeight": 6,
        "textStyle": {
            "color": "#c0c4cc"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#b1b3b8",
                "width": 1
            },
            "crossStyle": {
                "color": "#b1b3b8",
                "width": 1
            }
        },
        "backgroundColor": "#343D56",
        "borderColor": "transparent",
        "textStyle": {
            "fontWeight": "lighter",
            "fontSize": 12,
            "color": "#C0C4CC"
        },
        "extraCssText": "box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.23)"
    },
    "timeline": {
        "lineStyle": {
            "color": "#293c55",
            "width": 1
        },
        "itemStyle": {
            "color": "#ff0000",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#293c55",
            "borderColor": "#293c55",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#e43c59",
            "borderColor": "#c23531"
        },
        "label": {
            "color": "#293c55"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#a9334c"
            },
            "controlStyle": {
                "color": "#293c55",
                "borderColor": "#293c55",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#293c55"
            }
        }
    },
    "visualMap": {
        "color": [
            "#ff0000",
            "#d88273",
            "#f6efa6"
        ]
    },
    "dataZoom": {
        "height": 20,
        "type": "slider",
        "backgroundColor": "rgba(100,176,255,0.1)",
        "borderColor": "rgba(64,158,255,0.2)",
        "dataBackground": {
            "lineStyle": {
                "color": "transparent"
            },
            "areaStyle": {
                "color": "rgba(127,190,253,1)"
            }
        },
        "selectedDataBackground": {
            "lineStyle": {
                "color": "transparent"
            },
            "areaStyle": {
                "color": "rgba(127,190,253,1)"
            }
        },
        "fillerColor": "rgba(156,201,247,0.2)",
        "handleIcon": "path://M4.19,6V0H3.14V6H0V18H3.14v6H4.19V18H7.33V6Zm1.92,7.94H1.22v-1H6.11Zm0-2.84H1.22v-1H6.11Z",
        "handleSize": "100%",
        "handleStyle": {
            "color": "#5FA5ED",
            "borderColor": "transparent"
        },
        "brushSelect": false,
        "emphasis": {
            "handleStyle": {
                "borderColor": "transparent"
            }
        },
        "textStyle": {
            "color": "#fff"
        }
    },
    "markPoint": {
        "label": {
            "color": "#ffffff"
        },
        "emphasis": {
            "label": {
                "color": "#ffffff"
            }
        }
    }
}
  1. 浅色主体 light.json
{
    "color": [
        "#1890ff",
        "#dcb727",
        "#2fc25b",
        "#eb7a1e",
        "#5558f1",
        "#24b0e8",
        "#921eb2",
        "#176dbc",
        "#c59f5c",
        "#1cb0af",
        "#6859c5",
        "#a6c51a"
    ],
    "backgroundColor": "transparent",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#3185DC",
            "fontSize": 16,
            "fontWeight": "bold"
        },
        "subtextStyle": {
            "color": "#3185DC"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "areaStyle": {
            "opacity": 0.1
        },
        "symbolSize": 6,
        "symbol": "emptyCircle",
        "smooth": false
    },
    "radar": {
        "axisLine": {
            "lineStyle": {
                "color": "rgba(0,0,0,0.2)",
                "width": 0.5
            }
        },
        "splitLine": {
            "lineStyle": {
                "color": [
                    "rgba(0,0,0,0.2)"
                ],
                "width": 0.5
            }
        },
        "splitArea": {
            "show": true,
            "areaStyle": {
                "color": [
                    "rgba(0,0,0,0.05)", "#fff"
                ]
            }
        },
        "itemStyle": {
            "opacity": 0
        },
        "axisName": {
            "color": "#606266"
        }
    },
    "bar": {
        "barMaxWidth": "25",
        "itemStyle": {
            "barBorderWidth": "0",
            "barBorderColor": "#cccccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#eb7a1e",
            "color0": "#2fc25b",
            "borderColor": "#eb7a1e",
            "borderColor0": "#2fc25b",
            "borderWidth": 1
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
        },
        "lineStyle": {
            "width": 1,
            "color": "#aaaaaa"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": false,
        "color": [
            "#1890ff",
            "#dcb727",
            "#2fc25b",
            "#eb7a1e",
            "#5558f1",
            "#24b0e8",
            "#921eb2",
            "#176dbc",
            "#c59f5c",
            "#1cb0af",
            "#6859c5",
            "#a6c51a"
        ],
        "label": {
            "color": "#ffffff"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#eeeeee",
            "borderColor": "#444444",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#eeeeee",
            "borderColor": "#444444",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#606266"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed",
                "color": [
                    "rgba(0,0,0,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#606266"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed",
                "color": [
                    "rgba(0,0,0,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        },
        "nameTextStyle": {
            "color": "#606266"
        },
        "nameGap": 10
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(0,0,0,0.4)"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "rgba(0,0,0,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#606266"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "rgba(0,0,0,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(0,0,0,0.4)"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "rgba(255,255,255,0)"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#606266"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "rgba(0,0,0,0.2)"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#606266"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#606266"
            }
        }
    },
    "legend": {
        "itemWidth": 16,
        "itemHeight": 6,
        "textStyle": {
            "color": "#606266"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#b1b3b8",
                "width": 1
            },
            "crossStyle": {
                "color": "#b1b3b8",
                "width": 1
            }
        },
        "backgroundColor": "#ffffff",
        "borderColor": "transparent",
        "textStyle": {
            "fontWeight": "lighter",
            "fontSize": 12,
            "color": "#606266"
        },
        "extraCssText": "box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.23)"
    },
    "timeline": {
        "lineStyle": {
            "color": "#293c55",
            "width": 1
        },
        "itemStyle": {
            "color": "#ff0000",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#293c55",
            "borderColor": "#293c55",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#e43c59",
            "borderColor": "#c23531"
        },
        "label": {
            "color": "#293c55"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#a9334c"
            },
            "controlStyle": {
                "color": "#293c55",
                "borderColor": "#293c55",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#293c55"
            }
        }
    },
    "visualMap": {
        "color": [
            "#ff0000",
            "#d88273",
            "#f6efa6"
        ]
    },
    "dataZoom": {
        "height": 20,
        "type": "slider",
        "backgroundColor": "rgba(64,158,255,0.1)",
        "borderColor": "rgba(64,158,255,0.2)",
        "dataBackground": {
            "lineStyle": {
                "color": "transparent"
            },
            "areaStyle": {
                "color": "rgba(57,136,216,1)"
            }
        },
        "selectedDataBackground": {
            "lineStyle": {
                "color": "transparent"
            },
            "areaStyle": {
                "color": "rgba(57,136,216,1)"
            }
        },
        "fillerColor": "rgba(65,129,194,0.2)",
        "handleIcon": "path://M4.19,6V0H3.14V6H0V18H3.14v6H4.19V18H7.33V6Zm1.92,7.94H1.22v-1H6.11Zm0-2.84H1.22v-1H6.11Z",
        "handleSize": "100%",
        "handleStyle": {
            "color": "#4181C2",
            "borderColor": "transparent"
        },
        "brushSelect": false,
        "emphasis": {
            "handleStyle": {
                "borderColor": "transparent"
            }
        },
        "textStyle": {
            "color": "#606266"
        }
    },
    "markPoint": {
        "label": {
            "color": "#ffffff"
        },
        "emphasis": {
            "label": {
                "color": "#ffffff"
            }
        }
    }
}
  1. app store
import { defineStore } from 'pinia'
import { setSiderCollapse, getSiderCollapse } from '@/utils/auth'

export const useAppStore = defineStore('app', {
  state: () => {
    return {
      theme: localStorage.getItem('theme') || 'dark',
      collapse: getSiderCollapse(),
      hasLoadRoute: false
    }
  },

  getters: {},

  actions: {
    selectTheme(name, themes) {
      this.theme = name
      localStorage.setItem('theme', name)
      const activeTheme = themes[name]

      const el = document.querySelector(':root')
      el.className = name
      Object.keys(activeTheme).forEach(key => {
        el.style.setProperty(key, activeTheme[key])
      })
    },
    toggleSiderBar() {
      this.collapse = !this.collapse
      setSiderCollapse(this.collapse)
    }
  }
})

标签：borderColor,vue,show,color,hooks,rgba,lineStyle,echarts,255
From： https://www.cnblogs.com/Cxymds/p/17988682

相关文章

  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv
    使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云，项目地址：gitee.com/breezefaith…目录一、前言近日心血来潮想做一个开源项目，目标是做一款可以适配多端、功能完备的模板工程，包含后台管理系统和前台......
  • vue的几个小分享
    1.VNode钩子在每个组件或html标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。这些钩子有：onVnodeBeforeMountonVnodeMountedonVnodeBeforeUpdateonVnodeUpdatedonVnodeBeforeUnmountonVnodeUnmounted我主要是在组件上使用onVnodeMounted，当需要......
  • vue实现将word转换为HTML页面，并实现类似word的目录导航和关键字搜索跳转
    <template>  <divclass="content">    <divclass="header">      <divclass="title">        XXXXXX      </div>      <divclass="search">   ......
  • Vue 3高级响应式数据探秘：原理、用法详解与实战示例！
     在Vue3中，数据的变化通过响应式系统来实现，该系统基于ES6的Proxy对象。Proxy对象允许拦截并自定义操作，因此Vue可以通过代理对象来实现对数据的监听和触发相应的操作。以下是Vue3中监测数据改变的原理、使用方法和步骤的详细描述，以及一个实例代码：原理：Vue3的响应式系统基于P......
  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南
     在Vue中使用JSON文件有多种方式，包括使用fetch方法加载JSON文件、使用axios库加载JSON文件，以及将JSON文件导入为模块。以下是详细描述和相应的示例代码：1.使用fetch方法加载JSON文件：步骤：创建一个JSON文件，例如 data.json：//data.json{"name":"John","age":......
  • vue项目安装更新依赖时，npm install 卡住
    在代码安装或者更新依赖时，经常碰到npminstall以后很多种卡住的情况，记录部分1.版本不对可能电脑存在多个项目，多个node版本。安装使用nvm(node版本管理工具),1.安装，先把已安装的node下载掉https://nvm.uihtm.com/download.html（目前国内可下载）https:/......
  • 2024年1月Java项目开发指南10：vite+Vue3项目创建
    新建项目安装routernpminstallvue-router在src下新建目录router，在目录下新建index.js在index.js里面配置路由import{createRouter,createWebHistory}from'vue-router';//定义路由constroutes=[//在这里配置路由];//创建路由实例constrouter=......
  • vue2.x项目升级到2.7
    背景老代码库了，但是升级到v3的话成本比较大，准备先升级到2.7，用上compositon-api，后续再引入ts，慢慢改过来。改动点//package.json{..."vue":"^2.7.0",..."vue-template-compiler":"^2.6.10",//移除掉，用不上了"vue-loader":"^15.10.0&quo......
  • vue print.js 打印 此处打印不包含页面的页码 （打印方法二）
    <template><divclass="modalContainerprintAsset"ref="modalContainer"><divv-for="(items,index)intableDataPrint":key=indexstyle="page-break-after:always;zoom:1"ref="show......
  • Echarts5.0——点击还原按钮图形空白问题
    前言看下文档就可以知道问题出哪了，在setOption的时候配置下notMerge就好了，详细的可以访问文档自行查看；setOption:https://echarts.apache.org/zh/api.html#echartsInstance.setOption步骤this.chartInstance.setOption(this.option,true);render(){this.chartIns......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99