Vue项目改变div大小 实现图标大小选择功能
使用document.getElementsByClassName() 改变div大小我想实现一种选择图标大小,然后改变图标的size,项目:Vue+elment-ui:HTML<el-dropdown @command="chooseSize"><el-button size="mini">图标大小...
·
vue项目 实现 自由选择 系统图标大小
我想实现一种选择图标大小,然后改变图标的size,项目:Vue+elment-ui:
HTML
<el-dropdown @command="chooseSize">
<el-button size="mini">
图标大小
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="small">小图标</el-dropdown-item>
<el-dropdown-item command="medium">中图标</el-dropdown-item>
<el-dropdown-item command="big">大图标</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
JS
chooseSize(command) {
var document_cards = document.getElementsByClassName("document_card");
var cardImages = document.getElementsByClassName("cardImage");
for (var i = 0; i < document_cards.length; i++) {
if (command == "small") {
document_cards[i].style.width = 101 + "px";
document_cards[i].style.height = 140 + "px";
cardImages[i].style.width = 101 + "px";
cardImages[i].style.height = 101 + "px";
} else if (command == "medium") {
document_cards[i].style.width = 151 + "px";
document_cards[i].style.height = 195 + "px";
cardImages[i].style.width = 150 + "px";
cardImages[i].style.height = 150 + "px";
} else if (command == "big") {
document_cards[i].style.width = 202.5 + "px";
document_cards[i].style.height = 260 + "px";
cardImages[i].style.width = 202 + "px";
cardImages[i].style.height = 202 + "px";
}
}
}
CSS
document_card {
width: 150px;
height: 195px;
max-height: 260px;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.cardImage {
width: 150px;
height: 150px;
display: block;
margin: 0 auto;
}
现实结果:
虽然点击后能后改变大小,但是跳转到其他页面后再回来就恢复原来大小(中等)。
而且改变的卡片数量一直不固定,都是之前有的,而不是接下来要渲染的。
不管如何改变函数的执行顺序都不能解决这个问题
经过和同学一晚上的讨论研究,觉得是js异步和渲染虚拟dom的问题,具体没有深究,下面写出我的解决方案:
用v-bind:style解决 css样式渲染错误
HTML:(没变)
<el-dropdown @command="chooseSize">
<el-button size="mini">
图标大小
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="small">小图标</el-dropdown-item>
<el-dropdown-item command="medium">中图标</el-dropdown-item>
<el-dropdown-item command="big">大图标</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
目标div1
class="document_card"
:style="styleObject"
目标div2
class="cardImage"
:style="styleCardImage"
JS:在data()中添加样式数据
export default {
name: "Doc",
data() {
return {
//目标div1
styleCardImages: {
width: "150px",
height: "150px"
},
//目标div2
styleObject: {
width: "151px",
height: "195px"
}
};
},
修改之前的chooseSize(command)函数,如下 :
chooseSize(command) {
this.cardSize = command;
if (this.cardSize === "small") {
this.styleObject.width = "101px";
this.styleObject.height = "140px";
this.styleCardImages.width = "101px";
this.styleCardImages.height = "101px";
} else if (this.cardSize === "medium") {
this.styleObject.width = "151px";
this.styleObject.height = "195px";
this.styleCardImages.width = "150px";
this.styleCardImages.height = "150px";
} else if (this.cardSize === "big") {
this.styleObject.width = "202.5px";
this.styleObject.height = "260px";
this.styleCardImages.width = "202px";
this.styleCardImages.height = "202px";
}
}
最终结果:
我的目标有两个div,如果你要用的话,删掉一些代码就行。
更多推荐
已为社区贡献2条内容
所有评论(0)