实例：vue

实例：vue.js实现模态窗口(弹窗)| Id | Title | DateAdded | SourceUrl | PostType | Body | BlogId | Description | DateUpdated | IsMarkdown | EntryName | CreatedTime | IsActive | AutoDesc | AccessPermission |

| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------|
| 16459901| 实例：vue.js实现模态窗口(弹窗)| 2022-07-08T23:15:00| | BlogPost|

前面曾介绍过使用JS或纯CSS来实现的模态弹窗，比如10款纯CSS模态弹窗/模式窗口(modal popup)，4款响应式模态弹窗(modal popup)，实现弹窗的设计并不难也不复杂，不过如果使用第三方组件Vue.js，则可以让模态窗口(弹窗)的设计变得更加容易，编写代码更少，并且效果更佳。

demodownload

 

https://files.cnblogs.com/files/roak/js-vue-modal-component.rar?t=1657293362

HTML

1. <div id="app">
2. <div class="content">
3.     <p class="subtitle"><strong>Vue.js</strong> 组件</p>
4.     <h1 class="title">模态窗口</h1>
5.     <hr/>
6.     <p>使用模态窗口组件，点击按钮查看详细介绍。</p>
7.     <button class="button is-primary" @click="showModal = true">产品描述</button>
8. </div>
9. <transition name="fade">
10.     <modal v-if="showModal" @close="showModal = false">
11.       <template slot="header">产品描述</template>
12.       <div class="content">
13.         <p>Vue是一套用于构建用户界面的渐进式框架。</p>
14.         <p>与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。</p>
15.       </div>
16.     </modal>
17. </transition>
18. </div>

id为app的div，是vue.js组件监控的元素，id值app需与实例里的jquery编程代码el: '#app'一致。

 

class值为content的div，是存放网页内容的元素标签。里面的按钮使用button元素，其class值是button，另外其有一个@click属性，值为showModal = true。

name值为fade的transition标签，是弹窗容器，该容器的子元素modal，有个v-if属性，其值为showModal；另外还有一个属性@close，其值为showModal = false。

JS

1. <script src='jquery-3.2.1.min.js'></script>
2. <script src='vue.min.js'></script>
3. <script>
4. Vue.component('modal', {
5.   template: `
6.     <div class="modal is-active">
7.       <div class="modal-background"></div>
8.         <div class="modal-card">
9.           <header class="modal-card-head">
10.             <p class="modal-card-title">
11.               <slot name="header"></slot>
12.             </p>
13.             <button class="delete" aria-label="close" @click="$emit('close')"></button>
14.           </header>
15.           <section class="modal-card-body">
16.             <slot></slot>
17.           </section>
18.           <footer class="modal-card-foot">
19.             <slot name="footer">
20.               <button class="button is-success" @click="$emit('close')">OK</button>
21.               <button class="button" @click="$emit('close')">Cancel</button>
22.             </slot>
23.           </footer>
24.         </div>
25.     </div>
26.   ` });
27.  
28.  
29. new Vue({
30.   el: '#app',
31.  
32.   data: {
33.     showModal: false } });
34. </script>

本实例用到JQuery编程，所以首先需要加载jquery.js库文件。此外，还需加载vue.min.js库文件。

弹窗里的OK和Cancel按钮文字在JQuery程序里设置。

CSS

该实例CSS需要引用一个库文件。

1. <link rel='stylesheet' href='bulma.min.css'>

 另外的CSS样式主要是网页内容布局、位置、文字、按钮、弹窗过度效果等样式的个性化设计。

1. #app {
2.   margin: 3.75em auto;
3.   padding: 0.75em;
4.   max-width: 37.5em;
5. }
6.  
7. .container {
8.   margin-bottom: 1.5em;
9. }
10.  
11. .btn-action-delete {
12.   color: #cc4b37;
13.   cursor: pointer;
14. }
15.  
16. .tasks {
17.   list-style: none;
18.   margin-left: 0;
19. }
20.  
21. .task label {
22.   margin: 0 0.125em;
23. }
24.  
25. .completed label {
26.   text-decoration: line-through;
27.   color: #cacaca;
28. }
29.  
30. .fade-enter-active,
31. .fade-leave-active {
32.   transition: opacity 0.2s ease-out;
33. }
34. .fade-enter-active .modal-card,
35. .fade-leave-active .modal-card {
36.   transition: transform 0.2s ease-out;
37. }
38.  
39. .fade-enter,
40. .fade-leave-to {
41.   opacity: 0;
42. }
43. .fade-enter .modal-card,
44. .fade-leave-to .modal-card {
45.   transform: scale(0.9);
46. }

 

总结

本实例介绍了如何用vue.js组件来实现模态弹窗的设计，相比纯JS/CSS实现的弹窗方法，该方法多引用了几个文件(js、css)，不过该方法实现的效果更佳，代码更少，用户使用体验会更好。

 

实例：vue.js实现模态窗口(弹窗) - js技术_卡卡网 (webkaka.com)

| 648658| | 2022-07-08T23:16:00| false| | 2022-07-08T23:15:01.157| true| 前面曾介绍过使用JS或纯CSS来实现的模态弹窗，比如10款纯CSS模态弹窗/模式窗口(modal popup)，4款响应式模态弹窗(modal popup)，实现弹窗的设计并不难也不复杂，不过如果使用第三方组件Vue.js，则可以让模态窗口(弹窗)的设计变得更加容易，编写代码更少，并且效果更佳。 d| Anonymous|