92 lines
2.0 KiB
JavaScript
92 lines
2.0 KiB
JavaScript
/**
|
|
* 移动端混入
|
|
*/
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
|