全屏模式切换顶部进度条

学习java的小库里

已于 2023-09-11 09:01:12 修改

阅读量68

点赞数

文章标签：前端 javascript html5

于 2023-08-25 13:40:21 首次发布

本文链接：https://blog.csdn.net/dvhdjdndb/article/details/132492266

版权

全屏模式切换

//全屏按钮点击的回调 
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);
}