78 lines
2.0 KiB
Vue
78 lines
2.0 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<view class="hint">温馨提示:如需编辑或分享文字，您可选中文字，一键复制至微信或文档内进行操作。</view>
|
||
<view class="content" v-if="txtParagraphs != null && txtParagraphs.length>0">
|
||
<view v-for="(item,index) in txtParagraphs" :key="index">
|
||
<text selectable="true">{{item}}</text>
|
||
<view style="height: 10px;"></view> <!-- 段落间隔 -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
fileUrl: '',
|
||
txtParagraphs: []
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.fileUrl = options.filePath
|
||
uni.setNavigationBarTitle({
|
||
title: '文档'
|
||
})
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
|
||
backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
|
||
animation: { // 可选项
|
||
duration: 500,
|
||
timingFunc: 'easeIn'
|
||
}
|
||
})
|
||
this.readTxt()
|
||
},
|
||
methods: {
|
||
readTxt() {
|
||
const _self = this
|
||
const fs = uni.getFileSystemManager();
|
||
fs.readFile({
|
||
filePath: _self.fileUrl,
|
||
encoding: 'utf8',
|
||
success: (readRes) => {
|
||
const fileContent = readRes.data;
|
||
// 简单示例：按空行拆分段落
|
||
const paragraphs = fileContent.split('\n\n').map((p) => p.trim()).filter((p) => p);
|
||
// 将处理后的段落数据设置到页面数据中
|
||
_self.txtParagraphs = paragraphs
|
||
console.log(_self.txtParagraphs)
|
||
},
|
||
fail: (readErr) => {
|
||
console.error('读取txt文件内容失败：', readErr);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* pages/readTxt/readTxt.wxss */
|
||
page {
|
||
background-color: white;
|
||
}
|
||
|
||
.hint {
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: rgb(248, 185, 50);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.content {
|
||
padding: 10px;
|
||
border: 1px solid #dfdddd;
|
||
border-radius: 5px;
|
||
}
|
||
</style> |