u-alert.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <u-transition
  3. mode="fade"
  4. :show="show"
  5. >
  6. <view
  7. class="u-alert"
  8. :class="[`u-alert--${type}--${effect}`]"
  9. @tap.stop="clickHandler"
  10. :style="[$u.addStyle(customStyle)]"
  11. >
  12. <view
  13. class="u-alert__icon"
  14. v-if="showIcon"
  15. >
  16. <u-icon
  17. :name="iconName"
  18. size="18"
  19. :color="iconColor"
  20. ></u-icon>
  21. </view>
  22. <view
  23. class="u-alert__content"
  24. :style="[{
  25. paddingRight: closable ? '20px' : 0
  26. }]"
  27. >
  28. <text
  29. class="u-alert__content__title"
  30. v-if="title"
  31. :style="[{
  32. fontSize: $u.addUnit(fontSize),
  33. textAlign: center ? 'center' : 'left'
  34. }]"
  35. :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
  36. >{{ title }}</text>
  37. <text
  38. class="u-alert__content__desc"
  39. v-if="description"
  40. :style="[{
  41. fontSize: $u.addUnit(fontSize),
  42. textAlign: center ? 'center' : 'left'
  43. }]"
  44. :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
  45. >{{ description }}</text>
  46. </view>
  47. <view
  48. class="u-alert__close"
  49. v-if="closable"
  50. @tap.stop="closeHandler"
  51. >
  52. <u-icon
  53. name="close"
  54. :color="iconColor"
  55. size="15"
  56. ></u-icon>
  57. </view>
  58. </view>
  59. </u-transition>
  60. </template>
  61. <script>
  62. import props from './props.js';
  63. /**
  64. * Alert 警告提示
  65. * @description 警告提示,展现需要关注的信息。
  66. * @tutorial https://www.uviewui.com/components/alertTips.html
  67. *
  68. * @property {String} title 显示的文字
  69. * @property {String} type 使用预设的颜色 (默认 'warning'
  70. * @property {String} description 辅助性文字,颜色比title浅一点,字号也小一点,可选
  71. * @property {Boolean} closable 关闭按钮(默认为叉号icon图标) (默认 false
  72. * @property {Boolean} showIcon 是否显示左边的辅助图标 ( 默认 false
  73. * @property {String} effect 多图时,图片缩放裁剪的模式 (默认 'light'
  74. * @property {Boolean} center 文字是否居中 (默认 false
  75. * @property {String | Number} fontSize 字体大小 (默认 14 )
  76. * @property {Object} customStyle 定义需要用到的外部样式
  77. * @event {Function} click 点击组件时触发
  78. * @example <u-alert :title="title" type = "warning" :closable="closable" :description = "description"></u-alert>
  79. */
  80. export default {
  81. name: 'u-alert',
  82. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  83. data() {
  84. return {
  85. show: true
  86. }
  87. },
  88. computed: {
  89. iconColor() {
  90. return this.effect === 'light' ? this.type : '#fff'
  91. },
  92. // 不同主题对应不同的图标
  93. iconName() {
  94. switch (this.type) {
  95. case 'success':
  96. return 'checkmark-circle-fill';
  97. break;
  98. case 'error':
  99. return 'close-circle-fill';
  100. break;
  101. case 'warning':
  102. return 'error-circle-fill';
  103. break;
  104. case 'info':
  105. return 'info-circle-fill';
  106. break;
  107. case 'primary':
  108. return 'more-circle-fill';
  109. break;
  110. default:
  111. return 'error-circle-fill';
  112. }
  113. }
  114. },
  115. methods: {
  116. // 点击内容
  117. clickHandler() {
  118. this.$emit('click')
  119. },
  120. // 点击关闭按钮
  121. closeHandler() {
  122. this.show = false
  123. }
  124. }
  125. }
  126. </script>
  127. <style lang="scss" scoped>
  128. @import "../../libs/css/components.scss";
  129. .u-alert {
  130. position: relative;
  131. background-color: $u-primary;
  132. padding: 8px 10px;
  133. @include flex(row);
  134. align-items: center;
  135. border-top-left-radius: 4px;
  136. border-top-right-radius: 4px;
  137. border-bottom-left-radius: 4px;
  138. border-bottom-right-radius: 4px;
  139. &--primary--dark {
  140. background-color: $u-primary;
  141. }
  142. &--primary--light {
  143. background-color: #ecf5ff;
  144. }
  145. &--error--dark {
  146. background-color: $u-error;
  147. }
  148. &--error--light {
  149. background-color: #FEF0F0;
  150. }
  151. &--success--dark {
  152. background-color: $u-success;
  153. }
  154. &--success--light {
  155. background-color: #f5fff0;
  156. }
  157. &--warning--dark {
  158. background-color: $u-warning;
  159. }
  160. &--warning--light {
  161. background-color: #FDF6EC;
  162. }
  163. &--info--dark {
  164. background-color: $u-info;
  165. }
  166. &--info--light {
  167. background-color: #f4f4f5;
  168. }
  169. &__icon {
  170. margin-right: 5px;
  171. }
  172. &__content {
  173. @include flex(column);
  174. flex: 1;
  175. &__title {
  176. color: $u-main-color;
  177. font-size: 14px;
  178. font-weight: bold;
  179. color: #fff;
  180. margin-bottom: 2px;
  181. }
  182. &__desc {
  183. color: $u-main-color;
  184. font-size: 14px;
  185. flex-wrap: wrap;
  186. color: #fff;
  187. }
  188. }
  189. &__title--dark,
  190. &__desc--dark {
  191. color: #FFFFFF;
  192. }
  193. &__text--primary--light,
  194. &__text--primary--light {
  195. color: $u-primary;
  196. }
  197. &__text--success--light,
  198. &__text--success--light {
  199. color: $u-success;
  200. }
  201. &__text--warning--light,
  202. &__text--warning--light {
  203. color: $u-warning;
  204. }
  205. &__text--error--light,
  206. &__text--error--light {
  207. color: $u-error;
  208. }
  209. &__text--info--light,
  210. &__text--info--light {
  211. color: $u-info;
  212. }
  213. &__close {
  214. position: absolute;
  215. top: 11px;
  216. right: 10px;
  217. }
  218. }
  219. </style>