mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-15 04:42:23 +08:00
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<div style="overflow: hidden;">
|
|
<div
|
|
style="width: 100%; border-radius: 8px; border: 2px solid #5c657eff; height: 39px; background-color: black; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
|
|
@click="collapse = !collapse"
|
|
>
|
|
<span v-if="collapse">Click to Expand</span>
|
|
<span v-else>Click to Collapse</span>
|
|
</div>
|
|
<div
|
|
v-if="!collapse"
|
|
ref="source"
|
|
class="n-doc-section__source"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CodeMirror from 'codemirror'
|
|
|
|
export default {
|
|
name: 'NDocSourceBlock',
|
|
data () {
|
|
return {
|
|
collapse: true
|
|
}
|
|
},
|
|
watch: {
|
|
collapse (newValue) {
|
|
if (!newValue) {
|
|
this.$nextTick().then(() => {
|
|
CodeMirror.fromTextArea(this.$refs.source.querySelector('textarea'), {
|
|
lineNumbers: false,
|
|
mode: 'htmlmixed',
|
|
theme: 'vibrant-ink'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|