vue如何获取页面宽度-前端问答-PHP中文网

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

方法一：使用 window 对象的 innerWidth 属性

在 JavaScript 中，可以通过 window 对象中的 innerWidth 属性来获取浏览器窗口的宽度。由于 Vue.js 是构建在 JavaScript 上的，因此可以使用以下代码片段轻松获取页面宽度：

let width = window.innerWidth;

登录后复制

该代码片段会将当前窗口的宽度赋值给 width 变量。但是，当窗口大小发生变化时，该变量的值不会自动更新。因此，如果需要在窗口大小变化时更新宽度值，可以使用以下代码：

window.addEventListener('resize', () => {
  let width = window.innerWidth;
  // 在此处操作 pageWidth 变量
});

登录后复制

以上代码使用了 resize 事件监听器，在窗口大小变化时自动更新宽度值。但是，如果在 Vue.js 应用程序中使用该方法，每次更新都需要使用事件监听器来获取宽度值，这会导致代码复杂度增加，效率降低。

方法二：使用 Vue.js 的计算属性

Vue.js 中的计算属性是一种特殊的属性，它可以根据其他数据的变化自动计算新值。因此，可以将页面宽度作为一个计算属性，以便在页面宽度变化时自动更新相关的组件。例如：

登录后复制

在上述代码中，使用了 pageWidth 计算属性来获取页面宽度，然后将其应用到组件的 style 属性上。由于计算属性的特性，每当窗口大小发生变化时，pageWidth 属性都会自动更新，从而保证组件的样式始终与窗口宽度保持一致。

方法三：使用 Vue.js 的插件

如果应用程序中多个组件都需要获取页面宽度，那么在每个组件中写计算属性可能会变得复杂而繁琐。为了避免出现这种情况，可以编写一个 Vue.js 插件来管理页面宽度。以下是一个简单的插件示例：

const WidthPlugin = {
  install(Vue) {
    const getScreenWidth = function() {
      return window.innerWidth;
    Vue.prototype.$pageWidth = getScreenWidth;
export default WidthPlugin;

登录后复制

该插件在 Vue.js 中注册了一个名为 $pageWidth 的原型方法，该方法返回当前页面的宽度。要在应用程序中使用该插件，只需在 main.js 中将其引入并注册即可：

import Vue from 'vue';
import WidthPlugin from './plugins/WidthPlugin';
Vue.use(WidthPlugin);

登录后复制

在组件中，使用 $pageWidth 方法即可获取页面宽度，并在窗口大小变化时自动更新。例如：