655 lines
17 KiB
Vue
655 lines
17 KiB
Vue
<template>
|
|
<div class="responsive-layout" :class="layoutClasses">
|
|
<!-- 响应式容器 -->
|
|
<div class="responsive-container" :class="containerClasses">
|
|
<!-- 插槽内容 -->
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<!-- 响应式调试信息 (开发环境显示) -->
|
|
<div v-if="showDebug" class="responsive-debug">
|
|
<div class="debug-info">
|
|
<strong>屏幕尺寸:</strong> {{ currentScreenSize }}
|
|
<br>
|
|
<strong>宽度:</strong> {{ screenWidth }}px
|
|
<br>
|
|
<strong>设备类型:</strong> {{ deviceType }}
|
|
<br>
|
|
<strong>触摸设备:</strong> {{ isTouchDevice ? '是' : '否' }}
|
|
<br>
|
|
<strong>高分辨率:</strong> {{ isHighDPI ? '是' : '否' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ResponsiveLayout',
|
|
props: {
|
|
// 是否显示调试信息
|
|
showDebug: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 自定义断点
|
|
customBreakpoints: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
// 响应式模式
|
|
responsiveMode: {
|
|
type: String,
|
|
default: 'auto', // auto, mobile-first, desktop-first
|
|
validator: value => ['auto', 'mobile-first', 'desktop-first'].includes(value)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 当前屏幕尺寸
|
|
currentScreenSize: '',
|
|
// 屏幕宽度
|
|
screenWidth: 0,
|
|
// 是否为触摸设备
|
|
isTouchDevice: false,
|
|
// 是否为高分辨率屏幕
|
|
isHighDPI: false,
|
|
// 响应式助手实例
|
|
responsiveHelper: null,
|
|
// 断点配置
|
|
breakpoints: {
|
|
xs: 380,
|
|
sm: 480,
|
|
md: 620,
|
|
lg: 768,
|
|
xl: 992,
|
|
xxl: 1200,
|
|
xxxl: 1500,
|
|
xxxxl: 1600
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
// 布局类名
|
|
layoutClasses() {
|
|
return {
|
|
[`screen-${this.currentScreenSize}`]: true,
|
|
'touch-device': this.isTouchDevice,
|
|
'no-touch-device': !this.isTouchDevice,
|
|
'high-dpi': this.isHighDPI,
|
|
'low-dpi': !this.isHighDPI
|
|
};
|
|
},
|
|
// 容器类名
|
|
containerClasses() {
|
|
return {
|
|
[`container-${this.currentScreenSize}`]: true,
|
|
'responsive-container': true
|
|
};
|
|
},
|
|
// 设备类型
|
|
deviceType() {
|
|
if (this.currentScreenSize === 'xs' || this.currentScreenSize === 'sm' || this.currentScreenSize === 'md') {
|
|
return '移动端';
|
|
} else if (this.currentScreenSize === 'lg') {
|
|
return '平板';
|
|
} else {
|
|
return '桌面端';
|
|
}
|
|
},
|
|
// 是否为移动端
|
|
isMobile() {
|
|
return this.currentScreenSize === 'xs' || this.currentScreenSize === 'sm' || this.currentScreenSize === 'md';
|
|
},
|
|
// 是否为平板
|
|
isTablet() {
|
|
return this.currentScreenSize === 'lg';
|
|
},
|
|
// 是否为桌面端
|
|
isDesktop() {
|
|
return this.currentScreenSize === 'xl' || this.currentScreenSize === 'xxl' || this.currentScreenSize === 'xxxl' || this.currentScreenSize === 'xxxxl';
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initResponsiveHelper();
|
|
this.addEventListeners();
|
|
},
|
|
beforeDestroy() {
|
|
this.removeEventListeners();
|
|
if (this.responsiveHelper) {
|
|
this.responsiveHelper.destroy();
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 初始化响应式助手
|
|
*/
|
|
initResponsiveHelper() {
|
|
// 合并自定义断点
|
|
this.breakpoints = { ...this.breakpoints, ...this.customBreakpoints };
|
|
|
|
// 创建响应式助手实例
|
|
this.responsiveHelper = new this.$options.responsiveHelperClass || window.ResponsiveHelper;
|
|
|
|
if (this.responsiveHelper) {
|
|
// 更新断点配置
|
|
this.responsiveHelper.breakpoints = this.breakpoints;
|
|
|
|
// 检测初始屏幕尺寸
|
|
this.detectScreenSize();
|
|
|
|
// 检测设备特性
|
|
this.detectDeviceFeatures();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 检测屏幕尺寸
|
|
*/
|
|
detectScreenSize() {
|
|
const width = window.innerWidth;
|
|
this.screenWidth = width;
|
|
|
|
let newSize = '';
|
|
|
|
// 根据宽度确定屏幕尺寸
|
|
if (width <= this.breakpoints.xs) {
|
|
newSize = 'xs';
|
|
} else if (width <= this.breakpoints.sm) {
|
|
newSize = 'sm';
|
|
} else if (width <= this.breakpoints.md) {
|
|
newSize = 'md';
|
|
} else if (width <= this.breakpoints.lg) {
|
|
newSize = 'lg';
|
|
} else if (width <= this.breakpoints.xl) {
|
|
newSize = 'xl';
|
|
} else if (width <= this.breakpoints.xxl) {
|
|
newSize = 'xxl';
|
|
} else if (width <= this.breakpoints.xxxl) {
|
|
newSize = 'xxxl';
|
|
} else {
|
|
newSize = 'xxxxl';
|
|
}
|
|
|
|
// 如果尺寸发生变化，更新状态
|
|
if (newSize !== this.currentScreenSize) {
|
|
this.currentScreenSize = newSize;
|
|
this.$emit('screenSizeChange', {
|
|
size: newSize,
|
|
width: width,
|
|
height: window.innerHeight,
|
|
breakpoint: this.breakpoints[newSize]
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 检测设备特性
|
|
*/
|
|
detectDeviceFeatures() {
|
|
// 检测触摸设备
|
|
this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
|
|
// 检测高分辨率屏幕
|
|
this.isHighDPI = (window.devicePixelRatio || 1) >= 2;
|
|
},
|
|
|
|
/**
|
|
* 添加事件监听器
|
|
*/
|
|
addEventListeners() {
|
|
// 监听窗口大小变化
|
|
window.addEventListener('resize', this.handleResize);
|
|
|
|
// 监听方向变化
|
|
window.addEventListener('orientationchange', this.handleOrientationChange);
|
|
|
|
// 监听屏幕尺寸变化事件
|
|
window.addEventListener('screenSizeChange', this.handleScreenSizeChange);
|
|
},
|
|
|
|
/**
|
|
* 移除事件监听器
|
|
*/
|
|
removeEventListeners() {
|
|
window.removeEventListener('resize', this.handleResize);
|
|
window.removeEventListener('orientationchange', this.handleOrientationChange);
|
|
window.removeEventListener('screenSizeChange', this.handleScreenSizeChange);
|
|
},
|
|
|
|
/**
|
|
* 处理窗口大小变化
|
|
*/
|
|
handleResize() {
|
|
// 使用防抖优化性能
|
|
clearTimeout(this.resizeTimeout);
|
|
this.resizeTimeout = setTimeout(() => {
|
|
this.detectScreenSize();
|
|
}, 100);
|
|
},
|
|
|
|
/**
|
|
* 处理方向变化
|
|
*/
|
|
handleOrientationChange() {
|
|
// 方向变化后延迟检测，确保布局已更新
|
|
setTimeout(() => {
|
|
this.detectScreenSize();
|
|
}, 100);
|
|
},
|
|
|
|
/**
|
|
* 处理屏幕尺寸变化事件
|
|
*/
|
|
handleScreenSizeChange(event) {
|
|
this.currentScreenSize = event.detail.size;
|
|
this.screenWidth = event.detail.width;
|
|
},
|
|
|
|
/**
|
|
* 检查是否匹配特定断点
|
|
*/
|
|
matchesBreakpoint(breakpoint) {
|
|
return this.screenWidth <= this.breakpoints[breakpoint];
|
|
},
|
|
|
|
/**
|
|
* 获取当前屏幕信息
|
|
*/
|
|
getCurrentScreenInfo() {
|
|
return {
|
|
size: this.currentScreenSize,
|
|
width: this.screenWidth,
|
|
height: window.innerHeight,
|
|
breakpoint: this.breakpoints[this.currentScreenSize],
|
|
isMobile: this.isMobile,
|
|
isTablet: this.isTablet,
|
|
isDesktop: this.isDesktop,
|
|
isTouchDevice: this.isTouchDevice,
|
|
isHighDPI: this.isHighDPI
|
|
};
|
|
},
|
|
|
|
/**
|
|
* 响应式显示/隐藏元素
|
|
*/
|
|
responsiveShow(element, breakpoint = 'lg') {
|
|
if (this.matchesBreakpoint(breakpoint)) {
|
|
element.style.display = 'block';
|
|
} else {
|
|
element.style.display = 'none';
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 响应式隐藏/显示元素
|
|
*/
|
|
responsiveHide(element, breakpoint = 'lg') {
|
|
if (this.matchesBreakpoint(breakpoint)) {
|
|
element.style.display = 'none';
|
|
} else {
|
|
element.style.display = 'block';
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 响应式切换类名
|
|
*/
|
|
responsiveToggleClass(element, className, breakpoint = 'lg') {
|
|
if (this.matchesBreakpoint(breakpoint)) {
|
|
element.classList.add(className);
|
|
} else {
|
|
element.classList.remove(className);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.responsive-layout {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.responsive-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 响应式调试信息 */
|
|
.responsive-debug {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
z-index: 9999;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.debug-info {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 响应式工具类 */
|
|
.responsive-hidden-xs { display: none !important; }
|
|
.responsive-hidden-sm { display: none !important; }
|
|
.responsive-hidden-md { display: none !important; }
|
|
.responsive-hidden-lg { display: none !important; }
|
|
.responsive-hidden-xl { display: none !important; }
|
|
|
|
.responsive-visible-xs { display: block !important; }
|
|
.responsive-visible-sm { display: block !important; }
|
|
.responsive-visible-md { display: block !important; }
|
|
.responsive-visible-lg { display: block !important; }
|
|
.responsive-visible-xl { display: block !important; }
|
|
|
|
/* 响应式网格 */
|
|
.responsive-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.responsive-grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.responsive-grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.responsive-grid-4 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* 响应式弹性布局 */
|
|
.responsive-flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.responsive-flex > * {
|
|
flex: 1 1 300px;
|
|
}
|
|
|
|
/* 响应式列 */
|
|
.responsive-column {
|
|
flex: 1 1 clamp(300px, 50%, 600px);
|
|
}
|
|
|
|
/* 响应式容器 */
|
|
.responsive-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* 响应式侧边栏 */
|
|
.responsive-sidebar {
|
|
width: clamp(250px, 25vw, 300px);
|
|
min-width: 250px;
|
|
}
|
|
|
|
/* 响应式主内容 */
|
|
.responsive-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 响应式按钮 */
|
|
.responsive-button {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
padding: clamp(0.75rem, 2vw, 1.5rem);
|
|
font-size: clamp(0.875rem, 2vw, 1.125rem);
|
|
}
|
|
|
|
/* 响应式卡片 */
|
|
.responsive-card {
|
|
padding: clamp(1rem, 3vw, 2rem);
|
|
border-radius: clamp(0.5rem, 2vw, 1rem);
|
|
}
|
|
|
|
/* 响应式表单 */
|
|
.responsive-form {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.responsive-form input,
|
|
.responsive-form textarea,
|
|
.responsive-form select {
|
|
width: 100%;
|
|
padding: clamp(0.5rem, 2vw, 1rem);
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|
}
|
|
|
|
/* 响应式模态框 */
|
|
.responsive-modal {
|
|
width: min(90vw, 600px);
|
|
margin: clamp(2rem, 5vw, 5rem) auto;
|
|
padding: clamp(1rem, 3vw, 2rem);
|
|
}
|
|
|
|
/* 响应式图片 */
|
|
.responsive-image {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* 响应式表格 */
|
|
.responsive-table {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
display: block;
|
|
}
|
|
|
|
.responsive-table table {
|
|
min-width: 600px;
|
|
}
|
|
|
|
/* 响应式导航 */
|
|
.responsive-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.responsive-nav a {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
/* 响应式文本 */
|
|
.responsive-text {
|
|
font-size: clamp(1rem, 2.5vw, 2rem);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 响应式间距 */
|
|
.responsive-spacing {
|
|
padding: clamp(1rem, 3vw, 3rem);
|
|
margin: clamp(0.5rem, 2vw, 2rem);
|
|
}
|
|
|
|
/* 响应式阴影 */
|
|
.responsive-shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
|
|
.responsive-shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
|
.responsive-shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
|
|
|
|
/* 响应式圆角 */
|
|
.responsive-rounded { border-radius: 0.375rem; }
|
|
.responsive-rounded-sm { border-radius: 0.25rem; }
|
|
.responsive-rounded-lg { border-radius: 0.5rem; }
|
|
.responsive-rounded-full { border-radius: 9999px; }
|
|
|
|
/* 响应式过渡 */
|
|
.responsive-transition { transition: all 0.3s ease; }
|
|
.responsive-transition-fast { transition: all 0.15s ease; }
|
|
.responsive-transition-slow { transition: all 0.5s ease; }
|
|
|
|
/* 响应式变换 */
|
|
.responsive-scale-95 { transform: scale(0.95); }
|
|
.responsive-scale-105 { transform: scale(1.05); }
|
|
.responsive-rotate-90 { transform: rotate(90deg); }
|
|
.responsive-rotate-180 { transform: rotate(180deg); }
|
|
|
|
/* 响应式颜色 */
|
|
.responsive-text-primary { color: #3498db; }
|
|
.responsive-text-success { color: #27ae60; }
|
|
.responsive-text-warning { color: #f39c12; }
|
|
.responsive-text-danger { color: #e74c3c; }
|
|
|
|
.responsive-bg-primary { background-color: #3498db; }
|
|
.responsive-bg-success { background-color: #27ae60; }
|
|
.responsive-bg-warning { background-color: #f39c12; }
|
|
.responsive-bg-danger { background-color: #e74c3c; }
|
|
|
|
/* 响应式间距工具类 */
|
|
.responsive-m-0 { margin: 0 !important; }
|
|
.responsive-m-1 { margin: 0.25rem !important; }
|
|
.responsive-m-2 { margin: 0.5rem !important; }
|
|
.responsive-m-3 { margin: 1rem !important; }
|
|
.responsive-m-4 { margin: 1.5rem !important; }
|
|
.responsive-m-5 { margin: 3rem !important; }
|
|
|
|
.responsive-p-0 { padding: 0 !important; }
|
|
.responsive-p-1 { padding: 0.25rem !important; }
|
|
.responsive-p-2 { padding: 0.5rem !important; }
|
|
.responsive-p-3 { padding: 1rem !important; }
|
|
.responsive-p-4 { padding: 1.5rem !important; }
|
|
.responsive-p-5 { padding: 3rem !important; }
|
|
|
|
/* 响应式文本对齐 */
|
|
.responsive-text-center { text-align: center; }
|
|
.responsive-text-left { text-align: left; }
|
|
.responsive-text-right { text-align: right; }
|
|
|
|
/* 响应式浮动 */
|
|
.responsive-float-left { float: left; }
|
|
.responsive-float-right { float: right; }
|
|
|
|
/* 响应式清除浮动 */
|
|
.responsive-clearfix::after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
|
|
/* 响应式隐藏/显示 */
|
|
.responsive-hidden { display: none !important; }
|
|
.responsive-visible { display: block !important; }
|
|
|
|
/* 响应式内联 */
|
|
.responsive-inline { display: inline !important; }
|
|
.responsive-inline-block { display: inline-block !important; }
|
|
|
|
/* 响应式块级 */
|
|
.responsive-block { display: block !important; }
|
|
|
|
/* 响应式弹性 */
|
|
.responsive-flex { display: flex !important; }
|
|
.responsive-inline-flex { display: inline-flex !important; }
|
|
|
|
/* 响应式网格 */
|
|
.responsive-grid { display: grid !important; }
|
|
.responsive-inline-grid { display: inline-grid !important; }
|
|
|
|
/* 响应式表格 */
|
|
.responsive-table { display: table !important; }
|
|
.responsive-table-row { display: table-row !important; }
|
|
.responsive-table-cell { display: table-cell !important; }
|
|
|
|
/* 响应式定位 */
|
|
.responsive-relative { position: relative !important; }
|
|
.responsive-absolute { position: absolute !important; }
|
|
.responsive-fixed { position: fixed !important; }
|
|
.responsive-sticky { position: sticky !important; }
|
|
|
|
/* 响应式溢出 */
|
|
.responsive-overflow-auto { overflow: auto !important; }
|
|
.responsive-overflow-hidden { overflow: hidden !important; }
|
|
.responsive-overflow-visible { overflow: visible !important; }
|
|
.responsive-overflow-scroll { overflow: scroll !important; }
|
|
|
|
/* 响应式光标 */
|
|
.responsive-cursor-pointer { cursor: pointer !important; }
|
|
.responsive-cursor-default { cursor: default !important; }
|
|
.responsive-cursor-not-allowed { cursor: not-allowed !important; }
|
|
|
|
/* 响应式用户选择 */
|
|
.responsive-select-none { user-select: none !important; }
|
|
.responsive-select-text { user-select: text !important; }
|
|
.responsive-select-all { user-select: all !important; }
|
|
|
|
/* 响应式指针事件 */
|
|
.responsive-pointer-events-none { pointer-events: none !important; }
|
|
.responsive-pointer-events-auto { pointer-events: auto !important; }
|
|
|
|
/* 响应式可见性 */
|
|
.responsive-visible { visibility: visible !important; }
|
|
.responsive-invisible { visibility: hidden !important; }
|
|
|
|
/* 响应式透明度 */
|
|
.responsive-opacity-0 { opacity: 0 !important; }
|
|
.responsive-opacity-25 { opacity: 0.25 !important; }
|
|
.responsive-opacity-50 { opacity: 0.5 !important; }
|
|
.responsive-opacity-75 { opacity: 0.75 !important; }
|
|
.responsive-opacity-100 { opacity: 1 !important; }
|
|
|
|
/* 响应式Z索引 */
|
|
.responsive-z-0 { z-index: 0 !important; }
|
|
.responsive-z-10 { z-index: 10 !important; }
|
|
.responsive-z-20 { z-index: 20 !important; }
|
|
.responsive-z-30 { z-index: 30 !important; }
|
|
.responsive-z-40 { z-index: 40 !important; }
|
|
.responsive-z-50 { z-index: 50 !important; }
|
|
|
|
/* 响应式宽度 */
|
|
.responsive-w-full { width: 100% !important; }
|
|
.responsive-w-auto { width: auto !important; }
|
|
.responsive-w-screen { width: 100vw !important; }
|
|
|
|
/* 响应式高度 */
|
|
.responsive-h-full { height: 100% !important; }
|
|
.responsive-h-auto { height: auto !important; }
|
|
.responsive-h-screen { height: 100vh !important; }
|
|
|
|
/* 响应式最大宽度 */
|
|
.responsive-max-w-none { max-width: none !important; }
|
|
.responsive-max-w-full { max-width: 100% !important; }
|
|
.responsive-max-w-screen-sm { max-width: 640px !important; }
|
|
.responsive-max-w-screen-md { max-width: 768px !important; }
|
|
.responsive-max-w-screen-lg { max-width: 1024px !important; }
|
|
.responsive-max-w-screen-xl { max-width: 1280px !important; }
|
|
|
|
/* 响应式最小宽度 */
|
|
.responsive-min-w-0 { min-width: 0 !important; }
|
|
.responsive-min-w-full { min-width: 100% !important; }
|
|
|
|
/* 响应式最大高度 */
|
|
.responsive-max-h-none { max-height: none !important; }
|
|
.responsive-max-h-full { max-height: 100% !important; }
|
|
.responsive-max-h-screen { max-height: 100vh !important; }
|
|
|
|
/* 响应式最小高度 */
|
|
.responsive-min-h-0 { min-height: 0 !important; }
|
|
.responsive-min-h-full { min-height: 100% !important; }
|
|
.responsive-min-h-screen { min-height: 100vh !important; }
|
|
</style>
|