ModalExample.vue 1016 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div>
  3. <h1>模态框</h1>
  4. <button class="btn btn-default" @click="show">显示</button>
  5. <Modal v-model:show="modal" title="hello">
  6. <div>hello</div>
  7. </Modal>
  8. <h1>模态框-标题+内容+结尾</h1>
  9. <button class="btn btn-default" @click="show1">显示</button>
  10. <Modal v-model:show="modal1" title="hello" :show-canel-button="false" :show-ok-button="false">
  11. <template #header>
  12. 标题
  13. </template>
  14. <template #default>
  15. 内容
  16. </template>
  17. <template #footer>
  18. 结尾
  19. </template>
  20. </Modal>
  21. </div>
  22. </template>
  23. <script>
  24. import Modal from '@/modal/index.js';
  25. export default {
  26. components: {
  27. 'Modal': Modal,
  28. },
  29. data: function(){
  30. return {
  31. modal: false,
  32. modal1: false,
  33. };
  34. },
  35. mounted: function(){
  36. },
  37. methods: {
  38. show: function(){
  39. this.modal = true;
  40. },
  41. show1: function(){
  42. this.modal1 = true;
  43. },
  44. },
  45. };
  46. </script>
  47. <style scoped>
  48. </style>