<template>
    <div>
        <div>
			<text class="title">离线tbs文档预览测试</text>
		</div>
        <div class="btns-box">
			<button class="btn" @click="reflesh('test.docx')">
				<text class="btn-text">文件1</text>
			</button>
			<button class="btn" @click="reflesh('test2.docx')">
				<text class="btn-text">文件2</text>
			</button>
			<button class="btn" @click="reflesh('')">
				<text class="btn-text">刷新</text>
			</button>
		</div>
        <office ref="office" :path="path" @onReady="onReady" @on Error="onError" style="width: 750rpx;height: 450rpx;border: 1px;"/>
    </div>
</template>
<script>
export default{
    data(){
      return {
          //仅支持本地文件，可先下载到本地。
          base: '/storage/emulated/0/Download/',
		  path: '/storage/emulated/0/Download/test.docx',
      }  
    },
	methods: {
			on Error(e) {
				//出现错误时
				uni.showModal({
					content: e.detail.msg,
				})
				console.log(e.detail)
			},
			reflesh(f) {
				//刷新显示，如果改变文件路径则打开新文件
				if (f) {
					this.path = this.base + f;
				}

				this.$refs.office.refresh()
			},
			onReady(e) {
				//初始化成功，此时才可以正常使用
				// uni.showModal({
				// 	content:e.detail.msg,
				// })
			}
		}
}
</script>
<style scoped>
	.title{
		text-align: center;
		font-size: 16rpx;
	}
	
	.btns-box {
		display: flex;
		justify-content: center;
		flex-direction: row;
		margin: 20rpx 0;
	}

	.btns-box .btn {
		padding: 0.5em 1em;
		background-color: #3F536E;
		margin: 1em 0;
		width: 120rpx;
	}
	
	.btn-text{
		color: #FFFFFF;
		text-align: center;
		font-size: 22rpx;
	}
</style>

//属性
path:string #要打开的文档本地路径
//事件
on Error	#发生错误时触发
onReady	#初始化完成时触发，通常初始化过程在30s内。
//方法
refresh	#刷新，如果改变path后执行则会打开新的文档。

{
	ready:true,//是否初始化完毕
    msg:'初始化成功',//调试信息
    version:0,//x5内核版本
	
}