程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2023-06(4)

VUE 自定义弹框(确认框,提示框,列表框)

发布于2021-05-30 12:00     阅读(1713)     评论(0)     点赞(15)     收藏(3)


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

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

  1. <template>
  2. <transition name="confirm-fade">
  3. <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
  4. <div class="confirm-content-wrap" @click.stop>
  5. <h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3>
  6. <p class="my-confirm-content">{{ content }}</p>
  7. <div class="my-operation">
  8. <div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
  9. <p class="my-btn-text my-border-right">{{ cancelText }}</p>
  10. </div>
  11. <div class="confirm-btn" @click="clickFun('clickConfirm')">
  12. <p class="my-btn-text">{{ confirmText }}</p>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. </transition>
  18. </template>
  19. <script type="text/ecmascript-6">
  20. export default {
  21. data () {
  22. return {
  23. isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
  24. titleText: '操作提示', // 提示框标题
  25. content: 'Say Something ...', // 提示框的内容
  26. cancelText: '取消', // 取消按钮的文字
  27. confirmText: '确认', // 确认按钮的文字
  28. type: 'confirm', // 表明弹框的类型:confirm - 确认弹窗(有取消按钮);alert - 通知弹框(没有取消按钮)
  29. outerData: null // 用于记录外部传进来的数据,也可以给外部监听userBehavior,事件的函数提供判断到底是哪个事件触发的
  30. }
  31. },
  32. methods: {
  33. show (content, config) {
  34. this.content = content || 'Say Something ...'
  35. if (Object.prototype.toString.call(config) === '[object Object]') {
  36. // 确保用户传递的是一个对象
  37. this.titleText = config.titleText || ''
  38. this.cancelText = config.cancelText || '取消'
  39. this.confirmText = config.confirmText || '确认'
  40. this.type = config.type || 'confirm'
  41. this.outerData = config.data || null
  42. }
  43. this.isShowConfirm = true
  44. },
  45. hidden () {
  46. this.isShowConfirm = false
  47. this.titleText = '操作提示'
  48. this.cancelText = '取消'
  49. this.confirmText = '确认'
  50. this.type = 'confirm'
  51. this.outerData = null
  52. },
  53. clickFun (type) {
  54. this.$emit('userBehavior', type, this.outerData)
  55. this.hidden()
  56. }
  57. }
  58. }
  59. </script>
  60. <style scoped>
  61. .my-confirm {
  62. position: fixed;
  63. top: 0;
  64. left: 0;
  65. right: 0;
  66. bottom: 0;
  67. background-color: rgba(0, 0, 0, 0.5);
  68. z-index: 998;
  69. /* 这里防止当用户长按屏幕,出现的黑色背景色块,以及 iPhone 横平时字体的缩放问题 */
  70. -webkit-text-size-adjust: 100%;
  71. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  72. }
  73. /* 进入和出去的动画 */
  74. .confirm-fade-enter-active {
  75. animation: opacity 0.3s;
  76. }
  77. .confirm-fade-enter-active .confirm-content-wrap {
  78. animation: scale 0.3s;
  79. }
  80. .confirm-fade-leave-active {
  81. animation: outOpacity 0.2s;
  82. }
  83. /* 包裹层容器样式 */
  84. .confirm-content-wrap {
  85. position: absolute;
  86. top: 28%;
  87. left: 0;
  88. right: 0;
  89. width: 280px;
  90. margin: 0 auto;
  91. background-color: #fff;
  92. border-radius: 5px;
  93. z-index: 999;
  94. user-select: none;
  95. }
  96. /* 顶部标题部分 */
  97. .my-confirm-title {
  98. padding-top: 20px;
  99. text-align: center;
  100. font-size: 20px;
  101. font-weight: 500;
  102. color: #333;
  103. }
  104. /* 中间内容部分 */
  105. .my-confirm-content {
  106. padding: 0 15px;
  107. padding-top: 20px;
  108. margin-bottom: 32px;
  109. text-align: center;
  110. font-size: 16px;
  111. color: #666;
  112. line-height: 1.5;
  113. }
  114. /* 底部按钮样式 */
  115. .my-operation {
  116. display: flex;
  117. border-top: 1px solid #eee;
  118. }
  119. .my-operation .my-cancel-btn, .confirm-btn {
  120. flex: 1;
  121. }
  122. .my-operation .confirm-btn {
  123. color: #ffb000;
  124. }
  125. .my-operation .my-btn-text {
  126. text-align: center;
  127. font-size: 16px;
  128. margin: 8px 0;
  129. padding: 6px 0;
  130. }
  131. /* 其他修饰样式 */
  132. .my-border-right {
  133. border-right: 1px solid #eee;
  134. }
  135. /* 进来的动画 */
  136. @keyframes opacity {
  137. 0% {
  138. opacity: 0;
  139. }
  140. 100% {
  141. opacity: 1;
  142. }
  143. }
  144. @keyframes scale {
  145. 0% {
  146. transform: scale(0);
  147. }
  148. 60% {
  149. transform: scale(1.1);
  150. }
  151. 100% {
  152. transform: scale(1);
  153. }
  154. }
  155. /* 出去的动画 */
  156. @keyframes outOpacity {
  157. 0% {
  158. opacity: 1;
  159. }
  160. 100% {
  161. opacity: 0;
  162. }
  163. }
  164. </style>

调用:

(1)提示框的使用:

  1. <DialogView ref="myDialog" @userBehavior="changeData"></DialogView>
  2. ……
  3. //提示框
  4. this.$refs.myDialog.show(content, {
  5. type: 'alert',
  6. confirmText: 'OK',
  7. cancelText: '取消',
  8. titleText: '',
  9. data: null
  10. })

效果:

(2)确认框:

  1. this.$refs.myDialog.show('要兑换这个商品么?', {
  2. type: 'confirm',
  3. confirmText: '立即兑换',
  4. cancelText: '不用了',
  5. titleText: '',
  6. data: {shop: shop, operate: 'exchange'}
  7. })

效果:

当为确认框时的按键处理:changeData

  1. <DialogView ref="myDialog" @userBehavior="changeData"></DialogView>
  2. ……
  3. changeData (type, data) {
  4. console.log('changeData',data)
  5. if (type === 'clickConfirm') {
  6. if (data.operate === 'exchange') {
  7. // this.reduceEnergy(data.shop)
  8. this.exchangeCoupon(data.shop)
  9. } else if (data.operate === 'downLoad') {
  10. window.location = data.url
  11. } else if (data.operate === 'login') {
  12. this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'})
  13. this.isLogin = false
  14. }
  15. }
  16. },

 

 

 

 

 

 

 

 

原文链接:https://blog.csdn.net/liuye066/article/details/117351919




所属网站分类: 技术文章 > 博客

作者:听说你很拽

链接:http://www.qianduanheidong.com/blog/article/115926/f670f89b2a0b7ad54c5b/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

15 0
收藏该文
已收藏

评论内容:(最多支持255个字符)