【study】子组件定义事件,在父组件是否使用

71 阅读1分钟
// 公共子组件,图片验证只在某些组件里使用

// 子组件
props: {
  imageValidator: {
      type: Function,
      default: () => true,
  },
}

methods: {
   async richTextHandleImageAdded(file) {
            if (this.imageValidator && typeof this.imageValidator === 'function') {
                const valid = this.imageValidator(file);
                if (!valid) return;
            }
}


// 父组件
<child :image-validator="imageValidatorEvent">

methods: {
  imageValidatorEvent(file) {
            if (Math.ceil(+file.size / 1000) <= 20 * 1024) {
                return true;
            } else {
                this.$message.error('图片大小超过了20MB,请重新上传');
                return false;
            }
        },