123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291 |
- <template>
- <view class="u-toast">
- <u-overlay
- :show="isShow"
- :custom-style="overlayStyle"
- >
- <view
- class="u-toast__content"
- :style="[contentStyle]"
- :class="['u-type-' + tmpConfig.type, (tmpConfig.type === 'loading' || tmpConfig.loading) ? 'u-toast__content--loading' : '']"
- >
- <u-loading-icon
- v-if="tmpConfig.type === 'loading'"
- mode="circle"
- color="rgb(255, 255, 255)"
- inactiveColor="rgb(120, 120, 120)"
- size="25"
- ></u-loading-icon>
- <u-icon
- v-else-if="tmpConfig.type !== 'defalut' && iconName"
- :name="iconName"
- size="17"
- :color="tmpConfig.type"
- :customStyle="iconStyle"
- ></u-icon>
- <u-gap
- v-if="tmpConfig.type === 'loading' || tmpConfig.loading"
- height="12"
- bgColor="transparent"
- ></u-gap>
- <text
- class="u-toast__content__text"
- :class="['u-toast__content__text--' + tmpConfig.type]"
- style="max-width: 400rpx;"
- >{{ tmpConfig.message }}</text>
- </view>
- </u-overlay>
- </view>
- </template>
- <script>
-
- export default {
- name: 'u-toast',
- mixins: [uni.$u.mpMixin, uni.$u.mixin],
- data() {
- return {
- isShow: false,
- timer: null,
- config: {
- message: '',
- type: '',
- duration: 2000,
- icon: true,
- position: 'center',
- complete: null,
- overlay: false,
- loading: false,
- },
- tmpConfig: {},
- }
- },
- computed: {
- iconName() {
-
- if(!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
- return '';
- }
- if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
- return uni.$u.type2icon(this.tmpConfig.type)
- } else {
- return ''
- }
- },
- overlayStyle() {
- const style = {
- justifyContent: 'center',
- alignItems: 'center',
- display: 'flex'
- }
-
- style.backgroundColor = 'rgba(0, 0, 0, 0)'
- return style
- },
- iconStyle() {
- const style = {}
-
- style.marginRight = '4px'
-
-
- if (uni.$u.os() === 'ios') {
- style.marginTop = '-1px'
- }
-
- return style
- },
- loadingIconColor() {
- let color = 'rgb(255, 255, 255)'
- if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
-
-
- color = uni.$u.hexToRgb(uni.$u.color[this.tmpConfig.type])
- }
- return color
- },
-
- contentStyle() {
- const windowHeight = uni.$u.sys().windowHeight, style = {}
- let value = 0
-
- if(this.tmpConfig.position === 'top') {
- value = - windowHeight * 0.25
- } else if(this.tmpConfig.position === 'bottom') {
- value = windowHeight * 0.25
- }
- style.transform = `translateY(${value}px)`
- return style
- }
- },
- created() {
-
- ['primary', 'success', 'error', 'warning', 'default', 'loading'].map(item => {
- this[item] = message => this.show({
- type: item,
- message
- })
- })
- },
- methods: {
-
- show(options) {
-
- this.tmpConfig = uni.$u.deepMerge(this.config, options)
-
- this.clearTimer()
- this.isShow = true
- this.timer = setTimeout(() => {
-
- this.clearTimer()
-
- typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
- }, this.tmpConfig.duration)
- },
-
- hide() {
- this.clearTimer()
- },
- clearTimer() {
- this.isShow = false
-
- clearTimeout(this.timer)
- this.timer = null
- }
- },
- beforeDestroy() {
- this.clearTimer()
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $u-toast-color:#fff !default;
- $u-toast-border-radius:4px !default;
- $u-toast-border-background-color:#585858 !default;
- $u-toast-border-font-size:14px !default;
- $u-toast-border-padding:12px 20px !default;
- $u-toast-loading-border-padding: 20px 20px !default;
- $u-toast-content-text-color:#fff !default;
- $u-toast-content-text-font-size:15px !default;
- $u-toast-u-icon:10rpx !default;
- $u-toast-u-type-primary-color:$u-primary !default;
- $u-toast-u-type-primary-background-color:#ecf5ff !default;
- $u-toast-u-type-primary-border-color:rgb(215, 234, 254) !default;
- $u-toast-u-type-primary-border-width:1px !default;
- $u-toast-u-type-success-color: $u-success !default;
- $u-toast-u-type-success-background-color: #dbf1e1 !default;
- $u-toast-u-type-success-border-color: #BEF5C8 !default;
- $u-toast-u-type-success-border-width: 1px !default;
- $u-toast-u-type-error-color:$u-error !default;
- $u-toast-u-type-error-background-color:#fef0f0 !default;
- $u-toast-u-type-error-border-color:#fde2e2 !default;
- $u-toast-u-type-error-border-width: 1px !default;
- $u-toast-u-type-warning-color:$u-warning !default;
- $u-toast-u-type-warning-background-color:#fdf6ec !default;
- $u-toast-u-type-warning-border-color:#faecd8 !default;
- $u-toast-u-type-warning-border-width: 1px !default;
- $u-toast-u-type-default-color:#fff !default;
- $u-toast-u-type-default-background-color:#585858 !default;
- .u-toast {
- &__content {
- @include flex;
- padding: $u-toast-border-padding;
- border-radius: $u-toast-border-radius;
- background-color: $u-toast-border-background-color;
- color: $u-toast-color;
- align-items: center;
-
- max-width: 600rpx;
-
- position: relative;
- &--loading {
- flex-direction: column;
- padding: $u-toast-loading-border-padding;
- }
- &__text {
- color: $u-toast-content-text-color;
- font-size: $u-toast-content-text-font-size;
- line-height: $u-toast-content-text-font-size;
- &--default {
- color: $u-toast-content-text-color;
- }
- &--error {
- color: $u-error;
- }
- &--primary {
- color: $u-primary;
- }
- &--success {
- color: $u-success;
- }
- &--warning {
- color: $u-warning;
- }
- }
- }
- }
- .u-type-primary {
- color: $u-toast-u-type-primary-color;
- background-color: $u-toast-u-type-primary-background-color;
- border-color: $u-toast-u-type-primary-border-color;
- border-width: $u-toast-u-type-primary-border-width;
- }
- .u-type-success {
- color: $u-toast-u-type-success-color;
- background-color: $u-toast-u-type-success-background-color;
- border-color: $u-toast-u-type-success-border-color;
- border-width: 1px;
- }
- .u-type-error {
- color: $u-toast-u-type-error-color;
- background-color: $u-toast-u-type-error-background-color;
- border-color: $u-toast-u-type-error-border-color;
- border-width: $u-toast-u-type-error-border-width;
- }
- .u-type-warning {
- color: $u-toast-u-type-warning-color;
- background-color: $u-toast-u-type-warning-background-color;
- border-color: $u-toast-u-type-warning-border-color;
- border-width: 1px;
- }
- .u-type-default {
- color: $u-toast-u-type-default-color;
- background-color: $u-toast-u-type-default-background-color;
- }
- </style>
|