1.初级实现项目换肤功能

loulijun2021

2022-12-29 bd2f187c3f6e24576919e71c794cf8cb9f8c8bac

 src/layout/components/Navbar.vue

@@ -1,16 +1,28 @@
<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>

    <breadcrumb class="breadcrumb-container" />
    <breadcrumb class="breadcrumb-container"/>

    <div class="right-menu">

<!--      <template v-if="device!=='mobile'">-->
      <template>
        <search id="header-search" class="right-menu-item"/>
        <!--        <error-log class="errLog-container right-menu-item hover-effect" />-->
        <screenfull id="screenfull" class="right-menu-item hover-effect"/>
        <!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
        <!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
        <!--        </el-tooltip>-->
      </template>

      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <!--          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
          <div style="display: flex;align-items: center;margin-top: -5px">
            <div class="headerImg"><i class="el-icon-user" /></div>
            <div class="headerName">{{ username }}</div>

            <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7"/>
            <div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
          </div>

          <!--          <i class="el-icon-caret-bottom" />-->
@@ -51,11 +63,11 @@
        <!--        <el-form-item label="用户名称：">-->
        <!--          <div> {{ username }}</div>-->
        <!--        </el-form-item>-->
        <el-form-item label="密码：" prop="password">
          <el-input v-model="form.password" style="width: 220px;" />
        <el-form-item label="原密码：" prop="password">
          <el-input v-model="form.password" style="width: 220px;"/>
        </el-form-item>
        <el-form-item label="新密码：" prop="newpassword">
          <el-input v-model="form.newpassword" style="width: 220px;" />
          <el-input v-model="form.newpassword" style="width: 220px;"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
@@ -69,22 +81,27 @@
</template>

<script>
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { getCookie } from '@/utils/auth'
import { UpdateUserPassword } from '@/api/user'
import {getCookie} from '@/utils/auth'
import {UpdateUserPassword} from '@/api/user'
import Search from '@/components/HeaderSearch'
import Screenfull from '@/components/Screenfull'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  components: {
    Breadcrumb,
    Hamburger
    Hamburger,
    Search,
    Screenfull
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
      'avatar',
      'device'
    ])
  },
  created() {
@@ -92,9 +109,20 @@
    this.username = getCookie('username')
  },
  data() {
    const validatePassword = (rule, value, callback) => {
    const validatePassword1 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码！'))
        return callback(new Error('请输入原密码！'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('密码不能为中文！'))
        } else {
          callback()
        }
      }
    }
    const validatePassword2 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入新密码！'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('密码不能为中文！'))
@@ -113,10 +141,10 @@
      dialogVisible: false,
      formRules: {
        password: [
          { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
          {required: true, validator: validatePassword1, trigger: ['blur', 'change']}
        ],
        newpassword: [
          { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
          {required: true, validator: validatePassword2, trigger: ['blur', 'change']}
        ]
      }
    }
@@ -195,6 +223,7 @@
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;

    &:focus {
      outline: none;
@@ -225,14 +254,6 @@
        margin-top: 5px;
        position: relative;
        cursor: pointer;

        .headerImg {
          margin: 5px;
        }

        .headerName {
          font-weight: bolder;
        }

        .user-avatar {
          cursor: pointer;