踩坑记9 vue3全屏、el-dropdown高度设置等

2021.8.3

做一些界面样式切换的小功能。

坑28（css、选择器、统一间距）：目标是选择一个父元素的全部子元素，通过margin设置统一的左右间距。使用的选择器是element > *，其中'>'表示在element的子元素中选择，'*'表示选择所有元素，相关代码如下。

.setMenuBox{

    display: flex;

    flex-direction: row;

    align-items: center;

}

.setMenuBox > * {

    margin:0 5px;

}

参考： 如何使用CSS选择所有子元素？_weixin_45587319的博客-优快云博客_css选择所有子元素

文档： CSS 选择器参考手册 (w3school.com.cn)

坑29（html、title、鼠标悬浮提示文本）：期望效果为当鼠标悬浮停留在某个元素上时，显示提示文本，比如一个搜索的放大镜按钮，鼠标悬浮停留在上面时，文本提示这是搜索。实现方法：通过html标签的title属性实现，将title属性的值设置为文本内容即可。

<img src='/src/assets/search.jpg' alt='搜索' title='搜索' @click='search' />

坑30（screenfull、全屏、element-plus、Message）：目标是一个全屏切换按钮，可全屏时，按钮图标随全屏状态切换；不可全屏时触发toast提示，使用的是element-plus的Message消息提示。全屏功能的实现使用screenfull包，安装：npm install --save screenfull。

！注意！使用screenfull.toggle()进行状态切换的前后，用screenfull.isFullscreen查询全屏状态时，会发现状态并没有变化，也就是有一定的延时。同时考虑到除了按钮触发的全屏，还有F11也可以触发全屏。综上所述，状态的查询不应放在screenfull.toggle()后，而应该使用screenfull.on(event,function)来注册'change'事件，在全屏状态变化时，进行状态查询。

！另一个注意！screenfull的全屏和F11触发的全屏并不兼容！！通过F11进入的全屏模式下，全屏切换按钮没有切换全屏的功能效果(但图标、screenfull.isFullscreen状态依然会变)，且无法使用esc退出，只能用F11进行切换。另外，F11的切换不会改变图标、screenfull.isFullscreen的状态。观察了几个开源后台管理系统，均未进行此方面的兼容。网上有相关参考： 网页全屏以及禁用F11默认行为-vue项目 - 简书 (jianshu.com)，但根据文档 Event.returnValue - Web APIs | MDN (mozilla.org)，提示Event.returnValue属性已被抛弃，故而暂不进行此实现。

对全屏按钮进行了组件封装，使其方便调用。组件Screenfull.vue代码如下：

<template>

    <img class='screenfullBtn' :src='isFullscreen?"/src/assets/icons/normal-screen-30.png":"/src/assets/icons/full-screen-30.png"'

    alt='全屏' height='20' title='全屏' @click="toggleScreenfull" />

</template>



<script>

import { onMounted,onUnmounted,reactive,toRefs } from 'vue'

import screenfull from 'screenfull'

import { ElMessage } from 'element-plus'



export default {

    setup() {

        const state=reactive({

            isFullscreen: false

        })



        onMounted(()=>{

            if(screenfull.isEnabled){

                screenfull.on('change',checkFullscreen)

            }

        })



        onUnmounted(()=>{

            if(screenfull.isEnabled){

                screenfull.off('change',checkFullscreen)

            }

        })



        function checkFullscreen(){

            state.isFullscreen=screenfull.isFullscreen

        }



        function toggleScreenfull(){

            if(screenfull.isEnabled){

                screenfull.toggle()

            }else{

                ElMessage.warning({

                    message: '抱歉，当前浏览器不支持该全屏功能，可尝试使用F11触发全屏',

                    center: true

                })

            }

        }



        return {

            ...toRefs(state),

            toggleScreenfull

        }

    },

}

</script>



<style>

.screenfullBtn {

    padding: 2px;

    cursor: pointer;

    border: lightgray solid 1px;

    border-radius:5px;

}

</style>

在其他组件中调用：

<template>

    <Screenfull />

</template>



<script>

    import Screenfull from './widgets/Screenfull.vue'

</script>

参考： vue3使用screenfull实现全屏_哈-优快云博客_vue3 全屏

github： GitHub - sindresorhus/screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

坑31（css、el-dropdown高度、line-height）：用element的下拉菜单时出现的问题，内容是img图片（设置为text是也有相同问题），但是el-dropdown-link的高度会比img高2px.。

导致该问题产生的原因是el-dropdown的默认样式中有line-height: 1，作为inline-block元素，line-height属性会用于计算元素的高度，故在el-dropdown或el-dropdown-link上设置line-height: 0即可消除其对元素高度的影响。

！注意！设置line-height: 0会使el-dropdown无法正常包裹只含文本元素的内容，在纯文本的el-dropdown中可使用内联样式等方式，设置回line-height: 1即可。

总结：纯图片设置line-height: 0，纯文本设置line-height: 1，图片文本都包含的随意。

参考： line-height - CSS（层叠样式表） | MDN (mozilla.org)。

其他方法：用!important固定高度（和图片相同的高度）；或者，若el-dropdown-link中无文字内容时，可以设置font-size: 0px来达到同样效果。

by 莫得感情踩坑机(限定)