如何使用iview的upload实现vue自定义上传做一个可复用页面

最新推荐文章于 2023-12-18 23:26:40 发布
最新推荐文章于 2023-12-18 23:26:40 发布
阅读量684 收藏 1
点赞数
分类专栏： vue.js iview 文章标签： vue.js view design javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangmeixia969/article/details/127279209
版权

上传实例


先看视频👆

如何使用iviewupload实现自定义上传 带图片放大功能

<template>
    <div class="customerUpload theme2022">
        <Upload
            ref="upload"
            class="file_uploader"
            :data="ticket"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :on-progress="handleProgress"
            :before-upload="onBeforeUpload"
            multiple
            :accept="accept"
            type="drag"
            :action="uploadHost"
            :on-error="handleError"
        >
            <slot name="uploadBtn">
                <div class="ellipsis popup_upload" :class="errorFile?'error_files':''">
                    <div class="upload_field_btn"><icon font="2" class="icon-tianjia" style="font-size: 13px;margin-right: 6px;"></icon>点此上传文件</div>
                    <p class="upload_field_big">文件大小不超过{{size}}M</p>
                </div>
            </slot>
        </Upload>
        
        <!--        文档列表-->
        <ul class="demo-upload-list">
            <li v-for="(fileSrc,index) in uploadFiles" :key="'file1_'+index">
                <div  class="uploadFiles">
                    <icon font="2" class="icon-shangchuanwenjian-2" style="color:#5E6575;float: left;" slot="suffix"></icon>
                    <div class="uploadFilesName">{{fileSrc.fileName}}</div>
                    <div class="upload_mask">
                        <icon font="2" class="icon-shanchu-3 uploadFiles_cancel"  slot="suffix" @click="uploadFilesCancel(fileSrc)"></icon>
                    </div>
                </div>
            </li>
            <li v-for="(fileSrc,index) in uploadingFiles"  :key="'file2_'+index" >
                <div class="uploadFiles">
                    <icon font="2" class="icon-shangchuanwenjian-2" style="color:#5E6575;float: left;" slot="suffix"></icon>
                    <div class="uploadFilesName">{{fileSrc.fileName}}</div>
                    <div class="upload_mask">
                        <icon font="2" class="icon-shanchu-3 uploadFiles_cancel"  slot="suffix" @click="uploadingFilesCancel(fileSrc)"></icon>
                    </div>
                </div>
                <Progress  :stroke-width="3"  :percent="fileSrc.percentage" ></Progress>
            </li>
        </ul>
        <div class="upload-list"  v-for="(item,index) in uploadImgs"  :key="'imgs1'+index">
            <div class="upload-list-img">
                <div class="uploadNav">
                    <img :src="item.fileUrl" >
                    <div class="upload_mask">
                        <icon font="2" class="icon-chakan uploadFiles_cancel" @click="lookImgsPic(index)"></icon>
                        <icon font="2" class="icon-shanchu-3 uploadFiles_cancel" @click="uploadImgsCancel(item)"></icon>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="upload-list"  v-for="(item,index) in uploadingImgs"     :key="'imgs2'+index">
            <div class="progress">
                <Progress  :stroke-width="3"  :percent="item.percentage"  stroke-color="#4a99ec"></Progress>
                <span class="progress_text" :title="item.fileName">{{item.fileName}}</span>
                <div class="upload_mask">
                    <icon font="2" class="icon-chakan uploadFiles_cancel uploading_disabled"></icon>
                    <icon font="2" class="icon-shanchu-3 uploadFiles_cancel" @click="uploadingImgsCancel(item)"></icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import tool from "@/utils/common/tool";
import beforeUpload from "@/utils/common/beforeUpload";

export default {
    name: "customerUpload",
    props:{
        //默认文件数组
        value: {
            type: [Array,Object,Boolean],
            required: false,
            default(){
                return [];
            },
        },
        //最大文件数量
        count: {
            type: Number,
            required: false,
            default: 5,
        },

        //最大文件大小  单位MB
        size: {
            type: [Number,String],
            required: false,
            default: 50,//50MB2
        },
        // 页面点击确定之后文件是必填 但是文件没有内容 出现的error提示
        errorFile:{
            type: Boolean,
            default: false,
            required: false,
        }
    },
    data() {
        return {
            ticket:{},//上传接口的额外参数
            iconCancelShow:false,
            uploadHost: '',
            hostUrl: [],
            fileArr:[],
            format:[],
            //上传完成得文件和图片
            uploadFiles:[],
            uploadImgs:[],
            //正在上传得文件和图片
            uploadingFiles:[],
            uploadingImgs:[],
            accept:'.jpg,.jpeg,.gif,.png,.bmp,.xls,.xlsx,.xlsm,.csv,.ppt,.pptx,.doc,.docx,.pdf,.zip,.rar,.7z,.wav,.m4a,.mp3,.mp4,.avi,.tif,.tiff,.msg,.txt,.dwt,.dwg,.dws,.dxf,.ico',
            acceptImg:'.jpg,.jpeg,.gif,.png,.bmp',
            uploadCount: 0,//正在上传的数量
        }
    },
    computed:{
        limitType(){
            return this.accept.split(',')
        },
        accemtImg(){
            return this.acceptImg.split(',')
        }
    },
    watch: {
        value:{
            handler(newVal){
                console.log(556,newVal)
                this.newListValue(newVal)
            },
            deep:true,
            immediate: true,
        },
        errorFile:{
            handler(newVal){
                console.log('errorFile',newVal)
            },
            deep:true,
            immediate: true,
        }
    },
    methods:{
        handleError(error,file){
            tool.msgError(this,file.name+" 上传失败");
            
            console.log('error',error,file)
        },
        //生成缩略图
        thumbImg(url,w,h){
            console.log(557,url)
            w = w || 20;
            h = h || 20;
            if(url.indexOf('网站') > -1){
                if(url.indexOf('?')>-1){
                    url += '&x-oss-process=image/resize,m_fill,h_'+h+',w_'+w+'';
                }else{
                    url += '?x-oss-process=image/resize,m_fill,h_'+h+',w_'+w+'';
                }
            }
            return url;
        },
        newListValue(data){
            console.log(5567,data)  
            let filesData =[]
            let ImgsData = []
            if(data && data.length > 0){
                data.forEach((v)=>{
                    if(this.judgeListNew(v)){
                        console.log(7775,v)
                        v.thumb = this.thumbImg(v.fileUrl)
                        ImgsData.push(v)
                    }else{
                        console.log(7776,v)
                        filesData.push(v)
                    }
                })
            }
            this.uploadFiles = filesData
            this.uploadImgs = ImgsData
        },
        judgeListNew(file){
            let fileType = file.fileName.substr(file.fileName.lastIndexOf(".")).toLowerCase();  //截取最后一个点号及后字符 示例：'.jpg'
            let judgeImg = this.accemtImg.includes(fileType);//当前文件类型是否在数组中
            return judgeImg
        },
        //图片预览
        lookImgsPic(index){
            console.log(512,this.uploadImgs)
            let arr = []
			//上传成功的图片
            this.uploadImgs.forEach((v)=>{
                arr.push({
                    thumb:v.thumb,
                    url:v.fileUrl,
                    title:v.fileName,
                })
            })
            let opt = {
                images:arr,
                index:index
            };
            // console.log(7798,opt)
            tool.viewImages(this,opt);
        },
        uploadFilesCancel(data){
            console.log('删除所选文件',data,this.uploadFiles)
            this.uploadFiles.forEach((v,index)=>{
                if(data.fileName == v.fileName){
                    this.uploadFiles.splice(index,1)
                }
            })
            this.onChange()
        },
        uploadingFilesCancel(data){
            console.log('删除所选文件',data,this.uploadingFiles)
            this.uploadingFiles.forEach((v,index)=>{
                if(data.fileName == v.fileName){
                    this.uploadingFiles.splice(index,1)
                }
            })
        },
        //
        uploadImgsCancel(data){
            console.log('删除所选图片',data,this.uploadImgs)
            this.uploadImgs.forEach((v,index)=>{
                if(data.fileName == v.fileName){
                    this.uploadImgs.splice(index,1)
                }
            })
            this.onChange()
        },
        uploadingImgsCancel(data){
            console.log('删除所选图片',data,this.uploadingImgs)
            this.uploadingImgs.forEach((v,index)=>{
                if(data.fileName == v.fileName){
                    this.uploadingImgs.splice(index,1)
                }
            })
        },
        //是双向数据绑定触发onChange事件
        onChange() {
            console.log(1113,this.uploadImgs.length,this.uploadingImgs.length,this.uploadFiles.length,this.uploadingFiles.length)
            let fileArr = [];
            this.uploadFiles.forEach((v)=>{
                fileArr.push({
                    fileName: v.fileName,
                    fileUrl: v.fileUrl,
                })
            })
            this.uploadImgs.forEach((v)=>{
                fileArr.push({
                    fileName: v.fileName,
                    fileUrl: v.fileUrl,
                })
            })
            this.$emit('input', fileArr);  //传出外边文件格式
        },
      
        // 本地图片判断图片后缀
        onBeforeUpload(file) {
            //todo:格式限制
            console.log(332,this.$refs.upload.fileList.length)
            const fileType = file.name.substr(file.name.lastIndexOf(".")).toLowerCase();  //截取最后一个点号及后字符 示例：'.jpg'
            const check = (this.$refs.upload.fileList.length + this.uploadCount) < this.count;//fileList是已经上传好的文件列表，uploadCount是未上传的数量
            logDev('fileList.length:',this.$refs.upload.fileList.length,check)
            const isLt2M = file.size / 1024 / 1024 <= this.size;
            
            let isFileType = this.limitType.includes(fileType);//当前文件类型是否在数组中
            logDev(isFileType,fileType,this.limitType);
            if(!isFileType){
                tool.msgError(this,"文件类型应为："+this.cpuAccept);
                return false;
            }
            if (!isLt2M) {
                tool.msgError(this,'上传文件大小不能超过'+this.size+'MB!');
                return false;
            }
            if (!check) {
                tool.msgError(this, '最多上传'+this.count+'个文件！');
                return check;
            }
            logDev('通过')
            let self = this;
            
            //获取toKen
            let pr1 = beforeUpload.get(file);
            let promise = new Promise((resolve,reject)=>{
                pr1.then((result)=>{
                    console.log(99,result)
                    self.ticket = result[0];
                    self.uploadHost = result[2];
                    file.url = result[1];
                    
                    this.editArr(file)
                    self.fileArr.push(file);//此时file中没有uid属性，且此file与上传成功后的file不相同
                    this.$nextTick(function(){
                        resolve(true)
                    })
                })
            })
            return promise
        },
        judgeList(file){
            let fileType = file.name.substr(file.name.lastIndexOf(".")).toLowerCase();  //截取最后一个点号及后字符 示例：'.jpg'
            let judgeImg = this.accemtImg.includes(fileType);//当前文件类型是否在数组中
            return judgeImg
        },
        editArr(file){
            let data1 = []
            let data2 = []
            console.log(55567,file,this.judgeList(file),file.name,file.url)
            if(this.judgeList(file)){
                data1.push({
                    fileName:file.name,
                    fileUrl:file.url,
                    file:file,
                    percentage:0,
                    thumb:this.thumbImg(file.url),
                })
            }else{
                data2.push({
                    fileName:file.name,
                    fileUrl:file.url,
                    file:file,
                    percentage:0,
                    thumb:this.thumbImg(file.url),
                })
            }
            this.uploadingImgs = data1
            this.uploadingFiles = data2
            console.log(9901,this.uploadingImgs,this.uploadingFiles)
        },
        //上传时的钩子
        handleProgress(event, file, fileList){
            console.log(8888,event, file,file.uid,fileList)
            console.log(44445,this.uploadingImgs,this.uploadingFiles)
			//上传中的文件和图片
            for(let i=0;i<this.uploadingImgs.length;i++){
                if(file.uid === this.uploadingImgs[i].file.uid){
                    console.log(7778, this.uploadingImgs[i].percentage,file.percentage)
                    this.uploadingImgs[i].percentage = parseInt(file.percentage)
                    return;
                }
            }
            for(let k=0;k<this.uploadingFiles.length;k++){
                if(file.uid === this.uploadingFiles[k].file.uid){
                    console.log(7778, this.uploadingFiles[k].percentage,file.percentage)
                    this.uploadingFiles[k].percentage = parseInt(file.percentage)
                    return;
                }

            }
            console.log(444,this.uploadingImgs,this.uploadingFiles)
        },
        // 本地图片上传成功
        handleSuccess(response, file) {
            console.log(664,file, this.uploadingImgs,this.uploadingFiles)
            //上传文件图片成功后将上传中的数组清空
            this.uploadingImgs.forEach((v,index)=>{
                if(file.uid === v.file.uid){
                    v.percentage = 100
                    setTimeout(()=>{
                        this.uploadImgs.push(v)
                        this.uploadingImgs.splice(index)
                        this.onChange()
                    },1000)

                }
            })

            this.uploadingFiles.forEach((v,index)=>{
                if(file.uid === v.file.uid){
                    v.percentage = 100
                    setTimeout((s)=>{
                        this.uploadFiles.push(v)
                        this.uploadingFiles.splice(index)
                        this.onChange()
                    },1000)
                }
            })
            console.log(88834,this.uploadFiles,this.uploadImgs)
        },
    }
}
</script>

<style scoped lang="less">
.customerUpload{
    width: 100%;
}
.upload-list{
    // display: inline-block;
    width: 129px;
    height: 129px;
    text-align: center;
    border-radius: 2px;
    //display: flex;
    border:1px dashed #DDE0E8;
    margin-right: 20px;
    float: left;
    margin-bottom: 10px;
    margin-top: 24px;
    .upload-list-img{
        width: 100%;
        height: 100%;
        .uploadNav{
            width: calc(100% - 12px);
            height: calc(100% - 12px);
            margin: 6px;
            position: relative;
            .upload_mask{
                width: 100%;
                height: 100%;
                display: none;
                position: absolute;
                left: 0;
                top: 0;
            }

            img{
                width: 100%;
                height: 100%;
            }
            &:hover{
                .upload_mask{
                    display: flex;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.3);
                    z-index: 999;
                    cursor: pointer;
                    justify-content: space-evenly;
                    align-items: center;
                    .uploadFiles_cancel{
                        color: #ffff;
                        font-size: 15px;
                    }
                    
                }
            }
        }
        
        
        
    }
    .progress{
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        margin: 6px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        position: relative;
        padding: 44px 0px 0px 10px;
        .upload_mask{
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            left: 0;
            top: 0;
        }
        &:hover{
            .upload_mask{
                display: flex;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.3);
                z-index: 999;
                cursor: pointer;
                justify-content: space-evenly;
                align-items: center;
                .uploadFiles_cancel{
                    color: #ffff;
                    font-size: 15px;
                }
            }
        }
        .progress_text{
            width: 102px;
            text-align: center;
            overflow: hidden;
            word-break: keep-all;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        .ivu-progress{
            /deep/.ivu-progress-outer{
                padding-right: 38px;
                margin-right: -36px;
            }
        }
    }
}
.demo-upload-list{
    display: flex;
    width: 100%;
    li{
        width: calc(24% - 5px);
        height: 100%;
        margin-right: 35px;
        margin-top: 26px;
        .uploadFiles{
            width: 100%;
            height: 36px;
            line-height: 36px;
            border-radius: 2px;
            border:1px dashed #DDE0E8;
            cursor: pointer;
            padding: 0px 9px;
            position: relative;
            .upload_mask{
                display: none;
            }
            &:hover{
                background: #F3F5F7;
                .upload_mask{
                    position: absolute;
                    display: block;
                    background:rgba(243,245,247,0);
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }
            }
            .uploadFilesName{
                float: left;
                font-size: 13px;
                font-weight: 400;
                color: rgba(0,0,0,0.9);
                margin-left: 5px;
            }
            .uploadFiles_cancel{
                float: right;
                margin-right: 9px;
            }
            
        }
        
    }
}
</style>

由于 iview中的插件不适合我所用的 所以自己封装了一下

试图让你心动
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue iView 上传组件之手动上传功能
08-27
iView 主要服务于 PC 界面的中后台业务，是一套高质量的开源 UI 组件库。这篇文章主要介绍了iView 上传组件之手动上传功能,需要的朋友可以参考下
iview Upload实现手动上传文件
weixin_44705310的博客
04-27 1191
【代码】iview Upload实现手动上传文件。
vue2+iview 图片文件上传 Upload组件
鹤渺的星球
11-16 998
记录一个图片上传的功能，满足只能上传一张图片，并且可以需要判断上传图片是否为png，且大小不能超过2MB，除此之外，先上传图片，再点击提交按钮提交图片。
View UI（iView） Upload 自定义多图上传列表提交
最新发布
qq_36264795的博客
12-18 699
可以自由控制上传列表，完成各种业务逻辑，示例是一个照片墙，可以查看大图和删除。设置属性为 false，可以不显示默认的上传列表。设置属性设置默认已上传的列表。通过on-success等属性来控制完整的上传过程，详见API。另外，可以通过丰富的配置，来定制上传需求，本例中包含了：文件必须是 jpg 或 png 格式的图片。最多上传5张图片。每个文件大小不超过 2M。
uview-plus上传图片，upload组件带参数上传
做笔记/记录遇到的前端bug
07-02 1634
使用uview-plus组件库中的upload组件，实现上传头像，带参数上传，上传图片列表
vue iview upload 本地上传 自定义action上传地址
愿你走过半生，归来任是少年。
08-15 1519
vue iview 本地上传 自定义action上传地址
使用iView Upload 组件实现手动上传图片的示例代码
10-17
主要介绍了使用iView Upload 组件实现手动上传图片的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
tree组件可实现节点拖拽、双击编辑、右键操作等等
vue+iview 实现可编辑表格的示例代码
10-17
主要介绍了vue+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview Upload组件多个文件上传的示例代码
12-10
(1).:before-upload 是 iview Upload 上传组件的一个属性 设置返回值为 false 可以阻止默认上传方式（自动上传模式） (2).handleUpload 是方法 *备注:代码在最后面 3.上传方法　 　//创建 formData 对象 let ...
笔记—Vue—IView之upload自定义上传列表
m0_46401243的博客
06-03 1925
流程：将图片上传通过FTP上传到服务器中，然后回显， 在页面加载时访问后台是否有已存在的图片，如果有加载到列表当中。 1.什么是FTP？ 文件传输协议（File Transfer Protocol，FTP） 是一种提供网络之间共享文件的协议，它可以在计算机之间可靠、高效地传送文件。在传输时，传输双方的操作系统、磁盘文件系统类型可以不同。 FTP 协议允许 TCP/IP 网络上的两台计算机之间进行文件传输。而 FTP 服务是基于 FTP 协议的文件传输服务。 工作时，一台计算机上运行 FTP 客户端应用程序.
uview 上传在组件外自定义按钮触发u-upload上传事件
like896369216的博客
02-19 2477
uview 实现外部调用u-upload上传文件方法
vue iview upload组件上传文件,show-upload-list:true配合form,modal使用
Blue__Summer的博客
03-03 701
（3）方法：play()，pause() controls：向用户显示音频控件（播放/暂停/进度条/音量）// 组件初始化完成后要给upload的fileList一个数组容器,否则,上传文件后,组件将无法在页面默认展示上传列表。// 弹框关闭时清空所有组件信息,否则再次点开弹框时,因为vue的双向绑定,会展示上次表单数据。// 由于弹框关闭时,上传upload的fileList被清空了,灵魂再次无法安放了,-- 删除按钮,点击上传文件对象清空,可以重新上传 -->//切记,一定要给组件数据容器。
uview自定义样式上传图片
sanhangzhongwen的博客
10-10 1696
uview自定义样式上传图片
Vue上传文件 iview Upload UI 组件上传组件
北方木 南方南
03-13 5554
Vue原生上传文件 原生input支持上传文件 定义type类型，隐藏样式 第三定义change事件拿到file 的相关信息，accept限制支持的文件类型 然后给button增加点击事件 template部分 &amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;button type=&amp;amp;quot;button&amp;amp;quot; @click=&amp;amp;qu
小程序uView2.X框架upload组件上传方法总结+避坑
shi15926lei的博客
10-11 5279
相信很多人写小程序会用到uView框架,总体感觉还算OK吧,只能这么说,肯定也会遇到图片视频上传,如果用到这个upload组件相信你,肯定遇到各种各样的问题,这是我个人总结的单图片和多图片上传方法.2.3 上传成功的回调 主要是是上传的是一个json格式 一定要进行处理 JSON.parse(res.data).path,2.2上传之前做的事情,比如 限制格式 限制大小 这点比较麻烦 ,里面注释写的比较详细。3.上传前限制 大小 图片 格式 里面注释写的很详细。1.需要修改这个属性。
vue使用iview的Upload插件进行文件上传, 携带参数, 携带headers信息等
qq_43787947的博客
10-28 1821
最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId 接下来看一下如何使用Upload标签实现点击/拖拽上传 如何携带参数, 如何设置headers <template> <div> <Row> <Col> <Upload multiple type="
iview 如何实现文件上传并限制上传格式和大小
CRMEB小程序商城的博客
05-11 1402
问题描述： 当上传的文件格式类型不为 jpeg、png、gif、jpg 时，提示上传的文件格式不正确 当上传的文件大小超过后端返回的大小时，提示文件体积过大 需要限制文件上传的格式和大小，最后的实现效果如下： 实现过程 对于文件大小的限制是可配置的，接口返回一个字段，我存了缓存，在上传图片的组件里，获取到存入缓存的这个值，在上传前对文件大小进行判断，上传的文件类型是写死了四种图片类型，在上传前通过判断文件类型确定是否能上传，不能的话就抛出一个警告。 beforeUpload 函数的返回值如下
iview upload上传文件
zhaofeng的博客
12-19 4242
前端代码 <Upload ref="upload" type="drag" multiple :show-upload-list="true" :before-upload="handleUpload" :data="uploadFile" :on-success="uploadSuccess" action="/api/company/upload"> 选择...
vue使用iview跳转另一页面打印部分页面内容
06-09
您可以使用`iview`的`Print`组件来打印页面的部分内容。以下是实现的步骤： 1. 在需要打印的元素上添加一个特定的类名，例如`print-only`。 2. 在需要跳转的页面中使用`router-link`进行跳转，同时将需要打印的元素的类名传递给目标页面。 ```vue <template> <div> <div class="print-only">需要打印的内容</div> <router-link :to="{ name: 'print', params: { printable: 'print-only' } }">跳转并打印</router-link> </div> </template> <script> export default { name: 'Page', }; </script> ``` 3. 在目标页面中获取传递过来的类名，并使用`Print`组件进行打印。 ```vue <template> <div> <div :class="printable">需要打印的内容</div> <Button type="primary" @click="print">打印</Button> <Print :printable=".print-only"> <div slot="printable">需要打印的内容</div> </Print> </div> </template> <script> import { Button, Print } from 'iview'; export default { name: 'PrintPage', components: { Button, Print, }, computed: { printable() { return `.${this.$route.params.printable}`; }, }, methods: { print() { this.$refs.print.handlePrint(); }, }, }; </script> ``` 4. 然后在`methods`中通过`$refs`获取`Print`组件的实例，并调用`handlePrint()`方法进行打印。 5. 打印完成后，会自动返回原页面。 注意：`Print`组件只能打印通过`slot`传递的内容，因此需要将需要打印的内容作为`slot`传递给组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值