Vue如何设置动态宽度高度或者动态样式_vue 动态宽高_GuoyeZhang的博客

1. 添加样式绑定

绑定高试样式
<div class="container" :style="{height: scrollerHeight}">
</div>
2. 添加属性计算
 
在computed里添加属性计算。记住 scrollerHeight 不需在data进行声明。
 computed是啥？请看看 computed的使用 
computed: {
    // 滚动区高度
    // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
    scrollerHeight: function() {
      return (window.innerHeight - 46 - 50) + 'px';
                    Vue如何设置动态宽度高度或者动态样式1. 添加样式绑定2. 添加属性计算在开发过程中，很多时候都会用到动态的计算的样式，比如宽度，高度。特别是开发后台管理系统。那么首先你务必看Vue的官方文档。涉及到的基础知识有：绑定内联样式的使用computed的使用文档写的都是基础使用。那么在项目实战中如何使用，2步就能实现，下面提供一个参考方案：需求场景：获取当前手机屏幕高度，设置cont...
				vue的自定义指令directive自动计算宽度和高度变化
Vue.directive('resize',{ // 指令的名称
    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
        let width = '', height = '';
        function isReize() {
            const style = document.defaultView.getComputedStyle(el);
				import { reactive, toRefs, computed, watch, onMounted } from 'vue';
import { useStore } from 'vuex';
interface DataType {
  screenWidth: string;
  changeWidth: () => void;
  timer: boolean;
  changeResultSheBei: () => void;
  sheBeiResult: any;
1、首先在dom元素中定义style属性，如下：
<template>
  <div class="punch-clock-wrapper" ref="punchcontent" :style="{height: scrollerHeight}">
   <div class="punch-clock-header">
     <img :src="clockList.imageUrl"
2.解决思路
Vue的理念是以数据驱动视图，所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式，只需改变每张图片的class即可实现轮播效果。动画效果交给transition完成。可以将轮播图看成两个（mainSlide和extraSlide），各个图片的位置如图所示：
3.代码实现
各个slide的样式：
$width: 800px;   // 容器宽度
$height: 300px;   // 容器高度
$bWidth: 500px;   // 大图片宽度
$sWidth: $width - $bWidth; // 小图片宽度
import { SelfAdaptionBox } from 'self-adaption-box'
components: { SelfAdaptionBox }
注意：都需要约会样式
import 'self-adaption-box/dist/SelfAdaptionBox.css'
设计图宽度
设计图高度
				使用 CSS3 的 animaition 通过拼图块背景图片位置的变化, 添加平滑过渡效果在 js 中通过为拼图块添加的自定义属性 index ,获取当前方块的背景图片位置信息
整个页面分为两个部分, 分别是拼图部分和功能按钮部分
使用 vuetify 的网格系统, 在不同屏幕下, 两个部分的布局和宽度动态变化, 在移动端, 为上下布局, 其他视口下均为左右布局,
拼图方块动态大小
由于移动端宽度差异过多, 此处拼图面板只设置最大宽度 max-width: 550px, 高度根据宽度自适应,
遇到的问题: 在给拼图容器根据容器宽度动态设置高度时, 发现浏览器大小变化时, 高度无法动态跟随变化, 需要刷新后, 样式才变化,
解决方法, 通过搜索资料, 在 GitHub 上发现了一个 VUE 按比例设置标签高度的指令, 通过引入并使用这个指令, 实现了拼图面板与方块根据页面大小动态改变的效果
方块背景图片的设置
实现上述拼图方块的动态改变后, 方块背景图片大小应该随着方块的宽高而动态的改变, 同时方块的背景图片位置也应该动态改变
遇到的问题: 在根据方块宽度与高度设置拼图方块背
Div即父容器不根据内容自适应高度，我们看下面的代码： 
复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。 
我们可以通过三种方法来解决这个问题　 1增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 
复制代码代码如下: <div id=”m
computed的使用
文档写的都是基础使用。那么在项目实战中如何使用，2步就能实现，下面提供一个参考方案：
需求场景：获取当前手机屏幕高度，设置container div的可滚动区域范围。
step1: 添加样式绑定
<div class="container" :style="{height: scrollerHeight}"></div>
step2: 添加
				我们一般在编写vue代码时，会首先编写模板代码，也就是template标签中的代码。如果我们想要比模板更加接近编译器，此时我们可以使用渲染函数。
我们编写的代码转化为真正的dom时，首先会先转换为VNode,然后多个Vnode进行结合起来转化为VDOM，最后VDOM才渲染成真实的DOM，此时我们思考一个问题，如果我们直接编写生成vnode的代码，效率会更高，这里我们就是h()函数。h函数我们也可以称为createVnode函数。
一、参数设置
h函数接收三个参数。
第一个参数:，可以为一个html标签，一个
				对于移动端页面，我们通常使用vw（视窗宽度）和vh（视窗高度）来设置元素的尺寸，以适配不同的屏幕大小。同时，我们也需要设置页面的高度，以保证页面内容完整显示，并且在滚动时能够正常展示。
下面是一些设置页面高度的方法：
1. 使用CSS样式设置页面高度，例如：
   ```css
   html, body {
     height: 100%;
2. 使用JavaScript动态设置页面高度，例如：
   ```javascript
   document.documentElement.style.height = window.innerHeight + 'px';
3. 使用第三方库，例如viewport-units-buggyfill，它可以解决vw和vh在某些浏览器中不兼容的问题，并自动计算页面高度。
总之，设置页面高度需要考虑到屏幕适配和浏览器兼容性等因素，可以选择合适的方法进行设置。