Procházet zdrojové kódy

feat:封装layout

leo před 1 rokem
rodič
revize
e09f471e2d
2 změnil soubory, kde provedl 54 přidání a 0 odebrání
  1. binární
      assets/image/goBack-cion.png
  2. 54 0
      components/layout/index.vue

binární
assets/image/goBack-cion.png


+ 54 - 0
components/layout/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="layout">
+    <slot></slot>
+    <img src="@/assets/image/goBack-cion.png" alt="" class="go-back" @click="goBack" v-if="visible">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'layout',
+  props: {
+    isGoBack
+  },
+  data() {
+    return {
+        visible: true,
+        isApp: null,
+        isAndroid: null
+    };
+  },
+  mounted() {
+    // 如果是安卓的需要判断一下是否显示h5内置的返回按钮
+    // 如果是H5、微信小程序,不需要显示次按钮
+    // 如果是苹果就显示,不需要做任何处理
+    this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
+    this.isAndroid = this.$userAgent.isAndroid;
+    if(!this.isApp) return this.visible = false
+    if(this.isApp && this.isAndroid) {
+        this.visible = !!window.native.goneBack
+        return
+    }
+  },
+  methods: {
+    goBack() {
+      // 如果为true是最前一页
+      if(isGoBack) {
+        this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
+        return 
+      }
+      this.$router.go(-1)
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.go-back{
+    position: fixed;
+    width: 42px;
+    height: 42px;
+    left: 26px;
+    bottom: 98px;
+}
+</style>