iframe标签的使用(一)——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用
iframe标签的使用(一)——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用效果1-图片预览效果2-图片预览结构<label>附件:</label><spanclass="color-666666 color-1890ff hand"@click="openFile(url, fileName)">{{ fileN
·
iframe标签的使用(一)——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用
效果1-图片预览
效果2-图片预览
结构
<label>附件:</label
><span
class="color-666666 color-1890ff hand"
@click="openFile(url, fileName)"
>{{ fileName }}</span
>
<el-dialog
:title="fileName"
v-model="dialogVisible"
width="50%"
:before-close="handleClose"
>
<!-- <div style="font-size:16px;font-weight:700; position:absolute;right:24vw;top:17px;">{{ fileName }}</div> -->
<el-button size="medium" icon="el-icon-download" plain style=" position:absolute;right:56px;top:10px;" @click="downFile(url, fileName)">下载</el-button>
<!-- 预览内容区 -->
<div class="show">
<div class="showCount">
<div class="count">
<!-- <iframe :src="detaList.preview_path" width="100%" height="100%"></iframe> -->
<iframe id="pdfPlayer" :src="url" frameborder="0" width="100%" height="100%" ></iframe>
<!-- <iframe id="pdfPlayer" src="https://vue3js.cn/docs/logo.png" frameborder="0" width="100%" height="100%"></iframe> -->
<!-- <iframe id="pdfPlayer" src="https://jpeg.org/images/jpeg-home.jpg" frameborder="0" width="100%" height="100%"></iframe> -->
<!-- <iframe id="pdfPlayer" src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" frameborder="0" width="100%" height="100%"></iframe> -->
<!-- <embed :src="detaList.preview_path" type="application/pdf" width="100%" height="100%" /> -->
<!-- <a :href="detaList.preview_path"></a> -->
<span v-if="!url">PDF或图片显示区域</span>
</div>
</div>
</div>
<!-- <template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</template> -->
</el-dialog>
vue3写法
import { defineComponent,watch, reactive, ref, toRefs } from 'vue';
setup(props, { emit }) {
let dialogFormVisible = ref(false);
const route = useRoute();
const state = reactive({
url: '',
});
const funMethods = {
openFile(openFile, fileName) {
console.log(openFile.indexOf(".jpg"));
console.log(123,openFile);
if(openFile.indexOf(".pdf") != -1 || openFile.indexOf(".png") != -1 || openFile.indexOf(".jpg") != -1 || openFile.indexOf(".jpeg") != -1){
state.dialogVisible = true;
}else{
if (!openFile) return ElMessage.error('文件地址不存在!');
downloadFile(openFile, fileName);
}
// console.log("文件显示");
// if (!openFile) return ElMessage.error('文件地址不存在!');
// downloadFile(openFile, fileName);
},
downFile(openFile, fileName) {
if (!openFile) return ElMessage.error('文件地址不存在!');
downloadFile(openFile, fileName);
},
handleClose(done) {
state.dialogVisible = false;
// this.$confirm('确认关闭?')
// .then(_ => {
// done();
// })
// .catch(_ => {});
},
};
return {
dialogFormVisible,
...funMethods,
...toRefs(state),
};
}
样式-写法一
<style lang='scss' scoped>
//.scss 可省略
@import "src/assets/styles/MyProcess/preview.scss";
</style>
样式-写法二
src/assets/styles/MyProcess/preview.scss
:deep(.el-dialog__body){
height:70vh;
overflow-y: hidden;
}
.show {
width: 47.5vw;
background: #ffffff;
position: relative;
float: left;
.el-button {
// float: right;
width: 102px;
height: 30px;
position: absolute;
top: -30px;
right: 0px;
// vertical-align: middle;
}
.showCount {
// padding: 20px 20px;
.count {
background: #d8d8d8;
// padding: 20px;
//虚拟值
height: 55vh;
span {
font-size: 30px;
color: #333333;
position: absolute;
bottom: 28vh;
left: 17vw;
}
}
}
}
更多推荐
已为社区贡献72条内容
所有评论(0)