前言
最近在做vue项目,基于DataV做轮播效果时,遇到数据从后台加载后无法动态添加css样式渲染的问题,然后查询资料后解决了,记录一下。
DataV具体介绍,请前往:Vue大屏可视化DataV组件库
效果
实现步骤:
html加入轮播组件:
<dv-scroll-board :config="config" style="width: 100%" />
js如下:
import { listDataShow } from "@/api/buildscreen/datashow";
export default {
name: "screen-data-show",
components: {},
props: {},
computed: {},
watch: {},
data() {
return {
config: {
header: [],
data: [],
// index: true,
columnWidth: [500, 500],
align: ["center"],
rowNum: 6,
headerBGC: "#1981f6",
headerHeight: 45,
oddRowBGC: "transparent",
evenRowBGC: "transparent",
//waitTime: 1500, // 轮播时间间隔(ms)
},
};
},
created() {
this.getList();
},
mounted() {},
methods: {
/** 查询项目列表 */
getList() {
this.loading = true;
listDataShow(this.queryParams).then((response) => {
let arrList = [];
for (let rows of response.data) {
if (rows.color == "red") {
arrList.push(
'<div class="roll-item red">' + rows.projectName + "</div>"
);
} else if (rows.color == "yellow") {
arrList.push(
'<div class="roll-item yellow">' + rows.projectName + "</div>"
);
} else if (rows.color == "blue") {
//把所有蓝色改成绿色
arrList.push(
'<div class="roll-item green">' + rows.projectName + "</div>"
);
}else{
arrList.push(
'<div class="roll-item blue">' + rows.projectName + "</div>"
);
}
}
if(response.data.length%2!=0){
arrList.push(
'<div class="roll-item" style="display:none"></div>'
);
}
let resultList = []; //拆分数组
for (var i = 0; i < arrList.length; i += 2) {
resultList.push(arrList.slice(i, i + 2));
}
this.config.data = resultList;
this.config = { ...this.config }; //必不可少,不可省略
});
},
},
};
</script>
注意:因为是js动态加载css,如下图代码所示:
arrList.push(
'<div class="roll-item red">ddd</div>'
);
因此写css时要注意不要写在<style lang="scss" scoped>
下,要写在<style >
下才会生效。
<style >
.roll-item {
width: 100%;
height: 95%;
color: #ffffff;
font-weight: bold;
font-size: 16px;
text-align: center;
border-radius: 3px;
}
.red {
background-color: #f56c6c;
border: 1px solid #f56c6c;
}
.blue {
background-color: #518cde;
border: 1px solid #518cde;
}
.green {
background-color: #83e63c;
border: 1px solid #83e63c;
}
.yellow {
box-shadow: -10px 0px 15px #e6a23c inset,
0px -10px 15px #e6a23c inset,
10px 0px 15px #e6a23c inset,
0px 10px 15px #e6a23c inset;
border: 1px solid #e6a23c;
}
</style>
<style lang="scss" scoped>
.header-center-decoration {
width: 40%;
height: 60px;
margin-top: 25px;
margin-left: -5%;
position:absolute
}
#scroll-board {
width: 100%;
box-sizing: border-box;
height: 100%;
overflow: hidden;
}
</style>