vue项目中读取文件内容

previewWx.vue 文件中代码如下：

<template><div class="pre-code-box"><transition name="slide-fade"><pre class="language-html" v-if="showCode" v-highlight><code class="language-html">{{  sourceCode  }}</code></pre></transition><div class="showCode"><div class="tool-wrap" @click="showOrhideCode"><i :class="iconClass"></i><span>{{ showCode ? '隐藏代码' : '显示代码' }}</span></div><div class="tool-wrap" @click="doCopy" style="margin-left: 20px"><el-icon><CopyDocument /></el-icon><span>复制代码</span></div></div></div>
</template><script setup>
import { computed, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import emitter from '../../packages/utils/bus'const props = defineProps({compName: {type: String,default: '',require: true},demoName: {type: String,default: '',require: true}
})const showCode = ref(false)
const sourceCode = ref('')const iconClass = computed(() => {return ['iconfont', showCode.value ? 'icon-arrow-up-filling' : 'icon-arrow-down-filling']
})
// 隐藏、显示代码
const showOrhideCode = () => {emitter.emit('previewChange', 'ok')showCode.value = !showCode.value
}// 读取文件
const readFile = () => {const file = loadFile(`../../packages/components/${props.compName}/doc/${props.demoName}`)sourceCode.value = unicodeToUtf8(file)
}
const loadFile = name => {const xhr = new XMLHttpRequest()const okStatus = document.location.protocol === 'file:' ? 0 : 200xhr.open('GET', name, false)xhr.overrideMimeType('text/html;charset=utf-8')// 默认为utf-8xhr.send(null)return xhr.status === okStatus ? xhr.responseText : null
}
// unicode转utf-8
const unicodeToUtf8 = data => {if (data) {data = data.replace(/\\\\/g, '%')}return unescape(data)
}// 复制
const doCopy = () => {const textarea = document.createElement('textarea')textarea.value = sourceCode.value //将需要复制的内容赋值给input框document.body.appendChild(textarea)textarea.select() //选中输入框document.execCommand('Copy') //复制当前选中文本到前切板document.body.removeChild(textarea)ElMessage({message: '复制成功',type: 'success'})
}onMounted(() => {readFile()
})
</script><style lang="scss" scoped>
.slide-fade-enter-active {transition: all 0.1s ease-out;
}.slide-fade-leave-active {transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}.slide-fade-enter-from,
.slide-fade-leave-to {transform: translateY(-10px);opacity: 0.5;
}.pre-code-box {width: 100%;height: auto;overflow: hidden;border-top: 0;position: relative;transition: all 0.15s ease-out;&:hover {box-shadow: 0px 16px 15px -16px rgb(0 0 0 / 10%);}pre {margin-top: -15px;margin-bottom: 0;}.showCode {width: 100%;line-height: 40px;font-size: 14px;text-align: center;background: #f9f9f9;box-shadow: 0px 16px 15px -16px rgb(0 0 0 / 10%);color: #666;display: flex;justify-content: center;align-items: center;cursor: pointer;span {margin-left: 10px;}.tool-wrap {&:hover {background: #f9f9f9;color: #0e80eb;}}}
}
</style>

读取 index.wxml 和 index.js件代码

import previewWx from '@/components/previewWx.vue'<div class="source">组件源码index.wxml
</div>
<previewWx compName="LicenseKeyboard" demoName="index.wxml"/>
<br><div class="source">组件源码index.js
</div>
<previewWx compName="LicenseKeyboard" demoName="index.js"/>
<br>