Vue项目引用dataV组件,部署后出现样式错乱Component width or height is 0px,rendering abnormality may occur

本文主要是介绍Vue项目引用dataV组件,部署后出现样式错乱Component width or height is 0px,rendering abnormality may occur,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue项目引用组件dataV,在本地运行时没有问题,打包放到服务器上后,刷新页面会出现样式错乱问题
控制台报警告
在这里插入图片

这时候我手动缩放一下页面又会变正常
我猜测是刷新了页面,组件适配时还没有获取到dom

在更改多方无果后,我去dataV官网看到了这个
在这里插入图片描述
因为我是只有在刷新后才会出现样式错乱问题,所以只监听了刷新操作,核心代码如下:

<template><div class="wraps"><div class="title">123123</div><div class="page_banner"><dv-scroll-boardclass="banner":config="config"style="width: 99%; height: 95%; font-size: 16px !important":key="key"/></div></div>
</template><script>
import { findActivities } from '@/api/index'export default {data() {return {key:11,//在dataV上绑定key值ww: [],config: {header: ['name1', 'name2'],data: [],rowNum: 4,headerBGC: '#1e5791',headerHeight: 40,waitTime: '5000',carousel: 'page',align: ['center', 'center'],oddRowBGC: '#0a1651',evenRowBGC: ''},times: null}},mounted() {this.pieOutlineFunc()this.getData()this.times = setInterval(() => {this.getData()}, 1000 * 360)},destroyed() {//销毁clearInterval(this.times)},methods: {async getData() {const res = await findActivities().then(res=>{return res.data.data})const Data = res.map((item) => {return [item.name, item.date.split(' ')[0]]})this.$nextTick(() => {this.config.data = Datathis.config = { ...this.config }})},pieOutlineFunc() {var _this = thiswindow.addEventListener('pageshow', function (e) {_this.$nextTick(() => {_this.key++})})}}
}
</script>
<style lang="less" scoped>
.wraps {width: 100%;height: 100%;
}
.title {width: 100%;height: 11%;font-size: 18px;color: white;display: flex;justify-content: center;align-items: center;background: url('@/assets/image/borderTitle.png');background-repeat: no-repeat;background-size: 100.5% 100%;
}
.page_banner {width: 99.5%;height: 84%;margin: 0 auto;padding-top: 3%;
}
.banner {margin: 0 auto;font-size: 16px;/deep/.header {font-size: 16px !important;}/deep/.rows .row-item {font-size: 15px !important;}
}
</style>

这篇关于Vue项目引用dataV组件,部署后出现样式错乱Component width or height is 0px,rendering abnormality may occur的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/832646

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.