123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211 |
- <template>
- <u-transition
- mode="slide-down"
- :customStyle="containerStyle"
- :show="open"
- >
- <view
- class="u-notify"
- :class="[`u-notify--${tmpConfig.type}`]"
- :style="[backgroundColor, $u.addStyle(customStyle)]"
- >
- <u-status-bar v-if="tmpConfig.safeAreaInsetTop"></u-status-bar>
- <view class="u-notify__warpper">
- <slot name="icon">
- <u-icon
- v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
- :name="tmpConfig.icon"
- :color="tmpConfig.color"
- :size="1.3 * tmpConfig.fontSize"
- :customStyle="{marginRight: '4px'}"
- ></u-icon>
- </slot>
- <text
- class="u-notify__warpper__text"
- :style="{
- fontSize: $u.addUnit(tmpConfig.fontSize),
- color: tmpConfig.color
- }"
- >{{ tmpConfig.message }}</text>
- </view>
- </view>
- </u-transition>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-notify',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
-
- open: false,
- timer: null,
- config: {
-
- top: uni.$u.props.notify.top,
-
- type: uni.$u.props.notify.type,
-
- color: uni.$u.props.notify.color,
-
- bgColor: uni.$u.props.notify.bgColor,
-
- message: uni.$u.props.notify.message,
-
- duration: uni.$u.props.notify.duration,
-
- fontSize: uni.$u.props.notify.fontSize,
-
- safeAreaInsetTop: uni.$u.props.notify.safeAreaInsetTop
- },
-
- tmpConfig: {}
- }
- },
- computed: {
- containerStyle() {
- let top = 0
- if (this.tmpConfig.top === 0) {
-
-
-
- top = 44
-
- }
- const style = {
- top: uni.$u.addUnit(this.tmpConfig.top === 0 ? top : this.tmpConfig.top),
-
-
- position: 'fixed',
- left: 0,
- right: 0,
- zIndex: 10076
- }
- return style
- },
-
- backgroundColor() {
- const style = {}
- if (this.tmpConfig.bgColor) {
- style.backgroundColor = this.tmpConfig.bgColor
- }
- return style
- },
-
- icon() {
- let icon
- if (this.tmpConfig.type === 'success') {
- icon = 'checkmark-circle'
- } else if (this.tmpConfig.type === 'error') {
- icon = 'close-circle'
- } else if (this.tmpConfig.type === 'warning') {
- icon = 'error-circle'
- }
- return icon
- }
- },
- created() {
-
- ['primary', 'success', 'error', 'warning'].map(item => {
- this[item] = message => this.show({
- type: item,
- message
- })
- })
- },
- methods: {
- show(options) {
-
- this.tmpConfig = uni.$u.deepMerge(this.config, options)
-
- this.clearTimer()
- this.open = true
- if (this.tmpConfig.duration > 0) {
- this.timer = setTimeout(() => {
- this.open = false
-
- this.clearTimer()
-
- typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
- }, this.tmpConfig.duration)
- }
- },
-
- close() {
- this.clearTimer()
- },
- clearTimer() {
- this.open = false
-
- clearTimeout(this.timer)
- this.timer = null
- }
- },
- beforeDestroy() {
- this.clearTimer()
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $u-notify-padding: 8px 10px !default;
- $u-notify-text-font-size: 15px !default;
- $u-notify-primary-bgColor: $u-primary !default;
- $u-notify-success-bgColor: $u-success !default;
- $u-notify-error-bgColor: $u-error !default;
- $u-notify-warning-bgColor: $u-warning !default;
- .u-notify {
- padding: $u-notify-padding;
- &__warpper {
- @include flex;
- align-items: center;
- text-align: center;
- justify-content: center;
- &__text {
- font-size: $u-notify-text-font-size;
- text-align: center;
- }
- }
- &--primary {
- background-color: $u-notify-primary-bgColor;
- }
- &--success {
- background-color: $u-notify-success-bgColor;
- }
- &--error {
- background-color: $u-notify-error-bgColor;
- }
- &--warning {
- background-color: $u-notify-warning-bgColor;
- }
- }
- </style>
|