黑龙江网站备案哪个网站做娱乐

当前位置： 首页 > news >正文

黑龙江网站备案,哪个网站做娱乐,做基础销量的网站,wordpress 菜单结构目录 侧边栏菜单渲染 侧边栏折叠 黑白主题 全屏切换 切换组件主题色 tab快捷栏 代码 侧边栏菜单渲染 结合ElementPlus组件库进行实现 新建的Vue3项目,引入了格式化样式normalize.css和ElementPlus,并进行了全局引入 并进行了全局引入 设置高度为100% 粘贴ElementPlus的…目录 侧边栏菜单渲染 侧边栏折叠 黑白主题 全屏切换 切换组件主题色 tab快捷栏 代码 侧边栏菜单渲染 结合ElementPlus组件库进行实现 新建的Vue3项目,引入了格式化样式normalize.css和ElementPlus,并进行了全局引入 并进行了全局引入 设置高度为100% 粘贴ElementPlus的布局容器代码,到HomeView.vue文件中,并进行简单修改 templatediv classcontionerel-container classlayout-container-demo styleheight: 100%!– 侧边栏 START –el-aside width200pxel-scrollbarel-menu router!– 一级菜单 –el-menu-item index1-4-1一级菜单/el-menu-item!– 子级菜单 –el-sub-menu index1template #titleel-iconmessage //el-icon子级菜单/templateel-menu-item index1-4-1孙子菜单1/el-menu-itemel-sub-menu index1-4template #title孙子菜单2/templateel-menu-item index1-4-1重孙菜单/el-menu-item/el-sub-menu/el-sub-menu/el-menu/el-scrollbar/el-aside!– 侧边栏 END –!– 内容区 START –el-containerel-header styletext-align: right; font-size: 12pxdiv classtoolbarel-dropdownel-icon stylemargin-right: 8px; margin-top: 1pxsetting //el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-itemDelete/el-dropdown-item/el-dropdown-menu/template/el-dropdownspanTom/span/div/el-headerel-mainel-scrollbar!– 路由出口,可以展示子级菜单内容 –router-view/router-view/el-scrollbar/el-main/el-container!– 内容区 END –/el-container/div /templatescript setup langts import { Message, Setting } from element-plus/icons-vue /scriptstyle scoped .contioner {width: 100%;height: 100%; }.layout-container-demo .el-header {position: relative;background-color: var(–el-color-primary-light-7);color: var(–el-text-color-primary); } .layout-container-demo .el-aside {color: var(–el-text-color-primary);background: var(–el-color-primary-light-8); } .layout-container-demo .el-menu {border-right: none; } .layout-container-demo .el-main {padding: 0; } .layout-container-demo .toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px; } /style 效果图如下,一个简单的后台架子就出来了 然后开始路由新增 import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: home,component: HomeView,children: [{path: /test1,name: test1,component: () import(/views/ParentPage.vue),},{path: /test2,name: test2,children: [{path: /test3,name: test3,component: () import(/views/SonPage.vue),},{path: /test4,name: test4,children: [{path: /test5,name: test5,component: () import(/views/SonPage.vue),},],},],},],},{path: /login,name: login,component: () import(../views/AboutView.vue),},], })export default router 在views下新增ParentPage.vue和SonPage.vue文件 路由定义好了,就可以在HomeView.vue文件中引入路由数据了 script setup langts import { Message, Setting } from element-plus/icons-vue import { computed } from vue import { useRouter } from vue-routerconst router useRouter()// 路由数据 const routes computed(() {return router.getRoutes().filter(p p.path /)[0].children }) /script 多级菜单渲染,需要用到递归组件,所以我们把侧边栏菜单展示进行封装,views下新建MenuTree.vue templatedivtemplate v-fori in routes :keyi.path!– 一级菜单 –el-menu-item :indexi.path v-if!i.children{{ i.path }}/el-menu-item!– 子级菜单 –el-sub-menu :indexi.path v-elsetemplate #titleel-iconmessage //el-icon{{ i.path }}/template!– 使用递归组件,传递嵌套路由数据 –MenuTree :routesi.children/MenuTree/el-sub-menu/template/div /templatescript setup langts import { Message } from element-plus/icons-vue import type { RouteRecordRaw } from vue-routerdefineProps({routes: {type: ArrayRouteRecordRaw,default: () [],}, }) /script 最后在HomeView.vue中引入此组件 !– 侧边栏 START –el-aside width200pxel-scrollbarel-menu routerMenuTree :routesroutes/MenuTree/el-menu/el-scrollbar/el-aside!– 侧边栏 END – 此时就完成了侧边栏菜单的渲染 侧边栏折叠 然后再加一个侧边栏折叠的功能 添加一个按钮到头部,修改HomeView.vue 结构处修改:el-headerel-button typeprimary sizesmall折叠/展开/el-buttondiv classtoolbarel-dropdownel-icon stylemargin-right: 8px; margin-top: 1pxsetting //el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-itemDelete/el-dropdown-item/el-dropdown-menu/template/el-dropdownspanTom/span/div/el-header样式处修改: .layout-container-demo .el-header {position: relative;background-color: var(–el-color-primary-light-7);color: var(–el-text-color-primary);display: flex;justify-content: space-between;align-items: center; } 页面效果 然后修改侧边栏代码  修改HomeView.vue 结构处修改!– 侧边栏 START –!– widthcollapse 可以让侧边栏宽度正好合适!!! –el-aside widthcollapseel-scrollbarel-menu router classel-menu-vertical-demo :collapseisCollapseMenuTree :routesroutes/MenuTree/el-menu/el-scrollbar/el-aside!– 侧边栏 END –逻辑处新增: // 折叠状态 const isCollapse ref(false) // 折叠/展开 const collapseChange () {isCollapse.value !isCollapse.value }样式处新增: /* 侧边栏宽度 / .el-menu-vertical-demo:not(.el-menu–collapse) {width: 200px; } MenuTree.vue修改 templatetemplate v-fori in routes :keyi.path!– 一级菜单 –el-menu-item :indexi.path v-if!i.children{{ i.path }}/el-menu-item!– 子级菜单 –el-sub-menu :indexi.path v-elsetemplate #titleel-iconmessage //el-icon!– 标题一定要用标签包裹,不然折叠的时候会显示一部分字!!! –span{{ i.path }}/span/template!– 使用递归组件,传递嵌套路由数据 –MenuTree :routesi.children/MenuTree/el-sub-menu/template /template 看下效果: 折叠 展开 黑白主题 然后再加个黑白主题吧(ElementPlus本身就有此功能)暗黑模式 | Element Plus 首先在main.ts中引入暗色主题 import element-plus/theme-chalk/dark/css-vars.css 然后在HomeView.vue中新增切换按钮并添加逻辑处理 结构处修改: el-headerel-button typeprimary sizesmall clickcollapseChange折叠/展开/el-buttondiv classtoolbarel-switchinline-promptv-modelthemeactive-text暗黑inactive-text白亮changetoggle/el-dropdownel-icon stylemargin-right: 8px; margin-top: 1pxsetting //el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-itemDelete/el-dropdown-item/el-dropdown-menu/template/el-dropdownspanTom/span/div/el-header逻辑处修改: // 引入切换主题的hook import { useDark, useToggle } from vueuse/core// 主题状态 const theme ref(localStorage.getItem(theme) dark ? true : false)// 切换主题 const isDark useDark({// 存储到localStorage中的Key 根据自己的需求更改storageKey: theme,// 暗黑class名字valueDark: dark,// 高亮class名字valueLight: light, }) const toggle useToggle(isDark)但是这个只实现了在组件库的主题切换,我们自己写的代码也要实现主题切换,可以在assets文件夹下新建theme文件夹,再新建theme.scss文件 // 主题 \(themes: (// 白亮: 设置一些字体颜色,背景色什么的light:(background: #fff,color: #000,textColor: #000,),// 暗黑dark:(background: #121212,color: #fff,textColor: #fff,) );// 当前主题 \)curTheme: light;// 混合 // mixin useTheme() { // html[data-themelight] { // background-color: #fff; // color: #000; // } // html[data-themedark] { // background-color: #121212; // color: #fff; // } // }// 混合优化遍历上面的主题 mixin useTheme() {each \(key, \)value in \(themes {\)curTheme: \(key !global; // 当前的主题html[data-theme#{\)key}] {// 表示传入什么选择器就是什么选择器content; // 类似于插槽样式可以进行传入}} }// 生成对应主题的变量 function getVar(\(key) {\)themeMap: map-get(\(themes, \)curTheme);return map-get(\(themeMap, \)key); } 全局引入此scss文件 import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx// https://vite.dev/config/ export default defineConfig({plugins: [vue(), vueJsx()],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url)),},},// 配置全局scss文件css: {preprocessorOptions: {// 引入全局的scss文件scss: {additionalData: import ./src/assets/theme/theme.scss;,},},}, })找个测试页面测试即可 templatedivh2父级页面/h2div classbox/divdiv classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/div/div /templatescript setup langts/scriptstyle scoped .box {width: 100%;height: 200px;/ 使用主题变量 /background-color: getVar(background); } /style全屏切换 再做一个切换全屏的效果 安装一个screenfull插件 npm i screenfull 然后修改HomeView.vue的代码 结构处修改:
el-headerel-button typeprimary sizesmall clickcollapseChange折叠/展开/el-buttondiv classtoolbarel-switchinline-promptv-modelthemeactive-text暗黑inactive-text白亮changetoggle/el-button typeprimary sizesmall clickscreenfullChange全屏/非全屏/el-buttonel-dropdownel-icon stylemargin-right: 8px; margin-top: 1pxsetting //el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-itemDelete/el-dropdown-item/el-dropdown-menu/template/el-dropdownspanTom/span/div/el-header逻辑处修改: import screenfull from screenfull import { ElMessage } from element-plus// 全屏/非全屏 const screenfullChange () {if (!screenfull.isEnabled) {return ElMessage({ message: 你的浏览器不支持全屏, type: warning })}screenfull.toggle() } 切换组件主题色 如果不喜欢ElementPlus的组件配色,也可以自己进行修改:  主题 | Element Plus 新建styles文件夹,然后再新建element文件夹,然后再新建index.scss文件,粘贴以下代码 // styles/element/index.scss / 只需要重写你需要的即可 */ forward element-plus/theme-chalk/src/common/var.scss with (\(colors: (primary: (base: green,),), );// 如果只是按需导入则可以忽略以下内容。 // 如果你想导入所有样式: use element-plus/theme-chalk/src/index.scss as *; 然后再修改main.ts,更换引入的scss文件 import ElementPlus from element-plus// import element-plus/dist/index.css // 更换完下面的scss文件因为下面的scss文件中已经引入了所有样式 import ./styles/element/index.scss 此时就已经修改成功了,组件主题色都变成了我们设置的颜色 但是如果想通过按钮修改主题色呢?比如下面的效果 我们应该这么做 新增一个处理设置组件主题颜色的函数:在utils文件夹下新增theme.ts // import { useCssVar } from vueuse/coretype RGB {r: numberg: numberb: number }const rgbWhite {r: 255,g: 255,b: 255, } const rgbBlack {r: 0,g: 0,b: 0, }function componentToHex(c: number): string {const hex Math.round(c).toString(16)return hex.length 1 ? 0 hex : hex }function rgbToHex(rgb: RGB): string {return #\){componentToHex(rgb.r)}\({componentToHex(rgb.g)}\){componentToHex(rgb.b)} }function mix(color: RGB, mixColor: RGB, weight: number): RGB {return {r: color.r * (1 - weight) mixColor.r * weight,g: color.g * (1 - weight) mixColor.g * weight,b: color.b * (1 - weight) mixColor.b * weight,} }/*** hex 转换为 rgb* param hex 例如 #FF0000/ function hexToRGB(hex: string): RGB {if (!/^[0-9A-Fa-f]{3}\(|[0-9A-Fa-f]{6}\)/.test(hex)) {throw new Error(请传入合法的16进制颜色值eg: #FF0000)}// 移除可能存在的 # 符号hex hex.replace(#, )// 确保十六进制代码是有效的// 返回 RGB 对象return {r: parseInt(hex.slice(0, 2), 16),g: parseInt(hex.slice(2, 4), 16),b: parseInt(hex.slice(4, 6), 16),} }/** 修改 element-plus的颜色主题/ function updateElementPlusTheme(type: string, baseColor: string): void {// 针对 element-plus 进行修改const colorArray: Recordstring, string[] [{ className: –el-color-\({type}, color: rgbToHex(mix(hexToRGB(baseColor), rgbBlack, 0)) },{className: --el-color-\){type}-dark-2,color: rgbToHex(mix(hexToRGB(baseColor), rgbBlack, 0.2)),},{className: –el-color-\({type}-light-3,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.3)),},{className: --el-color-\){type}-light-5,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.5)),},{className: –el-color-\({type}-light-7,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.7)),},{className: --el-color-\){type}-light-8,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.78)),},{className: –el-color-${type}-light-9,color: rgbToHex(mix(hexToRGB(baseColor), rgbWhite, 0.85)),},]// document.documentElement 是全局变量时// const el document.documentElementcolorArray.forEach((item) {// 下面两种方式都可以// 方法1: 需要把顶部的导入解开// const color useCssVar(item.className, document.documentElement)// color.value item.color// 方法2:document.documentElement.style.setProperty(item.className, item.color)// 方法3: 把上面的el解开// 获取 css 变量// getComputedStyle(el).getPropertyValue(item.className)// 设置 css 变量// el.style.setProperty(item.className, item.color)}) }export { type RGB, hexToRGB, rgbToHex, updateElementPlusTheme }修改HomeView.vue: 结构处修改:!– 颜色选择器 –el-color-pickerv-modelcolor:predefinepredefineColorschangesetThemeColorcolor-formathex:show-alphafalse/逻辑处修改: import { updateElementPlusTheme } from /utils/theme// 颜色 const color ref(localStorage.getItem(theme-color) || #409EFF) // 组件预定义颜色 const predefineColors ref([#ff4500,#ff8c00,#ffd700,#90ee90,#00ced1,#1e90ff,#c71585,rgba(255, 69, 0, 0.68),rgb(255, 120, 0),hsv(51, 100, 98),hsva(120, 40, 94, 0.5),hsl(181, 100%, 37%),hsla(209, 100%, 56%, 0.73),#c7158577, ])/** 设置主题颜色* param type 类型* param color 颜色*/ const setThemeColor (color: string, type primary) {// 存入本地主题颜色的值if (localStorage.getItem(theme-color) ! color) {localStorage.setItem(theme-color, color)}// 更新 Element Plus 主题updateElementPlusTheme(type, color) } 看下效果 但是刷新后还是会丢失,所以我们在App.vue中重新设置下组件的主题颜,刷新后也不会丢失 import { onMounted } from vue import { updateElementPlusTheme } from ./utils/themeonMounted(() {updateElementPlusTheme(primary,localStorage.getItem(theme-color) || #409EFF,) }) tab快捷栏 设置快捷栏需要用到pinia持久化所以我们要先下载一个持久化插件 npm i pinia-plugin-persistedstate 然后修改counter.ts import { ref } from vue import { defineStore, createPinia } from pinia import piniaPluginPersistedstate from pinia-plugin-persistedstate import router from /router import { ElMessage } from element-plus// 创建仓库 const pinia createPinia()// 使用插件进行持久化存储 pinia.use(piniaPluginPersistedstate)interface IHistoryList {path: stringname: string }export const useCounterStore defineStore(counter,() {const historyList refIHistoryList// 设置菜单历史记录列表的方法const setHistoryList ({ path, name }: IHistoryList) {// 没有就添加if (historyList.value.findIndex(i i.path path) -1) {historyList.value.push({ path, name })}}// 清除某个菜单历史记录列表的方法const clearHistory (path: string) {// 如果只剩下一个路由则弹窗提示不操作if (historyList.value.length 1) {return ElMessage.warning(只剩下一个路由了无法删除)}// 跳转到后一个路由const index historyList.value.findIndex(i i.path path)// 如果是最后一个路由则跳转到前一个路由if (index historyList.value.length - 1) {router.push(historyList.value[index - 1].path)} else {router.push(historyList.value[index 1].path)}// 删除该路由historyList.value historyList.value.filter(i i.path ! path)}return { historyList, setHistoryList, clearHistory }},{// 设置持久化persist: {key: settingInfo,storage: sessionStorage,},}, )然后还需要修改一下路由配置也就是router文件夹下的index.ts。设置了首页重定向然后新增了一个全局路由前置守卫监听路由跳转好往路由历史数组里添加路由信息 import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue import { useCounterStore } from /stores/counterconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: home,component: HomeView,// 首页进来重定向到test1redirect: /test1,children: [{path: /test1,name: test1,component: () import(/views/ParentPage.vue),},{path: /test2,name: test2,children: [{path: /test3,name: test3,component: () import(/views/SonPage.vue),},{path: /test4,name: test4,children: [{path: /test5,name: test5,component: () import(/views/SonPage.vue),},],},],},],},{path: /login,name: login,component: () import(../views/AboutView.vue),},], })// 全局前置路由守卫 router.beforeEach(to {const path to.pathconst name to.name as stringuseCounterStore().setHistoryList({ path, name })return true })export default router 最后修改HomeView.vue文件   结构处修改el-headerdiv classheaderel-button typeprimary sizesmall clickcollapseChange折叠/展开/el-buttondiv classtoolbarel-switch inline-prompt v-modeltheme active-text暗黑 inactive-text白亮 changetoggle /el-button typeprimary sizesmall clickscreenfullChange全屏/非全屏/el-button!– 颜色选择器 –el-color-picker v-modelcolor :predefinepredefineColors changesetThemeColor color-formathex:show-alphafalse /el-dropdownel-icon stylemargin-right: 8px; margin-top: 1pxsetting //el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-itemDelete/el-dropdown-item/el-dropdown-menu/template/el-dropdownspanTom/span/div/divel-tag v-fortag in store.historyList :keytag.name closable clicktoPath(tag.path)closedelHistory(tag.path) classml-2{{ tag.name }}/el-tag/el-header逻辑处修改 import { useCounterStore } from /stores/counterconst store useCounterStore()// 删除历史记录 const delHistory (path: string) {store.clearHistory(path) } // 跳转路由 const toPath (path: string) {router.push(path) }样式处修改 .layout-container-demo .el-header {position: relative;background-color: var(–el-color-primary-light-7);color: var(–el-text-color-primary); }.header {display: flex;justify-content: space-between;align-items: center; } .ml-2 {margin-left: 8px; } 效果 至于想实现下面的效果 可以使用ElementPlus的Dropdown组件做出修改即可本质就是操作pinia中存储的路由历史数组 代码 通过网盘分享的文件test.zip 链接: https://pan.baidu.com/s/1mmGT_xjW52s9dKUVJNZE2Q?pwdatm8 提取码: atm8 写的很糙关注实现即可。有空闲时间了还会加上中英文切换