团队网站建设哪家便宜,企业诚信建设,重庆网站搭建公司,济南网站制作经验0、提示
下面只有vue的使用示例demo #xff0c;官文档参考 cafe-ofd - npm
其他平台可以参考 ofd - npm
官方线上demo: ofd
1、安装包
npm install cafe-ofd --save
2、引入
import cafeOfd from cafe-ofd
import cafe-ofd/package/index.css
Vue.use(cafeOfd)
3、使…0、提示
下面只有vue的使用示例demo 官文档参考 cafe-ofd - npm
其他平台可以参考 ofd - npm
官方线上demo: ofd
1、安装包
npm install cafe-ofd --save
2、引入
import cafeOfd from cafe-ofd
import cafe-ofd/package/index.css
Vue.use(cafeOfd)
3、使用案例借助了element的组件可以替换其他
templatediv stylepadding: 20px 100px; font-size: 20pxh1ofd文件预览/h1h1https://www.npmjs.com/package/cafe-ofd/h1h1npm install cafe-ofd --save/h1h1import cafeOfd from cafe-ofd brimport cafe-ofd/package/index.cssbrVue.use(cafeOfd)/h1el-uploadclassupload-demorefuploadaction:on-previewhandlePreview:file-listfileList:auto-uploadfalseel-button slottrigger sizesmall typeprimary选取文件/el-button/el-uploaddiv stylewidth: 100%; height: 60vh; border: 1px solid red; background-color:#ccc; ideasyofdcafe-ofd refofd :filePathfile on-successload on-scrollscrolldiv slotheaderinput typefile reffile classhidden placeholder选择文件 accept.ofd changefileChanged/divdiv slotfooter classfooterel-button clickplus放大/el-buttonel-button clickminus缩小/el-buttonel-button clickpre :disabledcurrentNum 1上一页/el-buttonel-input typenumber :min1 :maxpageNum v-model.numbercurrentNum changepageChange(currentNum)/el-inputel-button clicknext :disabledcurrentNum pageNum下一页/el-buttonel-button clickprint打印/el-button/div/cafe-ofd/div/div/templatescript
export default {data(){return {fileList: [],currentNum: null,file: null,pageNum: null}},mounted() {},methods: {handlePreview(e){this.file e.raw},load(val) {this.pageNum val;},fileChanged() {this.file this.$refs.file.files[0];},plus() {this.$refs.ofd.scale(1.1);},minus() {this.$refs.ofd.scale(-0.9);},next() {this.$refs.ofd.nextPage();},pre() {this.$refs.ofd.prePage();},pageChange(val) {this.$refs.ofd.goToPage(val);},print() {this.$refs.ofd.printFile();},scroll(val) {this.currentNum val;}}
}
/scriptstyle scoped
.footer {padding: 0 20px;display: flex;justify-content: space-between;gap: 20px;
}
media print {html,body,#app {height: auto;overflow: auto;}
}
/style4、案例-图示
