From a680a84d91fb6501951d0265e9b347695568c546 Mon Sep 17 00:00:00 2001
From: 抓蛙师 <770492966@qq.com>
Date: 星期二, 20 九月 2022 16:41:40 +0800
Subject: [PATCH] !236 前端适配多字段排序功能案例OSS页面（重新排序需点击重置按钮，否则按照点击顺序依次排序，重复点击的字段排序位置不发生改变） * 完善前端适配多字段排序功能案例OSS页面（完善排序图标显示效果和重置效果，支持正序，倒序，取消排序） * 前端适配多字段排序功能案例OSS页面（重新排序需点击重置按钮，否则按照点击顺序依次排序，重复点击的字段排序位置不发生改变）
---
ruoyi-ui/src/views/dashboard/mixins/resize.js | 108 ++++++++++++++++++++++++++++--------------------------
1 files changed, 56 insertions(+), 52 deletions(-)
diff --git a/ruoyi-ui/src/views/dashboard/mixins/resize.js b/ruoyi-ui/src/views/dashboard/mixins/resize.js
index 5516794..b1e76e9 100644
--- a/ruoyi-ui/src/views/dashboard/mixins/resize.js
+++ b/ruoyi-ui/src/views/dashboard/mixins/resize.js
@@ -1,52 +1,56 @@
-import { debounce } from '@/utils'
-
-export default {
- data() {
- return {
- $_sidebarElm: null
- }
- },
- mounted() {
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
- },
- beforeDestroy() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
- },
- activated() {
- this.$_initResizeEvent()
- this.$_initSidebarResizeEvent()
- },
- deactivated() {
- this.$_destroyResizeEvent()
- this.$_destroySidebarResizeEvent()
- },
- methods: {
- $_resizeHandler() {
- return debounce(() => {
- if (this.chart) {
- this.chart.resize()
- }
- }, 100)()
- },
- $_initResizeEvent() {
- window.addEventListener('resize', this.$_resizeHandler)
- },
- $_destroyResizeEvent() {
- window.removeEventListener('resize', this.$_resizeHandler)
- },
- $_sidebarResizeHandler(e) {
- if (e.propertyName === 'width') {
- this.$_resizeHandler()
- }
- },
- $_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)
- }
- }
-}
+import { debounce } from '@/utils'
+
+export default {
+ data() {
+ return {
+ $_sidebarElm: null,
+ $_resizeHandler: null
+ }
+ },
+ mounted() {
+ this.initListener()
+ },
+ activated() {
+ if (!this.$_resizeHandler) {
+ // avoid duplication init
+ this.initListener()
+ }
+
+ // when keep-alive chart activated, auto resize
+ this.resize()
+ },
+ beforeDestroy() {
+ this.destroyListener()
+ },
+ deactivated() {
+ this.destroyListener()
+ },
+ methods: {
+ // use $_ for mixins properties
+ // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+ $_sidebarResizeHandler(e) {
+ if (e.propertyName === 'width') {
+ this.$_resizeHandler()
+ }
+ },
+ initListener() {
+ this.$_resizeHandler = debounce(() => {
+ this.resize()
+ }, 100)
+ window.addEventListener('resize', this.$_resizeHandler)
+
+ this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+ this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+ },
+ destroyListener() {
+ window.removeEventListener('resize', this.$_resizeHandler)
+ this.$_resizeHandler = null
+
+ this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+ },
+ resize() {
+ const { chart } = this
+ chart && chart.resize()
+ }
+ }
+}
--
Gitblit v1.9.3