커스텀 프로펠러 타입 Vue.js

커스텀 프로펠러 타입 Vue.js

Vue.js 소품용으로 커스텀 소품 타입을 작성(검증을 통해 확장)할 수 있는 방법이 있습니까?

다음 예에서는 오브젝트 프로포트를 찾을 수 있습니다.background오브젝트 대신 커스텀 소품 타입의 이미지를 원합니다.이미지에서 확인 가능 여부src그리고.alt채워져 있고 나머지는 선택 사항입니다.

현재 제공 내용:

export default {
  props: {
    background: {
      type: Object,
      src: String,
      srcset: String,
      alt: String,
      title: String,
    },
  },
};

갖고 싶은 것:

class customPropImage {
  // magic ...
}

export default {
  props: {
    background: Image,
  },
};

물론 넌 할 수 있어.Vue 설명서에 따르면 유형을 사용자 지정 유형의 생성자로 설정할 수 있습니다.커스텀 검증에서는, 다음과 같이 됩니다.

function CustomImage () {
  // Magic
}

Vue.component('blog-post', {
  props: {
    myImage: {
      type: CustomImage,
      validator: function (value) {
        return true; // or false based on value of myImage
      }
    }
  }
})

다음은 코드 및 상자에 대한 예입니다.

Vue2에서의 커스텀 소품 타이핑

나에게 유효한 솔루션은 @vue/composition-api뿐입니다.

/* eslint-disable @typescript-eslint/no-empty-interface */
import { defineComponent } from '@vue/composition-api'
import { IAddress } from '@/types'

interface Props {
    address: IAddress
    title: string
}

declare module 'vue/types/vue' {
    interface Vue extends Props {}
}

export default defineComponent({
    props: {
        address: Object,
        title: String,
    },
    setup (props: Props) {
        const address = props.address
        console.log(address)
    },
})

언급URL : https://stackoverflow.com/questions/53095850/custom-prop-type-vue-js