Question

我正在尝试使用Vue.js，而无需构建步骤。但是Vue没有样式属性。

所以我有一个想法，在我的Vue组件实例上创建一个自定义的“样式”属性，然后在创建或安装该组件时将该属性的内容注入DOM中。

唯一的问题是我不知道该怎么做。（我看了插件文档）。我将需要创建某种类型的插件，该插件将首先检查“ style”属性是否存在，然后将其插入到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时，应采用“样式”属性的值，并将其添加到DOM中，如下所示。任何想法将不胜感激。

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

这是一个使用Vue.component（）函数的插件。但是我不想使用组件函数。

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

Answer 1

您可以使用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>

如何为Vue.js组件创建自定义样式属性

1 个答案: