8. vue.js | window.open() 으로 Popup 만들기

vue.js 는 Single Page Application 이기 때문에 window.open() 비추천

 

 

버튼 눌러서 popup을 여는게 아닌 홈페이지가 로딩되면 바로 보이는 popup 이다

실제 사용 코드는 보안때문에 가져올수 없는 프로젝트라 간략하게 작성했다.

---

main.vue

window.open(url, 이름, 팝업창 가로길이, 팝업창 세로길이, 팝업창 시작점 top, 시작점 left);
window.open("noticePopup", "", "width=500, height=600, top=100, left=100");
window.open 함수의 url 자리에 있는 "noticePopup" 은 router.js에 등록해놓은 router 링크이다.

<template>
  <div>
    <div>
      
    </div>
  </div>
</template>

<script>
export default {
  components: {
    noticePopup
  },
  data() {
    return {
      
    };
  },
  mounted() {
   this.getNoticePopup();
  },
  methods: {
    getNoticePopup(){
      let n = 0;
      let left = 200;
      let top = 150;
     
      this.$axios.get(`/mitop/common/getNoticePopup`)
         .then(({data}) => {
              for (let i = 0, i < data.length; i++){
              left += n;
              top += n;
              let attr = 'top=' + top + ', left =' + left + ', width=650, height =500, resizable=no, status=no";              

              window.open("noticePopup?param="+data[i].pkmTopNotice, '', attr);
            n += 20;
            }
      }).catch((error) => console.log(error));
    },

  },
  
  
};
</script>

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

---

popup.vue

<template>
  <div>
    <div>
      <h2>{{this.subject}}</h2>
      <p v-html="this.contents"></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subject: '',
      contents: '',
    };
  },
  mounted() {
    let pkmTopNotice = '';
    let query = window.location.search;
    let url = new URLSearchParams(query);
    if (url != null) {
      pkmTopNotice = url.get('param');
    }
    this.getNoticePopup(pkmTopNotice);
  },
  methods: {
    getNoticePopup(pkmTopNotice) {
      this.$axios
        .get(`/mitop/common / getNoticePopup ? pkmTopNotice = ${pkmTopNotice}`)
        .then(({ data }) => {
          this.subject = data[0].subject;
          this.contents = data[0].contents;
        })
        .catch(error => console.log(error));
    },
  },
};
</script>

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

---

mapper-Notice.xml

<select id="getNoticePopup" resultType="NoticdVO" parameterType="Map">
    SELECT * FROM 테이블명
    WHERE POP_YN = 'Y'
    AND DEL_YN = 'N' 
    <if test="pkmTopNotice != null and pkmTopNotice != '' ">
    	AND PKM_TOP_NOTICE = #{pkmTopNotice}
    </if>
    ORDER BY PKM_TOP_NOTICE
</select>

---

router.js

//📁router/router.js
 2import Vue from 'vue';
 3import VueRouter from 'vue-router';
 4import Main from '../views/Main.vue';
 5import Info from '../views/Info.vue';
 6
 7Vue.use(VueRouter);
 8
 9const router = new VueRouter({
10    mode: 'history', //해쉬값 제거 방식
11    routes: [
12        {
13            path: '/',
14            redirect: '/home'
15        },
16        {
17            path: '/home',
18            component: Main
19        },
20        {
21            path: '/Info',
22            component: Info
23        },
		  {
21            path: '/noticePopop',
22            component: noticePopop.vue
23        }
24    ]
25});

---

https://offbyone.tistory.com/312

 

새창을 여는 window.open() 함수 사용법