这是我第一次制作一个npm包,我正在制作包的演示,我想举一个组件用法的例子。
当我将组件使用放在pre和code标签中时,就像这样
它显示了这个错误
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
这是我的代码(App.vue):
<template>
<pre>
<code>
<template>
<vlider
:id="'first'"
:vlider-data="slider"
:theme="'theme-dark'"
v-model="inputRange"
@click="vliderClick()"
>
<template> slot="bullet" slot-scope="bullet"
<label>{{ bullet.data.label }}</label>
<i
class="em"
:class="[`em-${bullet.data.extras.icon}`]"
></i>
<a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
</template>
</vlider>
</template>
<script>
import Vlider from "vlider";
export default {
name: "app",
components: {
Vlider
},
data() {
return {
inputRange: null,
slider: [
{label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
{label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
{label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
{label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
{label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
{label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
]
};
},
watch: {
inputRange() {
console.log(this.inputRange)
}
},
methods: {
vliderClick() {
console.log(`clicked`)
}
}
};
</script>
<style>
import "vlider/src/sass/vlider.scss"
</style>
</code>
</pre>
</template>
<script>
import Vlider from "vlider";
...
</script>
我希望它能像HTML中的普通标签一样工作。我已经尝试下载一些代码块npm包,它仍然不起作用,我需要你们帮助和建议,谢谢你的帮助
用户v-html
docs并且不要忘记在每次换行后使用\
继续字符串并忽略''
作为文本上下文由\'
所以应该是:
<div v-html="example">
<pre>
...
</pre>
</div>
要么
<div>
{{example}}
</div>
和example
你在data()中定义它
v-pre指令应该告诉Vue不编译该模板的那一部分,但如果Vue的内容包括(例如)一个<script>
标记,Vue似乎仍会抛出相同的警告。在任何情况下,它都不会将其显示为原始HTML的内容。你想把它拉成一个数据变量,而不是在这里使用v-html
(它与你想要的相反):
new Vue({
el: '#app',
data() {
return {
codeSample: `
<template>
<vlider
:id="'first'"
:vlider-data="slider"
:theme="'theme-dark'"
v-model="inputRange"
@click="vliderClick()"
>
<template> slot="bullet" slot-scope="bullet"
<label>{{ bullet.data.label }}</label>
<i
class="em"
:class="['em-\${bullet.data.extras.icon}']"
></i>
<a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
</template>
</vlider>
</template>
<script>
import Vlider from "vlider";
export default {
name: "app",
components: {
Vlider
},
data() {
return {
inputRange: null,
slider: [
{label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
{label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
{label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
{label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
{label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
{label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
]
};
},
watch: {
inputRange() {
console.log(this.inputRange)
}
},
methods: {
vliderClick() {
console.log('clicked')
}
}
};
</\script>
<style>
import "vlider/src/sass/vlider.scss"
</style>
`
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<pre><code>{{codeSample}}</code></pre>
</div>
当然,在数据变量中嵌入大块HTML是有点笨拙的,并且需要对各种各样的部分进行转义(例如,在您的示例中包含${...}
和</script>
标记)。如果你通过ajax或webpack import导入HTML字符串而不是直接将它嵌入到data()
中,可能会更容易维护,就像我在这里所做的那样。
(如果您想要对代码示例进行语法着色,您也可以查看vue-highlightjs;它也取决于将源代码放在组件数据变量中而不是在模板内部内联。)
如果你愿意提前逃避html,你可以直接将其插入到模板中,并使用v-pre
告诉Vue忽略嵌入式html中的任何胡须符号:
new Vue({
el: '#app'
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<pre><code v-pre><script>... {{foo}} </script></code></pre>
</div>
所以我通过使用这个网站来编码我的代码https://mothereff.in/html-entities修复它
然后我使用编码版本并将其放入变量并将其传递给v-html,vue将其视为字符串并将其显示为字符串
<pre>
<code v-html="yourCodeVariable">
</code>
</pre>
...
<script>
...
data() {
return {
yourCodeVariable: `your encoded html code here`
}
}
...