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/components/RightPanel/index.vue | 112 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 112 insertions(+), 0 deletions(-)
diff --git a/ruoyi-ui/src/components/RightPanel/index.vue b/ruoyi-ui/src/components/RightPanel/index.vue
new file mode 100644
index 0000000..2d6122b
--- /dev/null
+++ b/ruoyi-ui/src/components/RightPanel/index.vue
@@ -0,0 +1,112 @@
+<template>
+ <div ref="rightPanel" class="rightPanel-container">
+ <div class="rightPanel-background" />
+ <div class="rightPanel">
+ <div class="rightPanel-items">
+ <slot />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'RightPanel',
+ props: {
+ clickNotClose: {
+ default: false,
+ type: Boolean
+ }
+ },
+ computed: {
+ show: {
+ get() {
+ return this.$store.state.settings.showSettings
+ },
+ set(val) {
+ this.$store.dispatch('settings/changeSetting', {
+ key: 'showSettings',
+ value: val
+ })
+ }
+ }
+ },
+ watch: {
+ show(value) {
+ if (value && !this.clickNotClose) {
+ this.addEventClick()
+ }
+ }
+ },
+ mounted() {
+ this.insertToBody()
+ this.addEventClick()
+ },
+ beforeDestroy() {
+ const elx = this.$refs.rightPanel
+ elx.remove()
+ },
+ methods: {
+ addEventClick() {
+ window.addEventListener('click', this.closeSidebar)
+ },
+ closeSidebar(evt) {
+ const parent = evt.target.closest('.el-drawer__body')
+ if (!parent) {
+ this.show = false
+ window.removeEventListener('click', this.closeSidebar)
+ }
+ },
+ insertToBody() {
+ const elx = this.$refs.rightPanel
+ const body = document.querySelector('body')
+ body.insertBefore(elx, body.firstChild)
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+ background: rgba(0, 0, 0, .2);
+ z-index: -1;
+}
+
+.rightPanel {
+ width: 100%;
+ max-width: 260px;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ right: 0;
+ box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+ transition: all .25s cubic-bezier(.7, .3, .1, 1);
+ transform: translate(100%);
+ background: #fff;
+ z-index: 40000;
+}
+
+.handle-button {
+ width: 48px;
+ height: 48px;
+ position: absolute;
+ left: -48px;
+ text-align: center;
+ font-size: 24px;
+ border-radius: 6px 0 0 6px !important;
+ z-index: 0;
+ pointer-events: auto;
+ cursor: pointer;
+ color: #fff;
+ line-height: 48px;
+ i {
+ font-size: 24px;
+ line-height: 48px;
+ }
+}
+</style>
--
Gitblit v1.9.3