程序小屋

记录生活中的点滴，分享、学习、创新

首页 Web前端 VUE Angular JAVA
文章内容 1623902331

vue自定义弹框效果（确认框、提示框）

本文实例为大家分享了vue自定义弹框效果的具体代码，供大家参考，具体内容如下

1、自定义确认框和提示框

根据传入的type来判断是确认框或提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<template>
  <transition name="confirm-fade">
    <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
      <div class="confirm-content-wrap" @click.stop>
        <h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3>
        <p class="my-confirm-content">{{ content }}</p>
        <div class="my-operation">
          <div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
            <p class="my-btn-text my-border-right">{{ cancelText }}</p>
          </div>
          <div class="confirm-btn" @click="clickFun('clickConfirm')">
            <p class="my-btn-text">{{ confirmText }}</p>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
  
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
      titleText: '操作提示', // 提示框标题
      content: 'Say Something ...', // 提示框的内容
      cancelText: '取消', // 取消按钮的文字
      confirmText: '确认', // 确认按钮的文字
      type: 'confirm', // 表明弹框的类型：confirm - 确认弹窗（有取消按钮）；alert - 通知弹框（没有取消按钮）
      outerData: null // 用于记录外部传进来的数据，也可以给外部监听userBehavior，事件的函数提供判断到底是哪个事件触发的
    }
  },
  methods: {
    show (content, config) {
      this.content = content || 'Say Something ...'
  
      if (Object.prototype.toString.call(config) === '[object Object]') {
        // 确保用户传递的是一个对象
        this.titleText = config.titleText || ''
        this.cancelText = config.cancelText || '取消'
        this.confirmText = config.confirmText || '确认'
        this.type = config.type || 'confirm'
        this.outerData = config.data || null
      }
  
      this.isShowConfirm = true
    },
    hidden () {
      this.isShowConfirm = false
      this.titleText = '操作提示'
      this.cancelText = '取消'
      this.confirmText = '确认'
      this.type = 'confirm'
      this.outerData = null
    },
    clickFun (type) {
      this.$emit('userBehavior', type, this.outerData)
      this.hidden()
    }
  }
}
</script>
  
<style scoped>
.my-confirm {
  position: fixed;
  top: 0;
 &
*
关于本站及版权申明 | 联系站长 | 隐私保护 | 站长统计
本站所收录作品（包括内容和评论）版权为原创作者所有，本网站仅为网友写作提供上传空间储存平台。本站所收录作品、互动话题、用户评论及本站所做之广告均属第三方行为 与本站立场无关。网站页面版权为晨汐文学网所有，任何单位、个人未经授权不得转载、复制、分发，以及用作商业用途。
重要声明：请所有作者发布作品时严格遵守国家互联网信息管理办法规定。我们拒绝任何色情、暴力、反动言论及文字，一经发现，立即删除违规作品，严重者将同时封掉作者账号。 请大家联合起来，共创和谐干净网络。 如有涉嫌侵权或违法违规内容，请联系我们，以便及时处理。
Copyright © www.cc5332.com All Rights Reserved. 鄂ICP备2021010364号-1