松江品划网站建设推广,锦州市城市建设服务中心网站,衡水企业做网站多少钱,如何建立自己的网站教程组件效果图
未达到最大高度 达到设置的最大高度 进行展开
实现代码
组件代码 备注#xff1a;通过tailwindcss设置的样式#xff0c;通过element-plus/icons-vue设置的图标#xff0c;可根据情况进行替换 template!-- 限制高度组件 --div ref…组件效果图
未达到最大高度 达到设置的最大高度 进行展开
实现代码
组件代码 备注通过tailwindcss设置的样式通过element-plus/icons-vue设置的图标可根据情况进行替换 template!-- 限制高度组件 --div refrestrictionBox classrelative overflow-hidden bg-blue-300 :classcontrol.isUnfold ? : maxdiv refrestrictionChilslot/slot/div!-- 渐变 --div v-ifcontrol.isExceed !control.isUnfold classabsolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white/div/div!-- 控制按钮 --div v-ifcontrol.isExceeddiv classflex h-12 cursor-pointer select-none items-center justify-center space-x-1 pb-2 text-blue-500 active:text-blue-400 clickchangeUnfoldspan classtext-sm{{ control.isUnfold ? 收起 : 展开 }}/spanel-iconArrowUp v-ifcontrol.isUnfold /ArrowDown v-else //el-icon/div/div
/templatescript setup
import { ref, reactive, onMounted, onUnmounted } from vue
import { ArrowUp, ArrowDown } from element-plus/icons-vue// 接收参数
const props defineProps({// 最大高度 - 收起前max: {type: String,default: max-h-48}
})// 组件控制参数
const control reactive({boxHeight: 0,chilHeight: 0,isExceed: false, // 是否超出高度isUnfold: false // 是否展开
})// 改变展开方式
const changeUnfold () (control.isUnfold !control.isUnfold)// 获取元素
const restrictionBox ref(null)
const restrictionChil ref(null)// 创建高度监听 及监听销毁
let observerBox null
let observerChil null// 销毁监听
const destroyedObserver () {if (observerBox) {observerBox.disconnect()observerBox null}if (observerChil) {observerChil.disconnect()observerChil null}
}// 比较高度的函数
const compareHeights () {if (control.boxHeight 0 control.chilHeight 0) {// 高度超出,出现下拉if (control.chilHeight control.boxHeight) {destroyedObserver()console.log(超出高度)control.isExceed true}}
}// 页面加载完成
onMounted(() {// 父级监听observerBox new ResizeObserver(entries {entries.forEach(entry {control.boxHeight entry.contentRect.heightcompareHeights()})})// 内容监听observerChil new ResizeObserver(entries {entries.forEach(entry {control.chilHeight entry.contentRect.heightcompareHeights()})})// 开始监听两个元素observerBox.observe(restrictionBox.value)observerChil.observe(restrictionChil.value)
})
onUnmounted(() {destroyedObserver()
})
/script外层引用
script setup
import HeightRestriction from ../../components/HeightRestriction/HeightRestriction.vueconst ttt1 ref(0)
const tttt () {ttt1.value
}
/scripttemplateHeightRestrictionbutton clicktttt测试/buttondiv v-fori in ttt1 :keyi{{ ttt1ttt1ttt1 }}/div/HeightRestriction
/template
