vue.js 에서 window.open 팝업창 띄우기

vue.js 에서 윈도우 팝업 띄우는 예제

 

컴포넌트 폴더에 popup.vue 파일을 추가

src\components\winPopup.vue

<template>
  팝업입니다
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>

<style lang="scss" scoped></style>

 

팝업을 띄울 페이지에 코드 추가

pages\pageEx1.vue

<template>
  <q-btn @click="btnPopup" label="팝업"></q-btn>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {},
  methods: {
    btnPopup: function () {
      window.open("/winPopup", "_blank", "width=300,height=500");
    },
  },
};
</script>

<style></style>

 

routes.js에 winPopup 추가

{
    path: "/popup",
    component: () => import("layouts/PopupLayout.vue"),
    children: [
      {
        path: "/winPopup",
        component: () => import("components/popup/winPopup.vue"),
      },
    ],
  },

routes.js 전체코드

const routes = [
  {
    path: "/",
    component: () => import("layouts/MainLayout.vue"),
    children: [
      {
        path: "/ex1",
        component: () => import("src/pages/pageEx1.vue"),
        props: true,
      },
    ],
  },
  {
    path: "/popup",
    component: () => import("layouts/PopupLayout.vue"),
    children: [
      {
        path: "/winPopup",
        component: () => import("components/popup/winPopup.vue"),
      },
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: "/:catchAll(.*)*",
    component: () => import("pages/ErrorNotFound.vue"),
  },
];

export default routes;

 

MainLayout.vue를 사용하게 되면 여기에 사용되는 css가 팝업에도 적용이 되어서

팝업용 레이아웃을 따로 추가했다

layouts\PopupLayout.vue

<template>
  <q-layout>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>

<style></style>

 

결과확인