I'm working on a project to build my own CSS styleguide with Vue, and need to get a clean and with the fewest code as possible to enter each CSS elements.
(我正在开发一个项目，以使用Vue构建自己的CSS样式指南，并且需要获得简洁且最少的代码来输入每个CSS元素。)
Here is the component example which should later be the parent, so where we enter our example like in KSS or Documentcss.
(这是组件示例，以后应作为父示例，因此我们在此处输入示例，例如在KSS或Documentcss中。)
<template>
<div class="doc_container">
<!-- Component Title -->
<title-component>Button</title-component>
<!-- Description Title -->
<title-secondary>Button description</title-secondary>
<!-- Description Text -->
<description>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Bibendum neque egestas congue
quisque egestas diam in arcu cursus.
</description>
<!-- Creation of the example for the standard use
:title = "'Title of your example'"
:description ="'Description of your default example'"
-->
<default-example
></default-example>
<!-- If you have several modifiers, repeat all the elements below with the last comment line -->
<!-- ------------------------------------------------------------ -->
<!-- Creation of the example(s) with the modifier(s)
:title = "'Title of your example'"
:description = "'Description of your example(s)'"
:modifierClass = "'Change the first word to precise what kind of modifierClass this class is about'"
:modifier = "'Refer to the correct object in your data so the loop can iterate through it and build your example'"
-->
<builder
:title="'Example'"
:description="'Color Modifier.'"
:modifierClass="'Color ModifierClass'"
:modifier=this.modifiers1></builder>
<!------------------------------------------------ End of Builder ------------------------------------------------->
<!-- Creation of the example with the modifiers
:title: Title of your example
:description: Description of your example
:modifierClass: Change the first word to precise what kind of modifierClass this class is about
:modifier: Refer to the correct object in your data so the loop can iterate through it and build your example
-->
<builder
:title="'Example'"
:description="'Size Modifier.'"
:modifierClass="'Size ModifierClass'"
:modifier=this.modifiers2></builder>
<!------------------------------------------------ End of Builder ------------------------------------------------->
</div>
</template>
<script>
import addClass from '../../helpers.js'
import builder from '../doc/Builder.vue'
import defaultExample from '../doc/StaticBuilder.vue'
import titleComponent from '../doc/ComponentTitle.vue'
import titleSecondary from '../doc/SecondaryTitle.vue'
// import subTitle from '../doc/SubTitle.vue'
import description from '../doc/Description.vue'
export default {
name: 'appButton3',
components: {
builder,
defaultExample,
titleComponent,
titleSecondary,
// subTitle,
description,
},
data: function () {
return {
core: {
/* Tag element used to create your examples */
html: `
<button></button>
`,
/* Standard class if there is one */
class: 'doc_button',
/* HTML code that will be displayed and highlighted, so the user can see the code to use */
example: `
<button class="doc_button ModifierClass">Default</button>
`,
},
/* Modifiers objects, copy and paste all the modifiers1 object if you need another one, and increment the number by one to have modifiers2.
There is no limit to the number of modifiers objects you can have */
modifiers1: {
block1: {
/* Modifier Class */
class: 'doc_button--green',
/* Description of the usage of the class */
description: 'Primary Button'
},
block2: {
class: 'doc_button--orange',
description: 'Secondary Button'
},
block3: {
class: 'doc_button--red',
description: 'Tertiary Button'
}
},
modifiers2: {
block1: {
class: 'doc_button--small',
description: 'Small Button'
},
block2: {
class: 'doc_button--big',
description: 'Big Button'
}
}
}
},
}
</script>
<style lang="scss">
.doc_button {
border-radius: 100%;
width: 6rem;
height: 6rem;
background-color: #DDD;
&--green {
background-color: green;
}
&--orange {
background-color: orange;
}
&--red {
background-color: red;
}
&--small {
width: 4rem;
height: 4rem;
}
&--big {
width: 8rem;
height: 8rem;
}
}
</style>
Here is the builder, the component which automatically creates the example with your modifier classes:
(这是构建器，它是使用修饰符类自动创建示例的组件：)
<template>
<div>
<div v-if="modifier">
<h2 class="doc_title">
{{title}}
</h2>
<p class="doc_description">
{{description}}
</p>
<h3 class="doc_subtitle">
{{modifierClass}}
</h3>
<ul class="doc_list doc_list--parameters" v-for="(block) in modifier" :key="block">
<li class="doc_list-text"><p>{{block.class}}</p> : <p>{{block.description}}</p></li>
</ul>
<div class="doc_row">
<div class="doc_list-container">
<ul class="doc_list" v-for="(block) in parentData.modifiers1" :key="block">
<div class="doc_list-element"
v-html="parentData.core.html"
:class="[parentData.core.class, `${block.class}`]">
</div>
<p class="doc_element-text"> {{block.class}} </p>
</ul>
</div>
</div>
<pre class="doc_pre">
<code class="language-html doc_code">
<div v-text="parentData.core.html">
</div>
</code>
</pre>
</div>
</div>
</template>
<script>
export default {
name: 'builder',
props: {
modifier: {
type: Object
},
title: {
type: String
},
description: {
type: String
},
modifierClass: {
type: String,
}
},
data: function () {
return {
parentData: this.$parent.$data
}
},
}
</script>
<style lang="scss">
</style>
My problem is that the classes doc_button and the modifiers (doc_button--green,...) are added to the Div containing the button element added throught v-html.
(我的问题是将doc_button类和修饰符（doc_button--green，...）添加到Div中，该Div包含通过v-html添加的button元素。)
But I need these classes to be directly added to the button element.
(但是我需要将这些类直接添加到button元素。)
I precise that my styles are already not scoped.(我声明我的样式已经没有范围。)
Here is the code where I have the v-html and in which I want to add the classes to the child which are :(这是我具有v-html的代码，并且我要在其中添加以下类的类：)
<div class="doc_list-element"
v-html="parentData.core.html"
:class="[parentData.core.class, `${block.class}`]">
</div>
data: function () {
return {
core: {
/* Tag element used to create your examples */
html: `
<button></button>
Should I add use vanillaJS to add the classes, and put that function in mounted?
(我是否应该添加使用vanillaJS添加类，然后将该函数放入mount中？)
document.getElementsByClassName('doc_button').childNodes.getElement.classList.add('doc_button')
It didn't work when I tried putting it in mounted hook.
(当我尝试将其放入已安装的挂钩中时，它不起作用。)
Thanks for your help.
(谢谢你的帮助。)
ask by Grégory Huyghe translate from so
