1.系统设置按钮放到右上角下拉位置

loulijun2021

2023-06-24 d36b601e3daebd7406a9fa3e9204ce9df3c2c68a

1.系统设置按钮放到右上角下拉位置

 src/components/RightPanel/index.vue

@@ -2,9 +2,9 @@
  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
    <div class="rightPanel-background" />
    <div class="rightPanel">
      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
        <i :class="show?'el-icon-close':'el-icon-setting'" />
      </div>
      <!--      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">-->
      <!--        <i :class="show?'el-icon-close':'el-icon-setting'" />-->
      <!--      </div>-->
      <div class="rightPanel-items">
        <slot />
      </div>
@@ -38,16 +38,16 @@
    }
  },
  watch: {
    show(value) {
      if (value && !this.clickNotClose) {
        this.addEventClick()
      }
      // if (value) {
      //   addClass(document.body, 'showRightPanel')
      // } else {
      //   removeClass(document.body, 'showRightPanel')
      // }
    }
    // show(value) {
    //   if (value && !this.clickNotClose) {
    //     this.addEventClick()
    //   }
    //   // if (value) {
    //   //   addClass(document.body, 'showRightPanel')
    //   // } else {
    //   //   removeClass(document.body, 'showRightPanel')
    //   // }
    // }
  },
  mounted() {
    this.insertToBody()

 src/layout/components/Navbar.vue

@@ -98,12 +98,16 @@
            <el-dropdown-item @click.native="editPassword">
              <span style="display:block;">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="systemSetting">
              <span style="display:block;">系统配置</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span style="display:block;font-weight: bolder">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <el-dialog
        v-el-drag-dialog
        title="修改密码"
@@ -136,6 +140,11 @@
      </el-dialog>

    </div>

    <right-panel ref="rightPanel">
      <settings />
    </right-panel>

  </div>

</template>
@@ -153,6 +162,8 @@
import Search from '@/components/HeaderSearch'
import Screenfull from '@/components/Screenfull'
import variables from '@/styles/variables.scss'
import RightPanel from '@/components/RightPanel'
import Settings from '../components/Settings/index'

export default {
  components: {
@@ -160,9 +171,12 @@
    Breadcrumb,
    Hamburger,
    Search,
    Screenfull
    Screenfull,
    Settings,
    RightPanel
  },
  directives: { elDragDialog },

  data() {
    const validatePassword1 = (rule, value, callback) => {
      if (!value) {
@@ -202,7 +216,8 @@
          { required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
        ]
      },
      stu_torgname: ''
      stu_torgname: '',
      show: false
    }
  },
  inject: [
@@ -243,6 +258,10 @@
    }
  },
  methods: {
    systemSetting() {
      this.$refs.rightPanel.show = !this.$refs.rightPanel.show
      this.$refs.rightPanel.addEventClick()
    },
    pageRefreshClick() {
      this.reload()
      const tabViews = this.$store.state.tagsView.visitedViews.map(item => {

 src/layout/index.vue

@@ -33,9 +33,9 @@
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
      <!--      <right-panel v-if="showSettings">-->
      <!--        <settings />-->
      <!--      </right-panel>-->
    </div>
  </div>
</template>