egg-jianghu/app/view/component/jhToast.html

egg-jianghu

<!--jhToast.html start-->
<!--jhConfirmDialog.html start-->
<script type="text/x-template" id="jhToast">
  <v-snackbar
  style="top: 55px;"
  :color="color"
  :timeout="timer"
  v-model="showSnackbar"
  elevation="24"
  :top="position === 'top'"
  :bottom="position === 'bottom'">
    <v-progress-circular v-if="showLoading" indeterminate color="green"></v-progress-circular>
    <v-icon v-else left>{{ icon }}</v-icon>
    {{ message }}
    <template v-slot:action="{ attrs }">
    <v-btn
        color="red"
        text
        small
        v-bind="attrs"
        @click="showSnackbar = false">
      关闭
    </v-btn>
    </template>
  </v-snackbar>
</script>

<script>

  // 当前 tab 是否激活
  window.tabActive = true;
  window.onblur = function (e) {
    window.tabActive = false;
  };
  window.onfocus = function (e) {
    window.tabActive = true;
  };

  Vue.component('jhToast', {
    template: "#jhToast",
    vueComponent: 'jhToast',
    mixins: [ window.jianghuUiActionMixins || {} ],
    vuetify: new Vuetify(),
    data() {
      return {
        showSnackbar: false,
        showLoading: false,
        message: '',
        color: 'success',
        icon: 'mdi-check',
        timer: 3000,
        position: 'top'
      };
    },
    created() {
      window.vtoast = {
        showAndNotify: this.showAndNotify,
        show: this.show,
        loading: this.loading,
        success: this.success,
        fail: this.fail,
        notify: this.notify
      };
    },
    methods: {
      showAndNotify(paramObj) {
        const { message } = paramObj;
        // 限制消息长度
        if (message && message.length > 100) {
          message = message.slice(0, 100) + '...';
        }

        this.show(paramObj);
        this.notify({message});
      },
      show({ message, color, timer, icon }) {
        this.message = message || 'missing "message".';
        this.color = color || 'success';
        this.timer = timer || 3000;
        this.icon = icon || 'mdi-check';
        this.showLoading = false;
        this.showSnackbar = true;
      },
      loading(paramObj) {
        // 注意: typeof(paramObj)=='string' 是为了适配老版本
        if (typeof(paramObj)=='string') {
          this.message = paramObj;
        }
        if (typeof(paramObj)=='object') {
          const { message } = paramObj
          this.message = message;
        }
        this.color = 'primary';
        this.timer = 30000;
        this.icon = 'mdi-check';
        this.showLoading = true;
        this.showSnackbar = true;
      },
      success(paramObj) {
        // 注意: typeof(paramObj)=='string' 是为了适配老版本
        if (typeof(paramObj)=='string') {
          this.message = paramObj;
        }
        if (typeof(paramObj)=='object') {
          const { message } = paramObj
          this.message = message;
        }
        this.color = 'primary';
        this.timer = 3000;
        this.icon = 'mdi-check';
        this.showLoading = false;
        this.showSnackbar = true;
      },
      fail(paramObj) {
        // Tip: position 适配不了 ===》xuanfeng v5 web 需要 改下代码
        if (paramObj.position) {
          this.position = paramObj.position;
        }
        // 注意: typeof(paramObj)=='string' 是为了适配老版本
        if (typeof(paramObj)=='string') {
          this.message = paramObj;
        }
        if (typeof(paramObj)=='object') {
          const { message } = paramObj
          this.message = message;
        }
        this.color = 'warning';
        this.timer = 3000;
        this.icon = 'mdi-alert-circle';
        this.showLoading = false;
        this.showSnackbar = true;
      },
      async notify(paramObj) {
        let message = null;
        // 注意: typeof(paramObj)=='string' 是为了适配老版本
        if (typeof(paramObj)=='string') {
          message = paramObj;
        }
        if (typeof(paramObj)=='object') {
          message = paramObj.message;
        }
        if (Notification.permission !== 'granted') {
          await Notification.requestPermission();
        }
        const notification = new Notification('<$ ctx.app.config.appTitle $>', {
          // icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
          body: message
        });
        // 打开 tab
        notification.onclick = function (event) {
          window.parent.focus();
          notification.close();
        };
        // 3 秒后关闭
        notification.onshow = function (event) {
          setTimeout(() => {
            notification.close();
          }, 3000);
        };
      }
    },
  });

</script>
<!--jhToast.html end-->