Question

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

我想基于媒体查询设置属性绑定

e.g。

当屏幕宽度> gt时，

显示应变为5 960像素

Answer 1

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

<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)
},

...

Answer 2

我自己一个人努力寻找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来样式化所有内容。考虑到性能，这是前端开发所必需的。我认为自从我们停止将eventListeners添加到与样式或处理布局相关的Javascript以来已有很长时间了。

基于媒体查询的vue绑定值

2 个答案: