応答小道具

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> 

私がやりたい何慣れる応答小道具のリストを作成することですサイト訪問者のデバイスまたは画面サイズに応じて異なります。例えば

、私は、ユーザーが別のデバイスサイズの異なる画像のURLを入力しますとスタイルattrが画面/サイズに応じて適切なURLを使用するなどsrc-sm、src-md、src-lg、などの小道具のリストを想像してみてください。

これは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を使用して、ターゲットスタイルと動的スタイルを追加できます。

まず、動的スタイルをこの要素に制約する必要があります。スコープにCSSを添付して、作成したコンポーネントthis._uidの内部IDを使用できます。

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

（これはそう変更することができる内部APIであることに注意してください）次の部分は、後のスタイルブロックに注入するために、計算されたプロパティにスタイルを生成することです。この計算されたプロパティーを展開して、プロパティーを条件付きで割り当てることができます。注：プロパティは動的値のみにしてください。

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/