iframe标签的使用（一）——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用_iframe 预览图片_viceen的博客

相关文章推荐

面冷心慈的汉堡包 · HMAC-SHA256和RSA-SHA256 ...· 11 月前 ·

健壮的猴子 · Java猜数字游戏随机生成一个100以内的数 ...· 1 年前 ·

道上混的领结 · jquery鼠标移入移出隐藏显示div-掘金· 1 年前 ·

绅士的杨桃 · c++ - 在 CLion ...· 2 年前 ·

谦和的手电筒 · HtmlSpanner扩展笔记_fyfcau ...· 2 年前 ·

class = " color-666666 color-1890ff hand " @click = " openFile(url, fileName) " > { { fileName }} </ span < el-dialog :title = " fileName " v-model = " dialogVisible " width = " 50% " :before-close = " handleClose "  < 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 id = " pdfPlayer " :src = " url " frameborder = " 0 " width = " 100% " height = " 100% " > </ iframe >      < span v-if = " !url " > PDF或图片显示区域 </ span > </ div > </ div > </ div >  </ 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;
                    iframe标签的使用（一）——pdf预览和图片预览 &amp; scss样式的抽离 &amp; vue3.0页面结构的应用效果1-图片预览效果2-图片预览结构&lt;label&gt;附件:&lt;/label    &gt;&lt;span           class="color-666666 color-1890ff hand"           @click="openFile(url, fileName)"           &gt;{{ fileName }}&lt
				<form method="POST" action="/bm/upload-avatar/" enctype="multipart/form-data"
                      target="upload_iframe">
target="upload_iframe是为了和iframe建立关系
    <el-dialog :visible.sync='showFile' :before-close="handleCloseFile" custom-class="file-view">
      <iframe id="viewFile" @load="changeHeight()" height="100%" :src="visibleSrc" frameborder="0" scrolling="no" ></iframe>
				Vue3.0 支持使用 SCSS 作为样式预处理器，可以让开发者更加便捷和灵活地开发前端应用。使用 SCSS 可以让我们编写更加易于维护和阅读的代码，同时 SCSS 强大的 mixin 和变量功能可以让我们更加快速地开发出符合设计要求的样式。
从使用上来看，Vue3.0 中使用 SCSS 非常简单，只需要在项目中安装相应的依赖，并在组件中书写 SCSS 样式即可。在Vue组件中使用 SCSS 需要在 style 标签内加入 lang="scss" 属性，然后就可以愉快的使用 SCSS 了。
同时，Vue3.0 还加入了 SFC scoped CSS 样式的支持，这意味着我们可以使用 Scoped CSS 来解决 CSS 样式污染问题，Scoped CSS 具有局部作用域的特性，只会影响当前组件内部，而不会影响其他组件。这在开发复杂的界面时是非常方便和实用的。
在使用 SCSS 时需要注意，由于 SCSS 需要通过预处理器处理成 CSS 才能被浏览器识别，所以需要在 Vue3.0 项目中配置相应的 loader，例如 sass-loader 和 node-sass。在配置时需要注意版本兼容性，否则可能会导致编译出错。
总之，Vue3.0 使用 SCSS 的优点在于提高了开发效率和代码的可维护性，同时避免了 CSS 样式污染的问题。如果您正在开发 Vue3.0 项目，强烈建议您尝试使用 SCSS 作为样式预处理器，相信您一定会有更好的开发体验。