响应道具

Question

我有一个道具在结合到:style这样的Vue的组件调用src：

<template> 
    <section :class="color" class="hero" :style="{ backgroundImage: src && 'url(' + src + ')' }"> 
    <slot></slot> 
    </section> 
</template> 

<script> 
    export default { 
    props: ['src', 'color'] 
    } 
</script> 

我想要做的是创建习惯响应道具列表取决于网站访问者的设备或屏幕大小。

例如，我想象的道具列表像src-sm，src-md，src-lg等用户将不同的设备尺寸输入不同的图像URL和作风ATTR将使用根据屏幕/尺寸相应的URL。

这是VueJS中的可能性。如果是这样，任何想法如何？

谢谢。

Answer 1

不幸的是，你试图做的不是微不足道的。这是因为内联样式标签无法接受媒体查询。

的spec宣告： 该解决方案是：

风格属性的值必须的CSS声明块的内容的语法

---

溶液1匹配最简单的，也许不完全是你要找的东西。

它的工作原理包括img元素，并显示通过CSS隐藏它们。

<template> 
    <div> 
     <img class="image--sm" :src="src.sm" /> 
     <img class="image--md" :src="src.md" /> 
     <img class="image--lg" :src="src.lg" /> 
    </div> 
</template> 

<script> 
    export default { 
     props: { 
      src: Object 
     } 
    } 
</script> 

<style> 
    .image--md, 
    .image--lg { 
     display: none; 
    } 

    @media (min-width: 400px) { 
     .image--sm { 
      display: none; 
     } 

     .image--md { 
      display: block; 
     } 
    } 

    @media (min-width: 600px) { 
     .image--md { 
      display: none; 
     } 

     .image--lg { 
      display: block; 
     } 
    } 
</style> 

实施例：https://jsfiddle.net/h3c5og08/1/

---

解决方案2：

图片代码可能不是你正在努力实现期望的效果。此解决方案在头部创建一个样式标签，并注入CSS内容以更改背景图像。

Vue模板中不能有样式标签。它会抛出一个错误，如：

模板只应负责将状态映射到UI。避免在模板中放置带副作用的标签，例如，因为它们不会被解析。

由于错误描述vue设计的地图状态UI。禁止在模板中使用style标签，因为您可能导致泄漏到外部世界。

尽管您无法在模板中声明样式，但我们可以在组件的装入挂钩中使用一些JS来添加目标样式和动态样式。

首先，我们需要将动态样式约束到这个元素。我们可以使用创建的组件this._uid的内部ID，附加到范围的CSS。 （注意，这是内部API所以可以随时更改）

<template> 
    <div class="image" :data-style-scope="_uid"> 
    </div> 
</template> 

接下来的部分是产生在计算属性的样式，到后来注入的样式块。您可以扩展此计算属性，以条件分配属性等。注意：仅将属性保留为动态值。

css() { 
    const selector = `.image[data-style-scope="${this._uid}"]` 
    const img = val => `${selector} { background-image: url("${val}"); }` 
    const sm = img(this.sm) 
    const md = img(this.md) 
    const lg = img(this.lg) 

    return ` 
     ${sm} 
     @media (min-width: 200px) { ${md} } 
     @media (min-width: 300px) { ${lg} } 
    `  
} 

从css计算财产这生成的字符串就是创建在挂载的风格标签，当我们将现在使用。在装载时，我们创建一个样式节点并追加到头部。将节点分配给vm以供参考。

使用vm中的引用我们可以观察计算更新样式节点的更改。

请记住在清除组件之前进行清理，删除样式节点。

{ 
    data() { 
     return { 
      // Reference data properties 
      style: null, 
      styleRef: null 
     } 
    }, 

    mounted() { 
     // Create style node 
     let style = document.createElement('style') 
     style.type = "text/css" 
     style.appendChild(document.createTextNode('')) 

     // Assign references on vm 
     this.styleRef = style 
     this.style = style.childNodes[0] 

     // Assign css the the style node 
     this.style.textContent = this.css 

     // Append to the head 
     document.head.appendChild(style) 
    }, 

    beforeDestroy() { 
     // Remove the style node from the head 
     this.style.parentElement.removeChild(this.style) 
    }, 

    computed: { 
     css() { 
      // ... 
     } 
    }, 

    watch: { 
     css (value) { 
      // On css value change update style content 
      this.style.textContent = this.css 
     } 
    } 
} 

工作实例：https://jsfiddle.net/bLkc51Lz/4/