Vue + JS实现动态设定分屏数量功能

最新推荐文章于 2024-06-25 09:57:50 发布

骑士出风头

最新推荐文章于 2024-06-25 09:57:50 发布

阅读量764

点赞数 1

文章标签： vue.js javascript css3

本文链接：https://blog.csdn.net/liulinnnnnnnnnn/article/details/108213706

版权

前言

动态设定屏幕行数M和列数N，将屏幕分成M * N等分

前言

唯一的难点是如何在js中动态给div的属性赋值，这个动态是指通过查找后台数据计算得出结果返回到style中，效果如图：

实现方法

1.HTML

代码如下（示例）：

<iframe v-for="item in dataList" :key="item" :style="position(item.sort)" :src="item.src" scrolling="no"></iframe>

2.JS

代码如下：

代码如下（示例）：

position (sort) {

// m 每行个数 n 每列个数 sort 为该元素下标

var x = ((sort) % this.m) + 1 // 在每行中排在第几个

var y = ((sort + 1) - x) / this.m + 1 // 排在第几列

var left = ((1 / (2 * this.m)) * ((2 * x) - 1) - 0.5) // left值

var top = ((1 / (2 * this.n)) * ((2 * y) - 1) - 0.5) // top值

var leftStr = Number(left*100).toFixed(2)

leftStr+="%" // 转换为百分比

var topStr=Number(top*100).toFixed(2)

topStr+="%" // 转换为百分比

this.$set(list[sort], 'url', 'www.baidu.com') // 给每个方块加上跳转路径

return 'background-color: #000;transform: scaleX(calc(1 /' + this.m + ')) scaleY(calc(1 /' + this.n + '));top:' + topStr + ';left:' + leftStr + ';' // 拼成CSS样式格式
}