全屏模式切换
//全屏按钮点击的回调
const fullScreen = () => {
//DOM对象的一个属性:可以用来判断当前是不是全屏模式[全屏:true,不是全屏:false]
let full = document.fullscreenElement;
//切换为全屏模式
if (!full) {
//文档根节点的方法requestFullscreen,实现全屏模式
document.documentElement.requestFullscreen();
} else {
//变为不是全屏模式->退出全屏模式
document.exitFullscreen();
}
}
顶部进度条
1. npm i nprogress
2. 引入Js和Css
// 切换路由顶部进度条样式
import nProgress from "nprogress";
import "nprogress/nprogress.css";
3. 配置
// 全局前置守卫
router.beforeEach((to, from, next) => {
nProgress.start();
next();
});
// 全局后置守卫
router.afterEach((to, from) => {
nProgress.done();
});
4. 修改进度条颜色 进入到 node_modules 找到nprogress下的nprogress.css
#nprogress .bar {
background-image: linear-gradient(to right,red,cyan,yellow,pink);
}
暗黑模式切换
<!-- 表单元素 -->
<el-form>
<el-form-item label="主题颜色">
<el-color-picker @change="setColor" v-model="color" size="small" show-alpha :predefine="predefineColors" />
</el-form-item>
<el-form-item label="暗黑模式">
<el-switch @change="changeDark" v-model="dark" class="mt-2" style="margin-left: 24px" inline-prompt
active-icon="MoonNight" inactive-icon="Sunny" />
</el-form-item>
</el-form>
//收集开关的数据
let dark = ref<boolean>(false);
//颜色组件组件的数据
const color = ref('rgba(255, 69, 0, 0.68)')
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',
])
//switch开关的chang事件进行暗黑模式的切换
const changeDark = () => {
//获取HTML根节点
let html = document.documentElement;
//判断HTML标签是否有类名dark
dark.value ? html.className = 'dark' : html.className = '';
}
//主题颜色的设置 只能修改按钮type="primary"的按钮样式
const setColor = ()=>{
//通知js修改根节点的样式对象的属性与属性值
const html = document.documentElement;
html.style.setProperty('--el-color-primary',color.value);
}