中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
Hml
<div class="container"> <div class="box"> <div style="width: {{ widthVal }};height: {{ heightVal }}; flex-direction: row; justify-content: space-around; align-items: center; border: 2px; background-color: aquamarine; "> <button style="width: 80px;height: 30px;" onclick="enlarge">放大</button> <button style="width: 80px;height: 30px;" onclick="decrease">缩小</button> </div> </div> </div>
Css
.container { flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } .box{ flex-direction: column; justify-content: center; align-items: center; width: 400px; height: 400px; }
Js
import prompt from '@system.prompt'; let width = 200; let height = 200; export default { data: { widthVal:width, heightVal:height, }, enlarge(){ if (width < 400) { width +=10; height +=10; this.widthVal = width this.heightVal = height }else { prompt.showToast({message:"已经达到最大"}) } }, decrease(){ if (width > 180) { width -=10; height -=10; this.widthVal = width this.heightVal = height }else{ prompt.showToast({message:"不能再缩小了"}) } }, }
效果展示:
微信扫码分享