How to add Dialog Component to Vuejs App
vue
7
component
5
Male avatar

loveprogramming viết ngày 08/04/2021

https://ozenero.com/how-to-add-dialog-component-to-vuejs-app

In this tutorial, grokonez.com shows you way to add a Dialog Component to Vuejs App.

Demo

vue-dialog-component-example

Create Dialog component

In src folder, create components, then add GkzDialog.vue file:

src/components/GkzDialog.vue


<template>
  <div class="modal" v-show="show">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title mx-auto"> { { title}}</h5>
        </div>
        <div class="modal-body" v-if="announcement">
          <p> { { announcement}}</p>
        </div>
        <div class="modal-footer">
          <button @click="dismiss" type="button" class="btn btn-primary mx-auto">OK</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    announcement: {
      type: String,
      required: false
    }
  },
  methods: {
    dismiss() {
      this.$emit("close");
    }
  },
  created() {
    const escHandler = e => {
      if (e.key === "Escape" && this.show) {
        this.dismiss();
      }
    };

    document.addEventListener("keydown", escHandler);
    this.$once("hook:destroyed", () => {
      document.removeEventListener("keydown", escHandler);
    });
  }
};
</script>

<style>
.modal {
  background: #aaa;
  display: flex;
}
</style>
</script>

<style>
.modal {
  background: #aaa;
  display: flex;
}
</style>

More at: https://ozenero.com/how-to-add-dialog-component-to-vuejs-app

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/frontend/vuejs/vuejsnodejsexpressrestapismongooseormmongodbcrudexample Vue.js + Node.js/Express RestAPIs – Mongoose ODM + Mon...
loveprogramming viết 5 tháng trước
0 0
Male avatar
0 0
https://grokonez.com/frontend/vuejs/vuejsspringbooth2databaseexampleembeddedmodespringdatajparestapiscrudexample Vue.js + Spring Boot + H2 Databas...
loveprogramming viết 5 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!