Как создать собственное свойство стиля для компонента Vue.js - PullRequest
Новая
       20

Как создать собственное свойство стиля для компонента Vue.js

1 голос
/ 08 июля 2019

Я пытаюсь использовать Vue.js без необходимости сборки.Но у Vue нет свойства стиля.

Поэтому у меня возникла идея создать собственное свойство "стиля" в моем экземпляре компонента Vue, а затем внедрить содержимое этого свойства в DOM при создании компонента.или смонтирован.

Единственная проблема в том, что я не могу понять, как это сделать.(Я посмотрел на плагины документы).Мне нужно создать какой-нибудь плагин, который сначала проверит, существует ли свойство «стиля», а затем возьмет его и вставит в DOM.Также я не хочу использовать функцию Vue.component (), потому что я хочу импортировать и экспортировать, используя ES6.Вот как будет выглядеть результат: 

// MyComponent.js
export default {
  template: `<div>My component</div>`,

  style: `
    .hello {
      background: #ccc;
    }
  `,
}

// App.js
import MyComponent from './MyComponent.js'

new Vue({
  el: '#app',

  components: {
    MyComponent
  }
})

Когда MyComponent создан, он должен принять значение свойства "style" и добавить его в DOM следующим образом.Любые идеи приветствуются. 

$('body').append('<style>' + STYLE + '</style>')

Вот плагин, использующий функцию Vue.component ().Но я не хочу использовать функцию компонента.

https://github.com/NxtChg/pieces/tree/master/js/vue/vue-css

1 Ответ

1 голос
/ 08 июля 2019

Вы можете использовать вычисленные встроенные стили, используя v-bind:style или просто :style для краткости. Он сопоставит данный объект с правильными стилями CSS. Используйте camelCase, т.е. backgroundColor вместо background-color.

Если вам нужен стиль global , вы можете вставить тег стиля в голову, используя хук жизненного цикла mounted. Вы должны удалить его снова в destroyed.

РЕДАКТИРОВАТЬ: я неправильно понял ваш пост, обновленный ответ 

var app = new Vue({
  el: '#app',
  data: {
    subject: 'World'
  },
  computed: {
    subjectStyle() {
      return {
        color: 'yellow',
        backgroundColor: 'rebeccapurple',
      };
    }
  },
  mounted() {
    const css = `
      body {
        background-color: #eee;
        font-family: 'Comic Sans MS', sans-serif;
      }
    `;
    this.styleTag = document.createElement('style');
    this.styleTag.appendChild(document.createTextNode(css));
    document.head.appendChild(this.styleTag);
  },
  destroyed() {
    this.styleTag.remove();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  Hello, <span :style="subjectStyle">{{ subject }}</span>!
</div>

Ниже приведен код для плагина, который позволит каждому экземпляру Vue определять стиль. Стиль будет введен в <head> и снова удален после уничтожения компонента. 

const StylePlugin = {
  install(Vue) {
    Vue.mixin({
      mounted() {
        const css = this.$options.style;
        if (!css) return;
        this.$styleTag = document.createElement('style');
        this.$styleTag.appendChild(document.createTextNode(css));
        document.head.appendChild(this.$styleTag);
      },
      destroyed() {
        if (this.$styleTag) {
          this.$styleTag.remove();
        }
      }
    });
  }
};

Vue.use(StylePlugin);

var app = new Vue({
  el: '#app',
  data: {
    subject: 'World'
  },
  style: `
    body {
      background-color: rebeccapurple;
      color: white;
      font-family: 'Comic Sans MS', sans-serif;
    }
  `,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  Hello, World
</div>
...