WxxyDeveloper/Jsl-OA-Web-Re
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix mixin data 问题

Browse Source
This commit is contained in:
liangzhiyuan001 2022-09-15 17:26:38 +08:00
parent d0a1e812e6
commit 5dd23fec48
7 changed files with 41 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/layout/mixin/ResizeHandler.js
View File

@ -13,28 +13,28 @@ export default defineComponent({
}
},
beforeMount() {
window.addEventListener('resize', this.$_resizeHandler);
window.addEventListener('resize', this.resizeHandler);
},
beforeUnmount() {
window.removeEventListener('resize', this.$_resizeHandler);
window.removeEventListener('resize', this.resizeHandler);
},
mounted() {
const isMobile = this.$_isMobile();
const isMobile = this.isMobile();
if (isMobile) {
store.app().toggleDevice('mobile');
store.app().closeSidebar({ withoutAnimation: true });
}
},
methods: {
// use $_ for mixins properties
// do not use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_isMobile() {
isMobile() {
const rect = body.getBoundingClientRect();
return rect.width - 1 < WIDTH;
},
$_resizeHandler() {
resizeHandler() {
if (!document.hidden) {
const isMobile = this.$_isMobile();
const isMobile = this.isMobile();
store.app().toggleDevice(isMobile ? 'mobile' : 'desktop');
if (isMobile) {

4
src/views/dashboard/admin/components/BarChart.vue
View File

@ -4,7 +4,7 @@
<script>
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize';
@ -45,7 +45,7 @@ export default defineComponent({
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, macaronsTheme);
this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.chart.setOption({
tooltip: {

4
src/views/dashboard/admin/components/LineChart.vue
View File

@ -4,7 +4,7 @@
<script>
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize';
@ -59,7 +59,7 @@ export default defineComponent({
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, macaronsTheme);
this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.setOptions(this.chartData);
},
setOptions({ expectedData, actualData } = {}) {

5
src/views/dashboard/admin/components/PanelGroup.vue
View File

@ -80,6 +80,7 @@ export default defineComponent({
}
.card-panel {
display: flex;
height: 108px;
cursor: pointer;
font-size: 12px;
@ -130,7 +131,7 @@ export default defineComponent({
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
margin: 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
@ -144,7 +145,7 @@ export default defineComponent({
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin: 26px 0;
margin-left: 0px;
.card-panel-text {

4
src/views/dashboard/admin/components/PieChart.vue
View File

@ -4,7 +4,7 @@
<script>
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize';
@ -43,7 +43,7 @@ export default defineComponent({
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, macaronsTheme);
this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.chart.setOption({
tooltip: {

4
src/views/dashboard/admin/components/RaddarChart.vue
View File

@ -4,7 +4,7 @@
<script>
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { defineComponent, shallowRef } from 'vue';
import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize';
@ -45,7 +45,7 @@ export default defineComponent({
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, macaronsTheme);
this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
this.chart.setOption({
tooltip: {

46
src/views/dashboard/admin/components/mixins/resize.js
View File

@ -4,53 +4,53 @@ import { debounce } from '@/utils';
export default defineComponent({
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
sidebarElm: null,
resizeHandler: null
};
},
mounted() {
this.$_resizeHandler = debounce(() => {
this.resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize();
}
}, 100);
this.$_initResizeEvent();
this.$_initSidebarResizeEvent();
this.initResizeEvent();
this.initSidebarResizeEvent();
},
beforeUnmount() {
this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent();
this.destroyResizeEvent();
this.destroySidebarResizeEvent();
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent();
this.$_initSidebarResizeEvent();
this.initResizeEvent();
this.initSidebarResizeEvent();
},
deactivated() {
this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent();
this.destroyResizeEvent();
this.destroySidebarResizeEvent();
},
methods: {
// use $_ for mixins properties
// do not use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler);
initResizeEvent() {
window.addEventListener('resize', this.resizeHandler);
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler);
destroyResizeEvent() {
window.removeEventListener('resize', this.resizeHandler);
},
$_sidebarResizeHandler(e) {
sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler();
this.resizeHandler();
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
initSidebarResizeEvent() {
this.sidebarElm = document.getElementsByClassName('sidebar-container')[0];
this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler);
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
destroySidebarResizeEvent() {
this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler);
}
}
});