vue mobile sized view

vue-모바일 크기 보기

Vuejs용 반응형 모바일 크기 래퍼 - 데스크톱 지원을 통해 모바일 크기 웹 앱의 프로토타입을 쉽게 제작할 수 있습니다.

이 프로젝트의 소스와 아이디어는 모두 react-mobile-sized-view 기반으로 합니다.
@junhoyeo님께 특별히 감사드립니다.

데모 및 예시

여기에서 알아보세요

? 용법

yarn add vue-mobile-sized-view

 import Vue from 'vue' ;
import VueMobileSizedView from 'vue-mobile-sized-view' ;

export default Vue . extend ( {
  name : 'ComponentA' ,
  components : {
    VueMobileSizedView
  } ,
  data ( ) {
    return {
      backgroundColor : "#f6dadb" ,
      screenBackgroundColor : "#fefefe" ,
      screenLightShadow : "-31px -31px 62px #FAE0E0" ,
      screenDarkShadow : "31px 31px 62px #EAB6BE" ,
      isRounded : true ,
    } ;
  }
} ) ; 

 < template >
  < vue-mobile-sized-view
    :background-color =" backgroundColor "
    :screen-background-color =" screenBackgroundColor "
    :screen-light-shadow =" screenLightShadow "
    :screen-dark-shadow =" screenDarkShadow "
    :is-rounded =" isRounded " >
    < div > Replace here with your contents. </ div >
  </ vue-mobile-sized-view >
</ template >