效果如下
GIF 2023-11-8 14-49-43.gif
：
原理:
收缩按钮是相对父节点定位的。点击后通过更改父组件的left 值进行展开收缩，收缩时left为-1 * 父节点宽度， 展开时还原为初始状态。
源码：
<!--
author:yangfeng
date:20231107
在此组件父节点添加一个展开收缩的按钮，点击时收缩父组件，再次点击展开父组件
【原理: 通过更改父组件的left 值进行展开收缩，收缩时left为-1 * 父节点宽度， 展开时还原为初始状态】
【注意：组件是相对于父组件定位的！】
-->
<template>
<div :class="{ 'ec-arrow': true }" @click="trigger" ref="arrowRefDom">
<img v-show="open" src="@/assets/ss-left.png" />
<img v-show="!open" src="@/assets/ss-right.png" />
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
const props = defineProps({
// 是开启还是关闭状态
open: {
type: Boolean,
default: true
}
})
const emit = defineEmits([
'update:open', // v-model
'click'
])
const arrowRefDom = ref()
let parentNodeCssInfo = {} // 父节点初始样式
const trigger = () => {
let bool = !props.open
emit('update:open', bool)
emit('click', bool)
}
/**
* 显示隐藏父节点panel
* @param {*} bool true：展开父节点 false：收缩父节点
*/
const hideOrShowParentNode = (bool = false) => {
let parentNode = arrowRefDom.value.parentNode
if (!parentNode) return
if (bool) { // 展开父节点
parentNode.style.left = parentNodeCssInfo.left || 0
} else { // 折叠父节点
parentNode.style.left = -1 * parentNode.offsetWidth + 'px'
}
}
// 获取样式
const getStyle = (htmlNode, str) => {
if(!htmlNode || !str) return ''
if (htmlNode.currentStyle) { // ie
return htmlNode.currentStyle[str]
} else {
return window.getComputedStyle(htmlNode, null)[str]
}
}
// 初始化
const init = () => {
// 存储父节点信息
let parentNode = arrowRefDom.value.parentNode
if (!parentNode) return
parentNode.style.transition = 'left ease 0.5s'
parentNodeCssInfo = {
left: getStyle(parentNode, 'left')
}
// 初始状态
hideOrShowParentNode(props.open)
}
watch(()=>props.open,(newVal)=>{
hideOrShowParentNode(newVal)
})
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
$width: 26px;
$height: 77px;
.ec-arrow {
width: $width;
height: $height;
top: 50%;
right: -1 * $width;
margin-top: -0.5 * $height;
position: absolute;
cursor: pointer;
z-index: 99;
img {
width: 100%;
height: 100%;
}
}
</style>
图标：
image.png
调用方式：
image.png
总结
代码很简单，考虑到比较常用就分享给大家，遇到panel展开方向不一样的自行扩展！
若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/d4f9f5107aab?v=1699426268971，转载请注明出处，谢谢。
