需求
最近客户提出:界面太小,希望可以放大缩小界面的功能。虽然浏览器的Ctrl+加号与Ctrl+减号可以实现,但挡不住用户就是不懂,没办法只能添加该功能。
效果图
默认大小
缩小
放大
代码
<template>
<div>
<div>
<h3 class="content-title">界面缩放</h3>
<div class="content-item-one">缩放比例:</div>
<div class="content-item-two">
<el-input-number v-model="scaling" :step="25" :min="50" :max="300" size="mini"
@change="handleChange"></el-input-number> %
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
scaling: null // 缩放比例
}
},
created() {
this.getScaling()
},
methods: {
// 获取缩放比例
getScaling() {
this.scaling = Math.floor(window.devicePixelRatio * 100)
},
// 设置缩放比例
handleChange(val) {
document.body.style.zoom = val / 100
}
}
}
</script>