如何为Vue.js组件创建自定义样式属性
我正在尝试使用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()函数的插件。但我不想使用组件函数。
回答 1
Stack Overflow用户
发布于 2019-07-08 09:39:54
您可以使用v-bind:style计算内联样式，也可以只使用:style。它将映射给定的对象以更正CSS样式。使用camelCase，即backgroundColor而不是background-color。
如果您想要全局样式，可以使用mounted生命周期挂钩将样式标记注入head。您应该在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>
https://stackoverflow.com/questions/56932013
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号