MediaDialog.vue

<script>
import ImageAndVideoUpload from '@/components/ImageAndVideoUpload'

export default {
  components: {ImageAndVideoUpload},
  props:{
    value:{
      type:Array,
      default:() => []
    },
    readonly: Boolean
  },
  data(){
    return {
      show: false,
      pictureUrls:[]
    }
  },
  watch:{
    show(){
      if(!this.show){
        this.$emit('close', this.pictureUrls)
      }
    },
    pictureUrls(){
      if(this.value == this.pictureUrls) return
      this.$emit('input', this.pictureUrls)
    }
  },
  created() {
    this.pictureUrls = this.value
    this.show = true
  },
  methods:{
    onBeforeClose(){
      this.show = false
    }
  }
}
</script>

<template>
  <el-dialog :visible.sync="show" :before-close="onBeforeClose">
    <image-and-video-upload v-model="pictureUrls" readonly></image-and-video-upload>
  </el-dialog>
</template>