Vue 實時獲取螢幕寬高
阿新 • • 發佈:2022-12-07
export default { name: 'page-index', data(){ return{ windowWidth: document.documentElement.clientWidth, //實時螢幕寬度 windowHeight: document.documentElement.clientHeight, //實時螢幕高度 } }, methods: { }, // <!--在watch中監聽實時寬高--> watch: { windowHeight (val) { let that = this; console.log("實時螢幕高度:",val, that.windowHeight ); }, windowWidth (val) { let that = this; console.log("實時螢幕寬度:",val, that.windowHeight ); } }, mounted() { var that = this; // <!--把window.onresize事件掛在到mounted函式上--> window.onresize = () => { return (() => { window.fullHeight = document.documentElement.clientHeight; window.fullWidth = document.documentElement.clientWidth; that.windowHeight = window.fullHeight; // 高 that.windowWidth = window.fullWidth; // 寬 })() }; }, }