选择图片的弹窗组件

这篇具有很好参考价值的文章主要介绍了选择图片的弹窗组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

代码

<template>
  <el-dialog :visible.sync="dialogVisible" title="选择图片" width="50%">
    <el-upload
      class="upload-demo"
      :action="actionUrl"
      :headers="headers"
      :data="{ token: token }"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :limit="limit"
      :accept="accept"
      :multiple="multiple"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传{{ limit }}个文件,且不超过 {{ size }} MB</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ImageSelector',
  props: {
    actionUrl: String, // 上传图片的接口地址
    headers: Object, // 上传图片时需要携带的请求头部信息
    token: String, // 上传图片时需要携带的 token
    limit: { // 最多上传的图片数量
      type: Number,
      default: 1
    },
    size: { // 单张图片最大的大小,单位为 MB
      type: Number,
      default: 10
    },
    accept: { // 接受上传的图片类型
      type: String,
      default: 'image/*'
    },
    multiple: { // 是否支持多选
      type: Boolean,
      default: false
    },
    defaultList: { // 默认的图片列表
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      fileList: []
    }
  },
  methods: {
    // 点击确定按钮
    handleConfirm() {
      this.$emit('confirm', this.fileList)
      this.dialogVisible = false
    },
    // 上传成功回调
    handleSuccess(response, file, fileList) {
      this.fileList = fileList
    },
    // 上传失败回调
    handleError(err, file, fileList) {
      this.$message.error('上传失败')
    },
    // 移除文件回调
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    // 上传前校验回调
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < this.size

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error(`上传图片大小不能超过 ${this.size} MB!`)
        return false
      }
      return true
    },
    // 打开弹窗
    openDialog() {
      this.dialogVisible = true
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    }
  },
  mounted() {
    this.fileList = this.defaultList
  }
}
</script>

<style>
.el-upload__tip {
  font-size: 12px;
}
</style>

如何使用

<template>
  <div>
    <el-button @click="openImageSelector">选择图片</el-button>
    <image-selector :actionUrl="uploadUrl" :defaultList="imageList" @confirm="handleImageSelect"></image-selector>
  </div>
</template>

<script>
import ImageSelector from './ImageSelector'

export default {
  components: {
    ImageSelector
  },
  data() {
    return {
      uploadUrl: 'http://localhost:8080/upload',
      imageList: []
    }
  },
  methods: {
    openImageSelector() {
      this.$refs.imageSelector.openDialog()
    },
    handleImageSelect(fileList) {
      this.imageList = fileList
    }
  }
}
</script>

使用时需要传入上传图片的接口地址,以及其他相关配置信息。通过 openDialog() 方法打开弹窗,选择完图片后,点击弹窗中的“确定”按钮,会触发 confirm 事件,将选择的图片列表作为参数传递出去。

文章来源地址https://www.toymoban.com/news/detail-405913.html

到了这里,关于选择图片的弹窗组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】实现点击+号弹出一个附着旁边的弹窗进行多个方式的选择

    在微信小程序中,你可以使用小程序的组件和事件来实现点击+号弹出一个附着在+号旁边的弹窗,以进行多个方式的选择。以下是一个示例代码: 在wxml文件中,创建一个按钮,并为按钮绑定一个点击事件: 在上述代码中,我们创建了一个按钮,用于展示+号图标,并给按钮绑

    2024年02月14日
    浏览(45)
  • element ui中父子组件共用一个el-dialog弹窗,切换组件页面弹窗进行关闭

    在Element UI中,如果多个父子组件共用一个el-dialog弹窗,并且需要在切换组件页面时关闭弹窗,你可以考虑以下方法来实现: 在Vuex中创建一个状态来管理弹窗的显示状态(例如,showDialog)。 在父子组件中都可以访问这个状态,以便共享。 当需要打开或关闭弹窗时,分发对应

    2024年02月03日
    浏览(62)
  • Vue项目element-ui弹窗组件el-dialog、el-drawer,阻止点击遮罩层关闭

    效果图: 我们只需要设置这两个 属性 append-to-body :close-on-click-modal=“false” 注意 : 这里的close-on-click-modal属性前需要写入 :

    2024年02月12日
    浏览(60)
  • uniapp实现预约时间选择弹窗组件

    做了个组件,实现出当日预约时间组件,效果图如下 废话不多说,直接上代码,代码简单,参数自己任意改 在父组件中

    2024年02月15日
    浏览(40)
  • 微信小程序的弹窗提示

     第一种:弹出提示框,用户可以选择确定或者取消,且都带有回调。  第二种直接弹出成功的 用户无法选择确定与取消   第三种:等待中...   第四种:无任何图标仅仅只是展示    第五种:弹窗提示选项

    2024年02月11日
    浏览(68)
  • Vue3封装可拖拽的弹窗

    核心代码(复制就可以使用了) 使用方式

    2024年01月19日
    浏览(40)
  • FairyGUI编辑器的弹窗操作【插件】

    之前在FairyGUI编辑器菜单扩展中,我使用了 App . Alert ( \\\" 复制失败 \\\" ) 来提示操作是否成功。这篇则会说一下我们可以使用的弹窗提示,以及做到类似资源发布成功时的“发布成功”飘窗。 打开APP的API脚本,可以看到有很多公开方法,这里只介绍使用过的弹窗。 消息窗口:A

    2024年02月11日
    浏览(54)
  • 关闭element UI的弹窗,再次打开显示表单验证提示

    打开弹窗,没有填写任何信息,点击保存按钮,触发了表单的验证提示,没有进行任何操作,点击【关闭按钮】或者【取消按钮】关闭弹窗,再次打开弹窗,仍然显示表单的验证提示信息,   解决方法: 给el-dialog添加@close事件,给取消按钮添加点击事件,在事件中对表单进

    2024年02月15日
    浏览(39)
  • 如何实现”系统可能不会保存您所做的更改”的弹窗提示

    在本文框输入内容,关闭页面或者刷新页面时会弹出提示“系统可能不会保存您所做的更改”: 谷歌浏览器效果: Safari浏览器效果:

    2024年02月07日
    浏览(48)
  • 【微信小程序】显示自带的弹窗,包括加载中,成功,错误,提示,警告

    在微信小程序中,可以使用以下方法来显示自带的弹窗: 显示加载中的弹窗: 显示成功的弹窗: 显示错误的弹窗: 显示提示的弹窗: 显示警告的弹窗: 在上述示例中, wx.showLoading() 方法用于显示加载中的弹窗, wx.showToast() 方法用于显示成功、错误、提示和警告的弹窗。这

    2024年02月15日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包