Vue New Window Popup 새 창 팝업 띄우기 및 CSS 적용

새창으로 띄운 비밀번호 찾기 팝업창(다이알로그와 어떻게 다른지 비교해보세요)

팝업의 종류: 다이알로그(모달) vs 팝업

우리는 흔히 팝업이 나타난다. 팝업창이 열린다. 등의 표현을 씁니다만 한국에서 일반 유저에게 다이알로그 혹은 모달이란 말을 익숙치 않습니다. 지난 시간에는 공용 팝업을 만들어보았는데 여기서 저희가 사용한 것은 <v-dialog> 태그였으며, 이 태그는 명칭 그대로 다이알로그를 생성하는 태그입니다. 다시 한번 앱에서 로그인 버튼을 눌러 나타나는 것을 확인해십시오. 

https://aid-your-life.tistory.com/entry/Vue-%EB%82%98%EB%A7%8C%EC%9D%98-%EC%BB%B4%ED%8D%BC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-featCommon-Popup%EA%B3%B5%EC%9A%A9-%ED%8C%9D%EC%97%85

 

- 다이알로그(=모달): 현재 페이지에 새로운 레이어를 띄우는 방식으로 유저가 팝업을 쉽게 인지할 수 있도록 그 뒤에 검은색 레이어를 까는 것이 일반적

- 팝업: 새로운 브라우저 페이지를 여는 방식. 일부 페이지에서 팝업 차단이 되어 있는 경우 열리지 않을 수 있음

 

이번 글에서는 비밀번호 찾기 팝업창을 여는 작업을 해보겠습니다.

 

또한 저희 앱에서는 모든 페이지의 상단에 항상 nav(네비게이션 바)가 표시되는데 이를 css를 통해 나타나지 않도록 처리까지 필요합니다.

 

 

Login 로그인 페이지 및 라우터 등록

먼저 로그인 페이지에서 팝업창을 열기 위한 버튼을 추가해야 합니다. 

샘플 코드를 보면서 같이 살펴보겠습니다. 이전에 만들어 놓은 LoginView.vue 파일을 이용하여 작업하기 때문에 생략된 내용들은 먼저 Login 화면을 구성한 후 진행하시길 바랍니다.

 

- Template (LoginView.vue)

      ...
      <v-form>
        <v-text-field
		...
        </v-text-field>
        <v-text-field
		...
        </v-text-field>
        <v-btn color="black" block x-large dark @click="RequestLogin()"
          >Login
        </v-btn>
        <v-dialog v-model="commonPop" width="600">
          <common-pop></common-pop>
        </v-dialog>
        <v-card-actions>
          <v-checkbox color="black" label="Remeber me"></v-checkbox>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="ForgotPassword()">
            Forgot Your Password?
          </v-btn>
        </v-card-actions>
      </v-form>
      ...

Remember me 체크 박스 코드 다음에 <v-spacer> 를 통해 공간을 확보한 후, <v-btn>을 넣었습니다.

버튼에는 "text" (텍스트형태의 버튼 지정) 와 "color" (색상 지정) prop을 사용하였고 클릭 이벤트도 추가 했습니다.

앱을 열어 확인하면 로그인 버튼 우측 아래에 "FORGOT YOUR PASSWORD?" 버튼이 생긴 것을 볼 수 있습니다. 이제 스크립트에서 클릭 이벤트 "ForgotPassword()"에 대한 내용을 정의해봅시다.

 

- Script (LoginView.vue)

<script lang="ts">
...

export default class LoginView extends Vue {

...

  ForgotPassword() {
    window.open("/account-pop", "_blank", "width=480,height=720");
  }
}
</script>

window.open 을 이용하여 새 창을 열고 "/account-pop" 주소를 불러옵니다. width와 height를 통해 팝업창의 사이즈를 조정할 수 있습니다.

 

 

Accout Popup 라우터 등록

먼저 popups 폴더에 AccountPop.vue 파일을 생성한 후 rounter의 index.ts로 이동합니다. 팝업창에서 불러오는 내용은 새로운 주소("/account-pop")를 가져오기 때문에 이에 대한 라우터를 등록합니다.

 

- router > index.ts

const routes: Array<RouteConfig> = [
	
    ...
    
  {
    path: '/account-pop',
    name: 'account-pop',
    component: () => import('../components/popups/AccountPop.vue')
  }     
]

 

 

Account Popup - 팝업창에 나타나는 내용

좀 전에 생성한 AccountPop.vue는 팝업창에 표시될 내용을 작성합니다. 저는 로그인 페이지에서 작성한 코드를 일부 참고로 하여 간단하게 만들어 보았습니다. 

 

- Template (AccountPop.vue)

<template>
  <v-card elevation="0">
    <v-card-text>
      <span> Forgot your password? </span>
      <v-form class="pt-3">
        <v-text-field
          prepend-inner-icon="mdi-account"
          name="login"
          label="ID"
          type="text"
          v-model="loginId"
          outlined
        >
        </v-text-field>
        <v-text-field
          prepend-inner-icon="mdi-phone"
          name="phone"
          label="Phone Number"
          type="number"
          v-model="phone"
          outlined
          @keyup.enter="BtnContinue()"
        >
        </v-text-field>
        <v-btn color="black" block x-large dark @click="BtnContinue()"
          >Continue
        </v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>

2번째 v-text-field의 내용을 전화 번호와 관련된 것으로 바꾸었으며, continue 버튼 클릭 시 "BtnContinue()"를 호출합니다.

이에 대한 내용은 스크립트를 보겠습니다.

 

- Script (AccountPop.vue)

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class AccountPop extends Vue {
  private loginId = "";
  private phone = "";

  BtnContinue() {
    alert("New Password has benn sent to you phone");
  }
}

"BtnContinue()"는 알림창으로 "New Password has been sent to your phone"메시지를 출력하도록 했습니다. 여기까지 작업한 후 앱에서 버튼을 눌러 팝업을 확인해봅시다. 

팝업 상단에 표시되는 <nav>

팝업 내용을 정상적으로 표시되지만, 앱에 항상 표시되는 네비게이션이 팝업에도 동일하게 나오는 것을 확인할 수 있습니다. 팝업의 UI로는 알맞지 않기 때문에 이 부분은 Style에서 CSS로 보이지 않도록 처리하겠습니다.

 

- Style (AccountPop.vue)

<style lang="scss">
.navi-bar {
  display: none;
}
</style>

"navi-bar" 의 display를 none으로 설정한 후 이를 적용시키기 위해 App.vue로 이동해서 <nav> 태그에 "navi-bar"라는 클래스명을 주어야 합니다. 이 설정은 "AccountPop" 내에서만 적용되었으므로, 다른 페이지에서 네비게이션을 사라지도록 하지는 않습니다.

 

- Template (App.vue)

<template>
  <v-app id="app">
    <nav class="navi-bar">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/login">Login</router-link>       
    </nav>
    <router-view/>
  </v-app>
</template>

모든 작업이 완료되었습니다. 이제 정상적으로 팝업이 나오는 지 확인합니다.

이번 시간에는 새 창으로 팝업 띄우는 방법과 간단한 CSS 적용 방법을 알아보았습니다. Vuetify에 있는 UI 컴퍼넌트를 활용하여 자신만의 팝업을 만들어 보십시오.

다음 시간에는 "v-model"에 대하여 알아보도록 하겠습니다.