| commit | author | age | ||
| e3ba12 | 1 | <template> |
| Z | 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 | ||
| 62 | <script> | |
| 63 | import props from './props.js'; | |
| 64 | /** | |
| 65 | * Alert 警告提示 | |
| 66 | * @description 警告提示，展现需要关注的信息。 | |
| 67 | * @tutorial https://www.uviewui.com/components/alertTips.html | |
| 68 | * | |
| 69 | * @property {String} title 显示的文字 | |
| 70 | * @property {String} type 使用预设的颜色 （默认 'warning' ） | |
| 71 | * @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选 | |
| 72 | * @property {Boolean} closable 关闭按钮(默认为叉号icon图标) （默认 false ） | |
| 73 | * @property {Boolean} showIcon 是否显示左边的辅助图标 （ 默认 false ） | |
| 74 | * @property {String} effect 多图时，图片缩放裁剪的模式 （默认 'light' ） | |
| 75 | * @property {Boolean} center 文字是否居中 （默认 false ） | |
| 76 | * @property {String | Number} fontSize 字体大小 （默认 14 ） | |
| 77 | * @property {Object} customStyle 定义需要用到的外部样式 | |
| 78 | * @event {Function} click 点击组件时触发 | |
| 79 | * @example <u-alert :title="title" type = "warning" :closable="closable" :description = "description"></u-alert> | |
| 80 | */ | |
| 81 | export default { | |
| 82 | name: 'u-alert', | |
| 83 | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], | |
| 84 | data() { | |
| 85 | return { | |
| 86 | show: true | |
| 87 | } | |
| 88 | }, | |
| 89 | computed: { | |
| 90 | iconColor() { | |
| 91 | return this.effect === 'light' ? this.type : '#fff' | |
| 92 | }, | |
| 93 | // 不同主题对应不同的图标 | |
| 94 | iconName() { | |
| 95 | switch (this.type) { | |
| 96 | case 'success': | |
| 97 | return 'checkmark-circle-fill'; | |
| 98 | break; | |
| 99 | case 'error': | |
| 100 | return 'close-circle-fill'; | |
| 101 | break; | |
| 102 | case 'warning': | |
| 103 | return 'error-circle-fill'; | |
| 104 | break; | |
| 105 | case 'info': | |
| 106 | return 'info-circle-fill'; | |
| 107 | break; | |
| 108 | case 'primary': | |
| 109 | return 'more-circle-fill'; | |
| 110 | break; | |
| 111 | default: | |
| 112 | return 'error-circle-fill'; | |
| 113 | } | |
| 114 | } | |
| 115 | }, | |
| 116 | methods: { | |
| 117 | // 点击内容 | |
| 118 | clickHandler() { | |
| 119 | this.$emit('click') | |
| 120 | }, | |
| 121 | // 点击关闭按钮 | |
| 122 | closeHandler() { | |
| 123 | this.show = false | |
| 124 | } | |
| 125 | } | |
| 126 | } | |
| 127 | </script> | |
| 128 | ||
| 129 | <style lang="scss" scoped> | |
| 130 | @import "../../libs/css/components.scss"; | |
| 131 | ||
| 132 | .u-alert { | |
| 133 | position: relative; | |
| 134 | background-color: $u-primary; | |
| 135 | padding: 8px 10px; | |
| 136 | @include flex(row); | |
| 137 | align-items: center; | |
| 138 | border-top-left-radius: 4px; | |
| 139 | border-top-right-radius: 4px; | |
| 140 | border-bottom-left-radius: 4px; | |
| 141 | border-bottom-right-radius: 4px; | |
| 142 | ||
| 143 | &--primary--dark { | |
| 144 | background-color: $u-primary; | |
| 145 | } | |
| 146 | ||
| 147 | &--primary--light { | |
| 148 | background-color: #ecf5ff; | |
| 149 | } | |
| 150 | ||
| 151 | &--error--dark { | |
| 152 | background-color: $u-error; | |
| 153 | } | |
| 154 | ||
| 155 | &--error--light { | |
| 156 | background-color: #FEF0F0; | |
| 157 | } | |
| 158 | ||
| 159 | &--success--dark { | |
| 160 | background-color: $u-success; | |
| 161 | } | |
| 162 | ||
| 163 | &--success--light { | |
| 164 | background-color: #f5fff0; | |
| 165 | } | |
| 166 | ||
| 167 | &--warning--dark { | |
| 168 | background-color: $u-warning; | |
| 169 | } | |
| 170 | ||
| 171 | &--warning--light { | |
| 172 | background-color: #FDF6EC; | |
| 173 | } | |
| 174 | ||
| 175 | &--info--dark { | |
| 176 | background-color: $u-info; | |
| 177 | } | |
| 178 | ||
| 179 | &--info--light { | |
| 180 | background-color: #f4f4f5; | |
| 181 | } | |
| 182 | ||
| 183 | &__icon { | |
| 184 | margin-right: 5px; | |
| 185 | } | |
| 186 | ||
| 187 | &__content { | |
| 188 | @include flex(column); | |
| 189 | flex: 1; | |
| 190 | ||
| 191 | &__title { | |
| 192 | color: $u-main-color; | |
| 193 | font-size: 14px; | |
| 194 | font-weight: bold; | |
| 195 | color: #fff; | |
| 196 | margin-bottom: 2px; | |
| 197 | } | |
| 198 | ||
| 199 | &__desc { | |
| 200 | color: $u-main-color; | |
| 201 | font-size: 14px; | |
| 202 | flex-wrap: wrap; | |
| 203 | color: #fff; | |
| 204 | } | |
| 205 | } | |
| 206 | ||
| 207 | &__title--dark, | |
| 208 | &__desc--dark { | |
| 209 | color: #FFFFFF; | |
| 210 | } | |
| 211 | ||
| 212 | &__text--primary--light, | |
| 213 | &__text--primary--light { | |
| 214 | color: $u-primary; | |
| 215 | } | |
| 216 | ||
| 217 | &__text--success--light, | |
| 218 | &__text--success--light { | |
| 219 | color: $u-success; | |
| 220 | } | |
| 221 | ||
| 222 | &__text--warning--light, | |
| 223 | &__text--warning--light { | |
| 224 | color: $u-warning; | |
| 225 | } | |
| 226 | ||
| 227 | &__text--error--light, | |
| 228 | &__text--error--light { | |
| 229 | color: $u-error; | |
| 230 | } | |
| 231 | ||
| 232 | &__text--info--light, | |
| 233 | &__text--info--light { | |
| 234 | color: $u-info; | |
| 235 | } | |
| 236 | ||
| 237 | &__close { | |
| 238 | position: absolute; | |
| 239 | top: 11px; | |
| 240 | right: 10px; | |
| 241 | } | |
| 242 | } | |
| 243 | </style> | |
