71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<div class="demo__preview" v-if="mainFile">
|
|
<component :is="mainFile" />
|
|
</div>
|
|
<div class="demo__source">
|
|
<div v-for="(file, index) in files" :key="index">
|
|
<p v-if="showFileNames">
|
|
{{ file.name }}
|
|
</p>
|
|
<pre :class="`language-${file.highlight}`"><code :class="`language-${file.highlight}`" v-html="$options.filters.highlight(file.content, file.highlight)"></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
content: null,
|
|
files: [],
|
|
syntax: {
|
|
js: 'javascript',
|
|
vue: 'markup',
|
|
css: 'css',
|
|
},
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
mainFile() {
|
|
const file = this.files.find(item => item.path.endsWith('.vue'))
|
|
|
|
if (!file) {
|
|
return
|
|
}
|
|
|
|
return require(`~/demos/${file.path}`).default
|
|
},
|
|
|
|
showFileNames() {
|
|
return this.files.length > 1
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.files = require.context(`~/demos/`, true)
|
|
.keys()
|
|
.filter(path => path.startsWith(`./${this.name}`))
|
|
.filter(path => path.endsWith('.vue') || path.endsWith('.js') || path.endsWith('.css'))
|
|
.map(path => path.replace('./', ''))
|
|
.map(path => ({
|
|
path,
|
|
name: path.replace(`${this.name}/`, ''),
|
|
content: require(`!!raw-loader!~/demos/${path}`).default,
|
|
extension: path.split('.').pop(),
|
|
highlight: this.syntax[path.split('.').pop()] || 'markup',
|
|
}))
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" src="./style.scss" scoped /> |