2021.8.3
做一些界面样式切换的小功能。
坑28(css、选择器、统一间距):目标是选择一个父元素的全部子元素,通过margin设置统一的左右间距。使用的选择器是element > *,其中'>'表示在element的子元素中选择,'*'表示选择所有元素,相关代码如下。
.setMenuBox{
display: flex;
flex-direction: row;
align-items: center;
}
.setMenuBox > * {
margin:0 5px;
}
参考: 如何使用CSS选择所有子元素?_weixin_45587319的博客-CSDN博客_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实现全屏_哈-CSDN博客_vue3 全屏
坑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 莫得感情踩坑机(限定)