Vue에서 향후 소품 데이터 또는 소품 디폴트 전달 방법에 따라 결정

Vue에서 향후 소품 데이터 또는 소품 디폴트 전달 방법에 따라 결정

템플릿으로

       <div :style="{width:screenCheckFunc(width) }></div>

소품

data: {
  screenWidth: window.innerWidth,
},

props: {
 width: {
   type: String,
   default: "35.5rem"
 },
 padding: {
   type: String,
   default: "2rem"
}

방법에 있어서

screenCheckFunc(val){
  if(this.screenWidth > 1024){
       return val
      } else {
        val.default <-- something like this
      }
    }

(인val패스 소품을 원합니다)

소품 디폴트 통과가 가능합니까?elsefunc를 사용하는가?

편집하다

질문이 불분명했다면 죄송합니다.

<div :style="{width:screenWidth > 1024 ? width : '35.rem' ,padding:screenWidth > 1024 ? padding : '2rem'  }></div>

만약 내가 3진법으로 쓴다면 나는 써야 한다.screenWidth > 1024이 기능을 단순화할 수 있기 때문에 기능을 호출하고 소품만 전달하면 되는 건가요?

다음 명령을 사용하여 기본값에 액세스할 수 있습니다.this.$options.props['propName'].default. 이 경우 프로포트의 디폴트 값에 액세스 할 수 있습니다.width타고this.$options.props['width'].default

사용할 수 있는 것은 다음과 같습니다.

<div :style="screenCheckScreenWidthAndSetStyle()"></div>

그리고.

screenCheckScreenWidthAndSetStyle() {
   if (this.screenWidth > 1024) {
      return {width: this.width, padding: this.padding};
   } else {
      return {width: this.$options.props['width'].default, padding: this.$options.props['padding'].default};
   }

다음과 같은 객체 배열을 정의하고 소품으로 전달합니다.

widthSizes:[
  {size:'1024' , width:'35.5'},
  {size:'320' , width:'20'}]


screenCheckFunc(val){
(let width in this.widthSizes){
    if(width.size === val){
        return val.width
    }
}

언급URL : https://stackoverflow.com/questions/69096120/based-on-condition-how-to-pass-coming-propss-data-or-propss-default-in-vue