如何为 Vue.js 组件创建自定义样式属性
Posted
技术标签:
【中文标题】如何为 Vue.js 组件创建自定义样式属性【英文标题】：How to create a custom style property for a Vue.js component 【发布时间】：2019-11-17 19:07:54 【问题描述】：我正在尝试使用 Vue.js 而无需构建步骤。但是 Vue 没有 style 属性。
所以我想在我的 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】：您可以使用v-bind:style 或简称:style 来使用计算的内联样式。它将给定对象映射到正确的 CSS 样式。使用驼峰式，即backgroundColor 而不是background-color。
如果你想要全局 样式，你可以使用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>【讨论】：
我在寻找类似 SFC 样式标签但没有构建步骤的东西 没错，我能做到。但是，如果样式像我的示例那样位于自定义“样式”属性中会更好。 制作了一个新的sn-p来支持你想要的 哇，非常感谢@Phillip！真的很管用！以上是关于如何为 Vue.js 组件创建自定义样式属性的主要内容，如果未能解决你的问题，请参考以下文章
在定义自定义选项组件时，如何为react-select应用默认样式？
如何创建从 vue.js 实例到自定义原生 Web 组件的双向绑定？