uni-popup-message.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <view class="uni-popup-message">
  3. <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
  4. <slot>
  5. <text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
  6. </slot>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. import popup from '../uni-popup/popup.js'
  12. /**
  13. * PopUp 弹出层-消息提示
  14. * @description 弹出层-消息提示
  15. * @tutorial https://ext.dcloud.net.cn/plugin?id=329
  16. * @property {String} type = [success|warning|info|error] 主题样式
  17. * @value success 成功
  18. * @value warning 提示
  19. * @value info 消息
  20. * @value error 错误
  21. * @property {String} message 消息提示文字
  22. * @property {String} duration 显示时间,设置为 0 则不会自动关闭
  23. */
  24. export default {
  25. name: 'uniPopupMessage',
  26. mixins:[popup],
  27. props: {
  28. /**
  29. * 主题 success/warning/info/error 默认 success
  30. */
  31. type: {
  32. type: String,
  33. default: 'success'
  34. },
  35. /**
  36. * 消息文字
  37. */
  38. message: {
  39. type: String,
  40. default: ''
  41. },
  42. /**
  43. * 显示时间,设置为 0 则不会自动关闭
  44. */
  45. duration: {
  46. type: Number,
  47. default: 3000
  48. },
  49. maskShow:{
  50. type:Boolean,
  51. default:false
  52. }
  53. },
  54. data() {
  55. return {}
  56. },
  57. created() {
  58. this.popup.maskShow = this.maskShow
  59. this.popup.messageChild = this
  60. },
  61. methods: {
  62. timerClose(){
  63. if(this.duration === 0) return
  64. clearTimeout(this.timer)
  65. this.timer = setTimeout(()=>{
  66. this.popup.close()
  67. },this.duration)
  68. }
  69. }
  70. }
  71. </script>
  72. <style lang="scss" >
  73. .uni-popup-message {
  74. /* #ifndef APP-NVUE */
  75. display: flex;
  76. /* #endif */
  77. flex-direction: row;
  78. justify-content: center;
  79. }
  80. .uni-popup-message__box {
  81. background-color: #e1f3d8;
  82. padding: 10px 15px;
  83. border-color: #eee;
  84. border-style: solid;
  85. border-width: 1px;
  86. flex: 1;
  87. }
  88. @media screen and (min-width: 500px) {
  89. .fixforpc-width {
  90. margin-top: 20px;
  91. border-radius: 4px;
  92. flex: none;
  93. min-width: 380px;
  94. /* #ifndef APP-NVUE */
  95. max-width: 50%;
  96. /* #endif */
  97. /* #ifdef APP-NVUE */
  98. max-width: 500px;
  99. /* #endif */
  100. }
  101. }
  102. .uni-popup-message-text {
  103. font-size: 14px;
  104. padding: 0;
  105. }
  106. .uni-popup__success {
  107. background-color: #e1f3d8;
  108. }
  109. .uni-popup__success-text {
  110. color: #67C23A;
  111. }
  112. .uni-popup__warn {
  113. background-color: #faecd8;
  114. }
  115. .uni-popup__warn-text {
  116. color: #E6A23C;
  117. }
  118. .uni-popup__error {
  119. background-color: #fde2e2;
  120. }
  121. .uni-popup__error-text {
  122. color: #F56C6C;
  123. }
  124. .uni-popup__info {
  125. background-color: #F2F6FC;
  126. }
  127. .uni-popup__info-text {
  128. color: #909399;
  129. }
  130. </style>