uni-popup-message.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <view class="uni-popup-message" :class="'uni-popup__'+[type]">
  3. <text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
  4. </view>
  5. </template>
  6. <script>
  7. /**
  8. * PopUp 弹出层-消息提示
  9. * @description 弹出层-消息提示
  10. * @tutorial https://ext.dcloud.net.cn/plugin?id=329
  11. * @property {String} type = [success|warning|info|error] 主题样式
  12. * @value success 成功
  13. * @value warning 提示
  14. * @value info 消息
  15. * @value error 错误
  16. * @property {String} message 消息提示文字
  17. * @property {String} duration 显示时间,设置为 0 则不会自动关闭
  18. */
  19. export default {
  20. name: 'UniPopupMessage',
  21. props: {
  22. /**
  23. * 主题 success/warning/info/error 默认 success
  24. */
  25. type: {
  26. type: String,
  27. default: 'success'
  28. },
  29. /**
  30. * 消息文字
  31. */
  32. message: {
  33. type: String,
  34. default: ''
  35. },
  36. /**
  37. * 显示时间,设置为 0 则不会自动关闭
  38. */
  39. duration: {
  40. type: Number,
  41. default: 3000
  42. }
  43. },
  44. inject: ['popup'],
  45. data() {
  46. return {}
  47. },
  48. created() {
  49. this.popup.childrenMsg = this
  50. },
  51. methods: {
  52. open() {
  53. if (this.duration === 0) return
  54. clearTimeout(this.popuptimer)
  55. this.popuptimer = setTimeout(() => {
  56. this.popup.close()
  57. }, this.duration)
  58. },
  59. close() {
  60. clearTimeout(this.popuptimer)
  61. }
  62. }
  63. }
  64. </script>
  65. <style scoped>
  66. .uni-popup-message {
  67. /* #ifndef APP-NVUE */
  68. display: flex;
  69. /* #endif */
  70. flex-direction: row;
  71. background-color: #e1f3d8;
  72. padding: 10px 15px;
  73. border-color: #eee;
  74. border-style: solid;
  75. border-width: 1px;
  76. }
  77. .uni-popup-message-text {
  78. font-size: 14px;
  79. padding: 0;
  80. }
  81. .uni-popup__success {
  82. background-color: #e1f3d8;
  83. }
  84. .uni-popup__success-text {
  85. color: #67C23A;
  86. }
  87. .uni-popup__warn {
  88. background-color: #faecd8;
  89. }
  90. .uni-popup__warn-text {
  91. color: #E6A23C;
  92. }
  93. .uni-popup__error {
  94. background-color: #fde2e2;
  95. }
  96. .uni-popup__error-text {
  97. color: #F56C6C;
  98. }
  99. .uni-popup__info {
  100. background-color: #F2F6FC;
  101. }
  102. .uni-popup__info-text {
  103. color: #909399;
  104. }
  105. </style>