1

src/mixins/mobile.js

@@ -0,0 +1,91 @@
+/**
+ * 移动端混入
+ */
+import { mapGetters } from 'vuex'
+import { isMobile, isIOS, isAndroid, getDeviceType } from '@/utils/mobile'
+
+export default {
+  computed: {
+    ...mapGetters(['device']),
+    $isMobile() {
+      return this.device === 'mobile' || isMobile()
+    },
+    $isIOS() {
+      return isIOS()
+    },
+    $isAndroid() {
+      return isAndroid()
+    },
+    $deviceType() {
+      return getDeviceType()
+    },
+    $isTablet() {
+      return window.innerWidth >= 768 && window.innerWidth < 1024
+    },
+    $isPhone() {
+      return window.innerWidth < 768
+    }
+  },
+  methods: {
+    /**
+     * 移动端提示
+     */
+    $mobileToast(message, type = 'info') {
+      if (this.$isMobile) {
+        this.$message({
+          message,
+          type,
+          duration: 2000,
+          showClose: false
+        })
+      } else {
+        this.$message({
+          message,
+          type
+        })
+      }
+    },
+    /**
+     * 移动端确认对话框
+     */
+    $mobileConfirm(message, title = '提示', options = {}) {
+      return this.$confirm(message, title, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        ...options
+      })
+    },
+    /**
+     * 移动端表格列过滤
+     */
+    $filterMobileColumns(columns) {
+      if (this.$isMobile) {
+        // 移动端只显示重要列
+        return columns.filter(col => {
+          if (col.mobile === false) return false
+          if (col.mobile === true) return true
+          // 默认显示前5列
+          return columns.indexOf(col) < 5
+        })
+      }
+      return columns
+    },
+    /**
+     * 格式化移动端显示值
+     */
+    $formatMobileValue(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '-'
+      }
+      if (column && column.formatter) {
+        return column.formatter(null, column, value)
+      }
+      if (typeof value === 'object') {
+        return JSON.stringify(value)
+      }
+      return String(value)
+    }
+  }
+}
+