vue div高度自适应

最新推荐文章于 2024-07-04 00:59:27 发布

小一梦

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43728978/article/details/130973119

版权

1.在.js文件中编写自定义指令

export default {
   
    install(Vue)  {
      /**
       * 在组件标签上绑定 v-resizable 指令，并使用对象的形式通过绑定值传递宽度和高度以及最大/最小高度的值；
       * 在 bind 函数中，获取传递的值，并根据需要设置默认值。在计算高度时，如果传递了最大/最小高度的值，则使用传递的值，否则使用默认值。
       * 
       * const MIN_WIDTH = 1080; // 最小宽度
       * const MAX_WIDTH = 1440; // 最大宽度
       * const MIN_HEIGHT = 300; // 最小高度
       * const MAX_HEIGHT = 1000; // 最大高度
       * const BASE_HEIGHT = 587; // 基准高度，即在最小和最大宽度之间时，高度的初始值
       * const HEIGHT_RANGE = MAX_HEIGHT - MIN_HEIGHT; // 高度范围，即最大高度和最小高度之间的差值
       * const WIDTH_RANGE = MAX_WIDTH - MIN_WIDTH; // 宽度范围，即最大宽度和最小宽度之间的差值
      */
      Vue.directive('resizable', {
        bind(el, binding) { // 接收参数
          const minWidth = binding.value.minWidth || MIN_WIDTH;
          const maxWidth = binding.value.maxWidth || MAX_WIDTH;
  
          const defaultHeight = binding.value.defaultHeight || DEFAULT_HEIGHT;
          const minHeight = binding.value.minHeight || MIN_HEIGHT;
          const maxHeight = binding.value.maxHeight || MAX_HEIGHT;
  
          const heightRange = maxHeight - minHeight; // 计算高度范围
          const widthRange = maxWidth - minWidth; // 计算宽度范围
  
          const styles = {
            width: binding.value.width || DEFAULT_WIDTH,
            height: binding.value.height || defaultHeight,
          };
          el.style.width = styles.width; // 设置初始宽度
          el.style.height = styles.height; // 设置初始高度
          window.addEventListener('resize', handleResize);
          handleResize();
  
          function handleResize() {
            const screenWidth = window.innerWidth; // 获取当前屏幕宽度
            if (screenWidth >= maxWidth) { // 如果屏幕宽度大于等于最大宽度
              styles.height = `${maxHeight}px`; // 将高度设置为最大高度
            } else if (screenWidth < minWidth) { // 如果屏幕宽度小于最小宽度
              styles.height = `${minHeight}px`; // 将高度设置为最小高度
            } else { // 否则，计算实际高度
              const baseRatio = (el.offsetWidth - minWidth) / widthRange; // 根据最大、最小宽度计算基准宽度所对应的比例
              const baseHeightDiff = Math.round(baseRatio * heightRange); // 计算基准高度所对应的高度差值
              const ratio = (screenWidth - el.offsetWidth) / widthRange; // 根据最大、最小宽度计算当前屏幕宽度所对应的比例
              const heightDiff = Math.round(ratio * heightRange); // 计算当前高度所对应的高度差值
              styles.height = `${minHeight + baseHeightDiff + heightDiff}px`; // 使用基准高度和当前屏幕宽度所对应的高度差值计算高度
            }
            el.style.height = styles.height; // 更新元素高度
          }
        },
        unbind() {
          window.removeEventListener('resize', handleResize); // 移除事件监听
        },
      });
    },

    
}

2.在main.js文件中全局注册

import grid from '@/utils/grid.js'
Vue.use(grid)

3.在.vue文件中使用

<div class="img-bg"
 v-resizable="{ width: '100%', height: '300px', maxHeight: 400, minHeight: 200, minWidth: 600, maxWidth: 1500, defaultHeight: '400px'}">
 </div>