基于媒体查询的vue绑定值答案

【问题标题】：vue binding value based on media query基于媒体查询的vue绑定值
【发布时间】：2018-04-18 23:39:08
【问题描述】：

carousel-3d(:display="3", :width="150", :height="150")

我想根据媒体查询设置属性绑定

例如

当屏幕宽度 > 960px 时显示应该变为 5

【问题讨论】：

github.com/AlexandreBonaventure/vue-mq

标签： css vue.js

【解决方案1】：

我自己很难找到任何仅使用 Vuejs 的解决方案，或者如果有的话，已经太复杂了。涉及许多不必要的工作，这些工作可以在 CSS 中整齐地完成。

该解决方案是styled components 或事实上任何CSS in JS 解决方案来轻松处理此类事情。

例如，在样式化组件中，您的样式是写在 ES6 模板文字中的。

import styled from 'styled-components';
import breakpoint from '../utils/breakpoint.js';

const YourStyledComponent = styled.div`
    width: calc(100% - 30px);
    @media (min-width: ${breakpoint.SM}px) {
        // Your media styles
    }
`;

然后在您的 Vue 组件中将其用作普通组件。你也可以传递它的道具。请阅读更多相关信息 - Vue-styled-components。

这样做，您只需使用 CSS 来设置所有内容的样式。考虑到性能，这对于前端开发来说是必须的。我认为自从我们停止向 Javascript 中添加与样式或处理布局相关的事件监听器以来已经有很长时间了。

【讨论】：

【解决方案2】：

您可以尝试将 display 值绑定到组件属性：

<carousel-3d :display="display">

...然后在调整窗口大小时更新该属性：

...

data() {
  return {
    display: 3
  }
},

methods: {
  onResize() {
    if (window.innerWidth > 960) {
      this.display = 5
    } else {
      this.display = 3
    }
  }
},

created() {
  window.addEventListener('resize', this.onResize)
},

beforeDestroy() {
  window.removeEventListener('resize', this.onResize)
},

...

【讨论】：

当然。那是一种方式。但是用 javascript 来做 CSS 应该做的事情，是不是不利于性能？您是否偶然发现了与 Vuejs 一起使用的更好的东西，因为我有同样的问题。
另外，您正在直接在 DOM 上添加事件。 Vue 或 React 适用于 Virtual DOM 的概念。