HarmonyOS应用开发-放大与缩小效果展现

Hml

    

        

            放大
            缩小
        
    

 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:"不能再缩小了"})

        }
    },
}

效果展示：