Отзывчивый реквизит в компоненте Vue

К сожалению, то, что вы пытаетесь сделать, нетривиально. Это связано с тем, что встроенные теги стиля не могут принимать медиа-запросы.

В спецификации говорится:

Значение атрибута style должно соответствовать синтаксису содержимого блока объявления 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. Это вызовет ошибку, например:

Шаблоны должны отвечать только за отображение состояния в пользовательский интерфейс. Избегайте размещения тегов с побочными эффектами в ваших шаблонах, например, поскольку они не будут анализироваться.

Поскольку ошибка описывает, vue предназначен для отображения состояния пользовательского интерфейса. Использование тегов style в шаблоне запрещено, так как это может вызвать утечку информации во внешний мир.

Хотя вы не можете декларативно стили в шаблоне, мы можем использовать немного JS в смонтированном хуке компонента для добавления целевых и динамических стилей.

Сначала нам нужно ограничить этот элемент динамическими стилями. Мы можем использовать внутренний идентификатор созданного компонента this._uid, прикрепив его к области видимости 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 - это то, что мы теперь будем использовать при создании тега стиля при монтировании. При монтировании мы создаем узел стиля и добавляем его к голове. Назначение узлов виртуальной машине для ссылок.

Используя ссылки в виртуальной машине, мы можем наблюдать за изменениями в вычисляемом обновлении узла стиля.

Не забудьте очистить перед уничтожением компонента, удалив узел стиля.

{
    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/

Вы также можете попробовать модуль, описанный здесь: https://alligator.io/vuejs/vue-responsive-components/, который называется vue-response-components.

Он позволяет компоненту изменять свой CSS в зависимости от его собственной ширины (а не от всей ширины браузера).