项目中难免会碰到要显示各种协议， 像这样
这时，产品会给你发一个word 文档，通常都有好几页面，这样大篇幅的文本，直接复制到页面就不合适了，再加上还要处理换行，费时费力，能够直接获取word内容，展示到页面最好不过，由于获取word乱码，这里暂用txt文本代替
export default { date(){ return { agreement:{ user:"", private:"" } } } mounted (){ this.agreement.user = this.readFile('/user.txt') this.agreement.private = this.readFile('/private.txt') }, methods :{ readFile (filePath){ // 创建一个新的xhr对象 let xhr = null, okStatus = document.location.protocol === 'file' ? 0 : 200 xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP') xhr.open('GET', filePath, false) xhr.overrideMimeType('text/html;charset=utf-8') xhr.send(null) return xhr.status === okStatus ? xhr.responseText : null } } }这样，只要在弹窗显示相关 data 值，是不是优雅多了
<el-dialog title="《XXX隐私条款》" :visible.sync="privatePopShow" width="30%" align="center"> <div class="agreement"><pre>{{agreement.private}}</pre></div> <span slot="footer" class="dialog-footer"> <el-button @click="privatePopShow = false">关 闭</el-button> </span> </el-dialog>
再加上换行等样式
.agreement-txt text-align left line-height 25px white-space break-spaces /* pre-line、pre-wrap 也可以 */ font-family Avenir, Helvetica, Arial, sans-serif效果：
