优化Panel组件样式计算:简化值获取逻辑、增强边框可见性、添加flex布局
This commit is contained in:
@@ -43,12 +43,13 @@ export default defineComponent({
|
|||||||
|
|
||||||
// 计算面板样式
|
// 计算面板样式
|
||||||
const panelStyle = computed(() => {
|
const panelStyle = computed(() => {
|
||||||
// 确保从props.panel获取最新值,而不仅仅依赖内部ref
|
// 直接使用props.panel中的值,确保与父组件状态同步
|
||||||
const posX = props.panel.x !== undefined ? props.panel.x : panelPosition.value.x;
|
const posX = props.panel.x || 100;
|
||||||
const posY = props.panel.y !== undefined ? props.panel.y : panelPosition.value.y;
|
const posY = props.panel.y || 100;
|
||||||
const width = props.panel.width !== undefined ? props.panel.width : panelSize.value.width;
|
const width = props.panel.width || 300;
|
||||||
const height = props.panel.height !== undefined ? props.panel.height : panelSize.value.height;
|
const height = props.panel.height || 180;
|
||||||
|
|
||||||
|
// 始终创建新对象,避免Vue响应式系统无法检测变化
|
||||||
const style = {
|
const style = {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: `${posY}px`,
|
top: `${posY}px`,
|
||||||
@@ -56,11 +57,13 @@ export default defineComponent({
|
|||||||
width: `${width}px`,
|
width: `${width}px`,
|
||||||
height: `${height}px`,
|
height: `${height}px`,
|
||||||
backgroundColor: 'white',
|
backgroundColor: 'white',
|
||||||
border: '1px solid #e5e7eb',
|
border: '1px solid #435d9c', // 更深的边框颜色以增强可见性
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.15)',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
zIndex: 10
|
zIndex: 10,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column'
|
||||||
};
|
};
|
||||||
|
|
||||||
// 最大化状态
|
// 最大化状态
|
||||||
@@ -75,11 +78,6 @@ export default defineComponent({
|
|||||||
style.left = '0px';
|
style.left = '0px';
|
||||||
style.width = `${rect.width - 2}px`;
|
style.width = `${rect.width - 2}px`;
|
||||||
style.height = `${rect.height - 2}px`;
|
style.height = `${rect.height - 2}px`;
|
||||||
} else {
|
|
||||||
style.top = '0px';
|
|
||||||
style.left = '0px';
|
|
||||||
style.width = '800px';
|
|
||||||
style.height = '600px';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user