123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- <template>
- <view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position]" :style="{
- zIndex: uZIndex
- }">
- <view class="u-icon-wrap">
- <u-icon v-if="tmpConfig.icon" class="u-icon" :name="iconName" :size="30" :color="tmpConfig.type"></u-icon>
- </view>
- <text class="u-text">{{tmpConfig.title}}</text>
- </view>
- </template>
- <script>
-
- export default {
- name: "u-toast",
- props: {
-
- zIndex: {
- type: [Number, String],
- default: ''
- },
- },
- data() {
- return {
- isShow: false,
- timer: null,
- config: {
- params: {},
- title: '',
- type: '',
- duration: 2000,
- isTab: false,
- url: '',
- icon: true,
- position: 'center',
- callback: null,
- back: false,
- },
- tmpConfig: {},
- };
- },
- computed: {
- iconName() {
-
- if (['error', 'warning', 'success', 'info'].indexOf(this.tmpConfig.type) >= 0 && this.tmpConfig.icon) {
- let icon = this.$u.type2icon(this.tmpConfig.type);
- return icon;
- }
- },
- uZIndex() {
-
- return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999';
- }
- },
- methods: {
-
- show(options) {
-
- this.tmpConfig = this.$u.deepMerge(this.config, options);
- if (this.timer) {
-
- clearTimeout(this.timer);
- this.timer = null;
- }
- this.isShow = true;
- this.timer = setTimeout(() => {
-
- this.isShow = false;
- clearTimeout(this.timer);
- this.timer = null;
-
- typeof(this.tmpConfig.callback) === 'function' && this.tmpConfig.callback();
- this.timeEnd();
- }, this.tmpConfig.duration);
- },
-
- hide() {
- this.isShow = false;
- if (this.timer) {
-
- clearTimeout(this.timer);
- this.timer = null;
- }
- },
-
- timeEnd() {
-
- if (this.tmpConfig.url) {
-
- if (this.tmpConfig.url[0] != '/') this.tmpConfig.url = '/' + this.tmpConfig.url;
-
- if (Object.keys(this.tmpConfig.params).length) {
-
-
-
- let query = '';
- if (/.*\/.*\?.*=.*/.test(this.tmpConfig.url)) {
-
- query = this.$u.queryParams(this.tmpConfig.params, false);
- this.tmpConfig.url = this.tmpConfig.url + "&" + query;
- } else {
- query = this.$u.queryParams(this.tmpConfig.params);
- this.tmpConfig.url += query;
- }
- }
-
- if (this.tmpConfig.isTab) {
- uni.switchTab({
- url: this.tmpConfig.url
- });
- } else {
- uni.navigateTo({
- url: this.tmpConfig.url
- });
- }
- } else if(this.tmpConfig.back) {
-
- this.$u.route({
- type: 'back'
- })
- }
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/style.components.scss";
-
- .u-toast {
- position: fixed;
- z-index: -1;
- transition: opacity 0.3s;
- text-align: center;
- color: #fff;
- border-radius: 8rpx;
- background: #585858;
- @include vue-flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- opacity: 0;
- pointer-events: none;
- padding: 18rpx 40rpx;
- }
- .u-toast.u-show {
- opacity: 1;
- }
- .u-icon {
- margin-right: 10rpx;
- @include vue-flex;
- align-items: center;
- line-height: normal;
- }
- .u-position-center {
- left: 50%;
- top: 50%;
- transform: translate(-50%,-50%);
- /* #ifndef APP-NVUE */
- max-width: 70%;
- /* #endif */
- }
- .u-position-top {
- left: 50%;
- top: 20%;
- transform: translate(-50%,-50%);
- }
- .u-position-bottom {
- left: 50%;
- bottom: 20%;
- transform: translate(-50%,-50%);
- }
- .u-type-primary {
- color: $u-type-primary;
- background-color: $u-type-primary-light;
- border: 1px solid rgb(215, 234, 254);
- }
- .u-type-success {
- color: $u-type-success;
- background-color: $u-type-success-light;
- border: 1px solid #BEF5C8;
- }
- .u-type-error {
- color: $u-type-error;
- background-color: $u-type-error-light;
- border: 1px solid #fde2e2;
- }
- .u-type-warning {
- color: $u-type-warning;
- background-color: $u-type-warning-light;
- border: 1px solid #faecd8;
- }
- .u-type-info {
- color: $u-type-info;
- background-color: $u-type-info-light;
- border: 1px solid #ebeef5;
- }
- .u-type-default {
- color: #fff;
- background-color: #585858;
- }
- </style>
|