mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
class="n-code-box"
|
|
:class="{
|
|
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
|
}"
|
|
n-default-theme-background-color-hint="transparent"
|
|
n-light-theme-background-color-hint="white"
|
|
>
|
|
<div class="n-code-box__title">
|
|
<slot name="title" />
|
|
<n-tooltip
|
|
:placement="'top'"
|
|
:arrow="true"
|
|
>
|
|
<template v-slot:activator>
|
|
<n-button
|
|
size="tiny"
|
|
ghost
|
|
icon="md-code"
|
|
circle
|
|
@click="toggleCodeDisplay"
|
|
/>
|
|
</template>
|
|
Show Code
|
|
</n-tooltip>
|
|
</div>
|
|
<div class="n-code-box__content markdown">
|
|
<slot name="content" />
|
|
</div>
|
|
<div
|
|
class="n-code-box__view"
|
|
>
|
|
<slot name="demo" />
|
|
</div>
|
|
<div
|
|
v-if="showCode"
|
|
class="n-code-box__code"
|
|
>
|
|
<slot name="code" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import withapp from '../../packages/mixins/withapp'
|
|
import themeable from '../../packages/mixins/themeable'
|
|
import 'highlight.js/styles/atom-one-dark-reasonable.css'
|
|
import 'highlight.js/styles/atom-one-light.css'
|
|
|
|
export default {
|
|
mixins: [withapp, themeable],
|
|
data () {
|
|
return {
|
|
showCode: false,
|
|
lightThemeCSSRef: null,
|
|
defaultThemeCSSRef: null
|
|
}
|
|
},
|
|
watch: {
|
|
synthesizedTheme (value) {
|
|
|
|
}
|
|
},
|
|
mounted () {
|
|
// document.querySelector('')
|
|
},
|
|
methods: {
|
|
switchHighlightStyle () {
|
|
|
|
},
|
|
toggleCodeDisplay () {
|
|
this.showCode = !this.showCode
|
|
}
|
|
}
|
|
}
|
|
</script>
|