vue2 element点击其他地方关闭图片

        mounted(){
            // 通过遮罩层关闭图片预览
            document.addEventListener('click',function(e){
                if(e.target.className=="el-image-viewer__mask"){
                    let close = document.querySelector(".el-icon-circle-close");
                    close.click();
                }
            });
        },
  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue2 中使用 Element-UI 进行图片上传,需要进行以下步骤: 1. 安装 Element-UI: ```bash npm install element-ui --save ``` 2. 引入 Element-UI: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 在 HTML 中添加上传组件: ```html <template> <div> <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> ``` 其中,`:action` 属性指定了上传图片的地址,`:show-file-list` 属性设置为 `false`,表示不展示上传的文件列表,`:on-success` 属性指定了上传成功后的回调函数,`:before-upload` 属性指定了上传之前的回调函数。 4. 在 JavaScript 中添加上传相关方法: ```javascript <script> export default { data() { return { imageUrl: '', uploadUrl: 'your-upload-url' } }, methods: { handleSuccess(res) { this.imageUrl = URL.createObjectURL(res.raw) }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg' const isPNG = file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG && !isPNG) { this.$message.error('上传图片只能是 JPG 或 PNG 格式!') return false } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') return false } return true } } } </script> ``` 其中,`handleSuccess` 方法在上传成功后将图片显示出来,`beforeUpload` 方法用于校验上传的图片格式和大小,并在校验失败时提示错误信息。 以上就是使用 Element-UI 进行图片上传的基本流程。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值