Vue设置div的宽度和高度

最新推荐文章于 2023-05-31 17:11:29 发布
原创 最新推荐文章于 2023-05-31 17:11:29 发布 · 2w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用Vue.js和ECharts创建响应式动态图表，包括动态调整图表大小以适应不同屏幕尺寸，以及通过Ajax获取数据实时更新图表内容。

html代码

          <div id="divOrganization" v-bind:style="{width:EchartsWidth,height: EchartsHeight,position:'absolute' }"  >

            </div>

js代码        

new Vue({
            el: '#app',
            data: { 
                EchartsHeight: (document.body.clientHeight - 140 )+'px',
                EchartsWidth:(document.body.clientWidth - 260)+'px',// (screen.width-250)*0.96+'px',
                //return {
                //    info: null
                //}
            },

 

<script src="~/Content/AdminLTE-3.0.1/plugins/jquery/jquery.min.js"></script>
<script src="../Scripts/echarts.js"></script>
<script src="~/Content/plugins/vue-dev/dist/vue.js"></script>
<script src="~/Content/plugins/axios-master/dist/axios.js"></script> 

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
}

<div class="content">
    <div class="row" id="app">
            <div id="divOrganization" v-bind:style="{width:EchartsWidth,height: EchartsHeight,position:'absolute' }"  >

            </div>
 </div>
 </div>

<script type="text/javascript">
    var IsSetOrganization = false;

    $(function () {

        new Vue({
            el: '#app',
            data: { 
                EchartsHeight: (document.body.clientHeight - 140 )+'px',
                EchartsWidth:(document.body.clientWidth - 260)+'px',// (screen.width-250)*0.96+'px',
                //return {
                //    info: null
                //}
            },
            mounted() {
                var token = $('*[name="__RequestVerificationToken"]').val();
                var ID = '1000';
                var ParentID = '0';
                this.GetOrganization(token,ID,ParentID);
            },
            computed: {
                //// 计算属性的 getter
                //EchartsHeight: function () {
                //    // `this` 指向 vm 实例
                //    return screen.height;
                //}, 
                //EchartsWidth: function () {
                //    // `this` 指向 vm 实例
                //    return screen.width;
                //}
            },
            methods: { 
                GetOrganization: function () {
                    var data = "";

                    var myChartOrganization = echarts.init(document.getElementById('divOrganization'));
                    var labelOption = {
                        normal: {
                            show: true,

                            formatter: '{c}  {name|{a}}',
                            fontSize: 16,
                            rich: {
                                name: {
                                    textBorderColor: '#fff'
                                }
                            }
                        }
                    };

                    // 指定图表的配置项和数据
                    var option2 = {
                        // backgroundColor: '#DEF',//'#0f375f',
                        graphic: [
                            {
                                type: 'image',
                                id: 'logo',
                                //right: '11',
                                //bottom: '28%',
                                //z: 1000,
                                bounding: 'raw',
                                style: {
                                    image: '../image/background3.jpg',
                                    width: screen.width,//1545,
                                    height: screen.height,
                                }
                            }
                        ],
                        tooltip: {
                            show: IsSetOrganization,
                            trigger: 'item',
                            triggerOn: 'mousemove',//mousemove|
                            enterable: true,
                            formatter: function (params) {
                         

                                return html;
                            },
                        },

                        toolbox: {
                            show: false,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },

                            }
                        },

                        series: [
                            {
                                type: 'tree',

                                data: [data],

                                left: '2%',
                                right: '2%',
                                top: '8%',
                                bottom: '20%',

                                symbol: 'image://http://' + window.location.host + '/image/Dark_blue_button.png',//'emptyCircle',
                                symbolSize: [100, 30],
                                orient: 'vertical',

                                expandAndCollapse: false,
                                initialTreeDeptp: -1,
                                itemStyle: {
                                    color: '#FFF',//'#f56954',
                                    borderColor: "#00c0ef",
                                    borderWidth: 8,
                                },
                                label: {
                                    formatter: '{b} \n {c}  ',
                                    position: 'inside',
                                    distance: 5,
                                    fontSize: 12,
                                    color: "#FFF",
                                },

                                leaves: {
                                    label: {
                                        position: 'inside',
                                        // rotate: -90,
                                        verticalAlign: 'middle',
                                        align: 'center',
                                    },
                                    itemStyle: {
                                        color: "#FFF",//"#00c0ef",
                                    }

                                },

                                animationDurationUpdate: 750
                            }
                        ]              //  color: ['#007bff', '#dc3545','#2E90CD', '#FE0000']
                    };

                    // 使用刚指定的配置项和数据显示图表。

                    myChartOrganization.showLoading(); // 加载动画

                    myChartOrganization.setOption(option2);

                    myChartOrganization.hideLoading();

                    GetChartResult();

                    function GetChartResult() {
                        var token = $('*[name="__RequestVerificationToken"]').val();
                        var ID = '1000';
                        var ParentID = '0';
                        var auto = myChartOrganization.getOption();

                        axios({
                            method: 'post',
                            url: '/BaseData/GetOrganization',

                            transformRequest: [
                                function (data) {
                                    let ret = ''
                                    for (let it in data) {
                                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                                    }
                                    ret = ret.substring(0, ret.lastIndexOf('&'));
                                    return ret
                                }
                            ],
                            data: {
                                __RequestVerificationToken: token,
                                ID: ID,
                                ParentID: ParentID,
                                //OrganizationName: 'easyboot'
                            }
                        })
                            .then(function (response) {
                                console.log(response)
                                console.log(response.data)
                                var auto = myChartOrganization.getOption();

                                var data1 = response.data.replace(/ID/g, "value").replace(/OrganizationName/g, "name").replace(/CHILDREN/g, "children")
                                var data2 = data1.substring(0, data1.length - 1);
                                var data3 = data2.substring(1, data1.length);

                                var objData = JSON.parse(data1)

                                auto.series[0].data = objData; //数据源
                                //auto.legend.data =legendData;
                                myChartOrganization.showLoading(); // 加载动画
                                myChartOrganization.setOption(auto, false);
                                myChartOrganization.hideLoading();
                            });



                        @*$.ajax({
                            type: 'POST',
                            url: '@Url.Action("GetOrganization")',

                            data: {
                                ID: ID,
                                ParentID: ParentID,
                                __RequestVerificationToken: token,
                            },
                            async: false,

                            dataType: "json",
                            success: function (data) {
                                //console.log(data)

                                var auto = myChartOrganization.getOption();

                                var data1 = data.replace(/ID/g, "value").replace(/OrganizationName/g, "name").replace(/CHILDREN/g, "children")
                                var data2 = data1.substring(0, data1.length - 1);
                                var data3 = data2.substring(1, data1.length);

                                var objData = JSON.parse(data1)

                                auto.series[0].data = objData; //数据源
                                //auto.legend.data =legendData;
                                myChartOrganization.showLoading(); // 加载动画
                                myChartOrganization.setOption(auto, false);
                                myChartOrganization.hideLoading();
                            },
                            error: function (message) {
                                // alert(message);
                            }
                        });*@
                    }
                },
                SetDataImportTableName: function () {
                    localStorage.setItem('DataImportTableName', 'organization')
                }
            }
        }) 

    });
</script>

 

 

Vue.js 中如何手动设置元素的宽度和高度
ByteWhisper的博客
09-25 1304
这两种方法都可以手动设置元素的宽度和高度。如果你需要根据组件的状态或动态数据来设置宽度和高度，使用绑定样式对象的方法会更加灵活和方便。另一种设置元素宽度和高度的方法是使用绑定样式对象。我们可以在 Vue 组件中定义一个 data 属性，包含需要设置的宽度和高度的值，然后通过绑定样式对象将这些值应用到元素上。在 Vue.js 中，我们可以通过使用内联样式或者绑定样式对象来手动设置元素的宽度和高度。使用内联样式是一种简单的设置元素宽度和高度的方法。的数据属性，它是一个包含宽度、高度和背景颜色的样式对象。
Vue选择器设置宽度的方法
YabClass的博客
09-23 478
在Vue开发中，经常会遇到需要设置元素的宽度的情况。通过在Vue组件中动态地添加或移除CSS类，可以改变选择器的样式，进而改变宽度。通过上述三种方法，你可以灵活地设置Vue选择器的宽度，根据需要进行动态调整。在实际开发中，选择合适的方法来设置宽度，可以更好地满足项目的需求。在Vue中，还可以使用计算属性来根据一些条件动态地计算选择器的宽度。时，选择器的宽度是初始宽度的两倍，否则保持初始宽度不变。的值，可以动态地改变选择器的宽度。// 展开时的宽度是初始宽度的两倍。的值来计算选择器的宽度。
Vue 根据 视口高度去调整 div 高度
lllsj的博客
11-15 1024
<template> <div class="content" :style="contentStyleObj"></div> </template> <script> export default { name: 'App', data () { 　　return { contentStyleObj:...
vue的边距怎么设置_vue 拖动调整左右两侧div的宽度
weixin_39785286的博客
12-18 3287
原文是左中右三种情况的拖动。由于项目需要，我删除掉了右边的，直接左右区域拖动调整div宽度1、拖动，调整左右两侧宽度西瓜备注2西瓜备注2export default {name: 'Dashboard',mounted () {this.dragControllerDiv();},methods: {dragControllerDiv: function () {var resize = docu...
vue 动态设置div的高度 动态设置元素高度
冰冰酱
03-23 2439
【代码】vue 动态设置div的高度 动态设置元素高度。
vue div自适应高度
莫逸雪的博客
06-07 7633
div高度自适应利用flex布局或者监听其他盒子高度
div设置高度 vue_Vue系列：组件化开发
weixin_39535557的博客
12-30 330
基础语法v-model修饰符lazy：失去焦点或者回车时，才会更新data。number：指定双向绑定的数据为number类型。trim：去除左右空格。示例：<input type="text" v-model.lazy="message"><input type="age" v-model.number="age"><input type="text" v...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
`<div>`元素绑定了样式，其中包含了拖动图标（`.drag-icon`）以及宽度和高度改变的组件（`ChangeWidth`和`ChangeHeight`）。`dragDiv`方法处理拖动事件，而`changeWidth`和`heightChange`方法则处理宽度和高度的改变...
vue中实现拖动调整左右两侧div的宽度的示例代码
01-19
还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们...
无法获取隐藏元素宽度和高度的解决方案
08-31
无法获取隐藏元素宽度和高度的解决方案 在实际开发中，我们经常会遇到需要获取隐藏元素的宽高的情况，这里的隐藏元素是指display为none的元素。在默认情况下，获取隐藏元素的宽高是非常困难的，因为浏览器不会计算...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
然而，当`box-sizing`属性设置为`border-box`时，元素的宽度和高度将包括内容区、内边距和边框。这意味着，当我们为元素设置宽度时，`padding`和`border`将被包含在这个宽度之内，不会导致元素超出其父元素的边界。 ...
Vue 项目 控制页面内 div 根据浏览器窗口大小自适应高度
qq_14993591的博客
01-06 3362
做项目时遇到以下问题： 在页面顶部、底部组件高度固定的情况下，如何实现中间内容区域盒子根据浏览器窗口大小自适应高度 // 定义方法，获取浏览器窗口高度 methods: { getDivHeight() { const screenheight = window.innerHeight this.$refs.mainDiv.style.height = screenheight - 704 + 'px' // 704 为 头部组件高度 + 底部组件高度 // mainD
python绝对方向角度值_重学前端：相对定位VS绝对定位VS固定定位
weixin_39575502的博客
12-10 1060
position 是CSS中非常重要的属性，顾名思义，他是用来指定一个元素在页面上的位置，搞懂了position的属性值对布局的理解会更加透彻。position一共有5个值，分别是：staticrelativefixedabsolutestickystatic 是 position 的默认值，如果元素没有指定position，那么他的值就是默认的static定位。他会按照正常的文档流从上到下，从左...
vue div高度自适应
weixin_43728978的博客
05-31 1513
vue自定义指令、高度自适应
vue实现改变div的高度组件
karabo的博客
08-29 2394
本来是想实现同时改变高度和宽度都可以的，但感觉集合在一起显得太冗余了，就只实现了改变高度，而且高度改变的时候还存在一个很小的bug，也不知道咋解决，偶尔总是没有监听到鼠标释放的事件，直接上代码的吧 在父组件中引用 <change-height :min="100"> <templatev-slot> <divstyle="height:100px;overflow:auto"> <div...
vue动态修改div、table...元素高度宽度
神经彬的博客
09-29 3607
根据浏览器宽高度，动态显示内容的宽高，总体就是给设置宽高的对象设置一个监听器即可 <template> <el-container style="height: 100%;width: 100%;"> ... </el-container> </template> <script> export default { data() { return { ... }
vue获取div高度
yuyu_2019的博客
01-22 7881
<div class="top" ref="top"> mounted () { let topHeight = this.$refs.top.offsetHeight // 头部高度 console.log(topHeight) }
vue如何设置一个元素的高度
weixin_42596246的博客
02-13 1987
在 Vue 中，可以使用 inline styles 或者 CSS 设置一个元素的高度。 使用 inline styles： <template> <div :style="{ height: height + 'px' }"></div> </template> <script> export default { data()...
HelloVue
qq_33879627的博客
09-21 413
（二）HelloVue 2.1 HelloVuejs ​ 如何开始学习Vue，当然是写一个最简单的demo，直接上代码。此处通过cdn<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>获取vuejs。 ​ vue是声明式编程，区别于jquery的命令式编程。 2.1.1命令式编程 ​ 原生js做法（命令式编程） 创建div元素，设置id属性 定义一个变量叫message 将messa
vue2 div 自适应宽度
最新发布
11-06
<think>我们正在讨论Vue2中实现div自适应宽度的方法。根据引用[3]，用户提到了一个使用拖拽分割线实现自适应布局的例子。但用户现在想要的是div自适应宽度，可能不需要拖拽功能。我们可以考虑以下几种方法： 1. 使用CSS Flexbox布局实现自适应宽度 2. 使用CSS Grid布局 3. 使用百分比宽度 4. 结合Vue动态计算宽度（响应窗口变化） 由于引用[2]中提到了全局自适应，我们可以利用Vue监听窗口大小变化，动态设置div的宽度。 ### 方法1：使用Flex布局（最简单常用） 在父容器上设置`display: flex`，子元素会自动填充剩余空间。 ```html <template> <div class="container"> <div class="sidebar">侧边栏（固定宽度）</div> <div class="main-content">主内容（自适应宽度）</div> </div> </template> <style scoped> .container { display: flex; height: 100vh; } .sidebar { width: 200px; /* 固定宽度 */ background: #f0f0f0; } .main-content { flex: 1; /* 自适应剩余宽度 */ background: #e0e0e0; overflow: auto; /* 内容超出出现滚动条 */ } </style> ``` ### 方法2：使用Grid布局 ```html <template> <div class="container"> <div class="sidebar">侧边栏</div> <div class="main-content">主内容</div> </div> </template> <style scoped> .container { display: grid; grid-template-columns: 200px 1fr; /* 第一列固定200px，第二列自适应 */ height: 100vh; } .main-content { overflow: auto; } </style> ``` ### 方法3：使用百分比宽度（需要知道父容器宽度） ```html <template> <div class="container"> <div class="sidebar">侧边栏</div> <div class="main-content">主内容</div> </div> </template> <style scoped> .container { width: 100%; height: 100vh; } .sidebar { width: 200px; float: left; background: #f0f0f0; height: 100%; } .main-content { width: calc(100% - 200px); /* 减去侧边栏宽度 */ float: left; height: 100%; background: #e0e0e0; overflow: auto; } </style> ``` ### 方法4：动态计算宽度（响应式） 如果需要更复杂的自适应逻辑（如根据窗口大小改变布局），可以在Vue中监听窗口大小变化，动态计算宽度。 ```html <template> <div class="container"> <div class="sidebar" :style="{ width: sidebarWidth + 'px' }">侧边栏</div> <div class="main-content" :style="{ width: mainWidth + 'px' }">主内容</div> </div> </template> <script> export default { data() { return { sidebarWidth: 200, windowWidth: 0 } }, computed: { mainWidth() { return this.windowWidth - this.sidebarWidth; } }, mounted() { this.windowWidth = window.innerWidth; window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { this.windowWidth = window.innerWidth; } } } </script> <style scoped> .container { display: flex; /* 或者使用浮动等，这里用flex确保布局 */ height: 100vh; } .sidebar { background: #f0f0f0; } .main-content { background: #e0e0e0; overflow: auto; } </style> ``` ### 注意事项 - 对于大多数布局，推荐使用Flex或Grid，它们更现代且易于维护。 - 如果需要在Vue中动态改变布局（例如通过按钮切换侧边栏的显示/隐藏），可以结合使用计算属性和CSS类。 - 在组件销毁前，务必移除事件监听器，避免内存泄漏。 ### 响应式设计补充 根据引用[2]中提到的全局自适应，我们还可以使用媒体查询来适配不同屏幕，但通常媒体查询用于断点布局，而上述方法可以连续自适应。 ### 相关问题 §§相关问题§§ 1. Vue2中如何实现高度自适应布局？ 2. 如何在Vue2中实现拖拽调整div宽度？ 3. Vue2项目如何同时适配PC和移动端？ </think>在 Vue2 中实现 div 自适应宽度主要涉及 CSS 布局技术和 Vue 响应式编程的结合使用。以下是几种高效实用的解决方案： ### 1. Flex 弹性布局（推荐方案） ```html <template> <div class="container"> <div class="fixed-width">左侧固定宽度(200px)</div> <div class="auto-width">右侧自适应宽度区域</div> </div> </template> <style scoped> .container { display: flex; /* 启用弹性布局 */ height: 100vh; } .fixed-width { width: 200px; /* 固定宽度 */ background: #f0f0f0; } .auto-width { flex: 1; /* 关键属性 - 自动填充剩余空间 */ background: #e0e0e0; overflow: auto; /* 内容超出自动滚动 */ } </style> ``` **实现原理**： - `display: flex` 创建弹性容器 - `flex: 1` 使元素自动填充剩余空间[^3] - 响应式适应父容器尺寸变化 ### 2. CSS Grid 网格布局 ```html <template> <div class="grid-container"> <div class="fixed-col">固定列(200px)</div> <div class="fluid-col">自适应列</div> </div> </template> <style scoped> .grid-container { display: grid; grid-template-columns: 200px 1fr; /* 1fr单位自动分配剩余空间 */ height: 100vh; } .fluid-col { overflow: auto; } </style> ``` ### 3. 百分比计算宽度（传统方法） ```html <template> <div class="wrapper"> <div class="sidebar">侧边栏(20%)</div> <div class="content">主内容区域(80%)</div> </div> </template> <style scoped> .wrapper { display: flex; height: 100vh; } .sidebar { width: 20%; } .content { width: 80%; /* 或使用 calc(100% - 200px) */ } </style> ``` ### 4. 响应式动态计算（Vue + JS） ```html <template> <div ref="container" class="dynamic-container"> <div class="static-block">固定块(300px)</div> <div class="dynamic-block" :style="{ width: dynamicWidth + 'px' }"> 动态宽度区域 </div> </div> </template> <script> export default { data() { return { dynamicWidth: 0 } }, mounted() { this.updateWidth(); window.addEventListener('resize', this.updateWidth); }, beforeDestroy() { window.removeEventListener('resize', this.updateWidth); }, methods: { updateWidth() { const containerWidth = this.$refs.container.offsetWidth; this.dynamicWidth = containerWidth - 300; // 减去固定块宽度 } } } </script> <style scoped> .dynamic-container { display: flex; width: 100%; height: 300px; } .static-block { width: 300px; background: #eee; } .dynamic-block { background: #ddd; overflow: auto; } </style> ``` ### 5. 嵌套滚动容器实现 ```html <template> <div class="scroll-wrapper"> <div class="header">顶部固定区域</div> <div class="scroll-content"> <div class="left-panel">左侧面板(固定300px)</div> <div class="auto-scroll"> <!-- 自适应宽度滚动区 --> <div v-for="i in 50" :key="i">内容项 {{i}}</div> </div> </div> <div class="footer">底部固定区域</div> </div> </template> <style scoped> .scroll-wrapper { height: 100vh; display: flex; flex-direction: column; } .header, .footer { height: 60px; background: #ccc; } .scroll-content { flex: 1; display: flex; overflow: hidden; } .left-panel { width: 300px; background: #f5f5f5; } .auto-scroll { flex: 1; overflow: auto; /* 关键：自适应宽度+溢出滚动 */ } </style> ``` ### 关键实现要点 1. **布局选择**： - 优先使用 Flex/Grid 等现代布局方案 - 传统方案使用 `calc(100% - 固定宽度)` 2. **滚动处理**： ```css .auto-width { overflow: auto; /* 横向/纵向自动滚动 */ overflow-x: auto; /* 仅横向滚动 */ } ``` 3. **响应式断点**（结合引用[2]）： ```css @media (max-width: 768px) { .container { flex-direction: column; } .fixed-width { width: 100%; } } ``` 4. **性能优化**： - 使用 `will-change: transform` 提升滚动性能 - 避免在 resize 事件中频繁触发重排 - 使用防抖函数控制 resize 事件频率 > **最佳实践**：绝大多数场景推荐使用 Flexbox 方案（方案1），它提供最简洁的实现和最佳的浏览器兼容性[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值