vue3项目总结

1、浏览器全屏、退出全屏

import screenfull from "screenfull"

const isFullscreen = ref(false);
//全屏的事件
screenfull.toggle();
const changeCallback = () => {
   isFullscreen.value = screenfull.isFullscreen;
}
 onMounted(() => {
   screenfull.on('change', changeCallback);
 })
 onUnmounted(() => {
   screenfull.off('change', changeCallback);
 })

2、面包屑

 <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: pathItem.path}" v-for="(pathItem,pathIndex) in pathArr" :key="pathIndex">{{ pathItem.name }}</el-breadcrumb-item>
  </el-breadcrumb>
  
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
//这个返回的就是一级一级的路由数组 
var pathArr = computed(() => {
  return route.matched;
});
console.log('routeroute', route, pathArr);

3、事件总线

import mitt from "mitt";
import { onBeforeUnmount } from "vue";

const vuemitt = mitt(); //mitt
const key = "routerchange";
//这个方法在router.afterEach时调用，来触发事件
export function setRouterChange(to) {
    vuemitt.emit(key,to);//触发事件
}
export function useRouterHook() {
  const callbackList = [];
  //这个方法在组件里调用，来注册需要执行的动作
  const onRouterListener = (callback) => {
    vuemitt.on(key, callback);//注册事件
    callbackList.push(callback);
  };

  onBeforeUnmount(() => {
    for (var i = 0; i < callbackList.length; i++) {
        vuemitt.off(key, callbackList[i]);//卸载事件
    }
  });
  return { onRouterListener };
}

4、vue3 指令的使用

    <el-tag v-permission="['admin', 'normal']" type="success" size="large" effect="plain">
      这里采用了 v-permission="['admin', 'normal']" ，所以 admin 和 normal 都可以看见这句话
    </el-tag>
    
  import { useUserStore } from "@/store/module/user";
  app.directive("permission", {
    mounted(el, binding) {
      const { roles } = useUserStore();
      let param = binding.value;
      //看当前用户角色是否满足要求
      var hasPermission = roles.some((ele) => {
        return param.includes(ele);
      });
      hasPermission || el.parentNode?.removeChild(el); // 销毁
    },
  });

5、主题颜色的控制

通过代码，根据不同的主体，给html添加对应的classname，这里是dark、grey。

const activeThemeName = ref('grey');//定义变量
//当主体颜色切换时，给html元素添加不同的classname，来控制颜色的切换
watchEffect(() => {
  var value = activeThemeName.value;
  document.documentElement.className = value;
})

还需要在scss上做功课,通过$theme-name变量给html.grey、html.dark，设置不同的样式。 文件/style/core/index.scss内容

.#{$theme-name} {
  @import "./element-plus.scss";

  .layout {
    background-color: $theme-bg-color;
    color: $font-color;
  }
}

文件/style/core/element-plus.scss内容

.el-menu {
  background-color: lighten($theme-bg-color, 2%) !important;
  .el-menu-item {
    background-color: lighten($theme-bg-color, 2%) !important;
    &.is-active,
    &:hover {
      background-color: lighten($theme-bg-color, 6%) !important;
      color: $font-color !important;
    }
  }
}

文件/style/dark/variables.scss内容

// 主题名称
$theme-name: "dark";
// 主题背景颜色
$theme-bg-color: #021633;
// 主题色
$theme-color: #01efb7bb;
// 默认文字颜色
$font-color: rgba(255, 255, 255, 0.8);

文件/style/dark/index.scss内容

@import "./variables.scss";
@import "../core/index.scss";

文件/style/grey/variables.scss内容

// 主题名称
$theme-name: "defalut";
// 主题背景颜色
$theme-bg-color: rgb(230, 233, 237);
// 主题色
$theme-color: #409eff;
// 默认文字颜色
$font-color: #4f4f4f;

文件/style/grey/index.scss内容

@import "./variables.scss";
@import "../core/index.scss";

文件/style/register.scss内容

@import "./dark/index.scss";
@import "./grey/index.scss";

6、路由嵌套

  {
    path: "/menu1",
    component: ()=> import("@/layouts/index.vue"),
    redirect: "/menu1/menu11",
    name: "menu1",
    meta: {
      title: "多级路由",
      svgIcon: "menu",
    },
    children: [
      {
        path: "menu11",
        component: () => import("@/views/menu1/menu11/index.vue"),
        name: "menu11",
        redirect: "/menu1/menu11/menu111",
        meta: {
          title: "menu11",
          keepAlive: true,
        },
        children: [
          {
            path: "menu111",
            component: () => import("@/views/menu1/menu11/menu111/index.vue"),
            name: "menu111",
            meta: {
              title: "menu111",
              keepAlive: true,
            },
          },
          {
            path: "menu112",
            component: () => import("@/views/menu1/menu11/menu112/index.vue"),
            name: "menu112",
            meta: {
              title: "menu112",
              keepAlive: true,
            },
          },
        ],
      }
    ],
  },

"@/layouts/index.vue"、"@/views/menu1/menu11/menu111/index.vue"这两个文件中有router-view元素，用来显示下一级路由对应的组件