<!DOCTYPE html> <html> <head> <title>Modal Component</title> <script src="https://unpkg.com/vue"></script> <link rel="stylesheet" type="text/css" href="/style.css" /> <!-- template for the modal component --> <script type="text/x-template" id="modal-template"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> default header </slot> </div> <div class="modal-body"> <slot name="body"> default body </slot> </div> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> </div> </div> </div> </transition> </script> </head> <body> <!-- app --> <div id="app"> <button id="show-modal" @click="showModal = true">Show Modal</button> <!-- use the modal component, pass in the prop --> <modal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <h3 slot="header">custom header</h3> </modal> </div> <script> // register modal component Vue.component("modal", { template: "#modal-template" }); // start app new Vue({ el: "#app", data: { showModal: false } }); </script> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
Load balance : Server 03
Load balance : Server 03
