# 广告位布局与拖拽

**Repository Path**: foge/adLayout

## Basic Information

- **Project Name**: 广告位布局与拖拽
- **Description**: 广告位的自定义布局，支持拖拽排序功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-07
- **Last Updated**: 2025-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 广告布局管理系统

## 项目简介

这是一个基于Vue.js开发的广告布局管理系统，提供了两种核心组件：前台展示组件和后台拖拽管理组件。系统支持基于JSON配置的流式布局，可灵活配置不同栏数的广告位展示，并提供拖拽排序功能。

## 项目结构

```
├── src/
│   ├── App.vue           # 主应用组件，包含视图切换逻辑
│   ├── components/
│   │   ├── AdLayout.vue          # 前台展示组件
│   │   └── DraggableAdLayout.vue # 后台拖拽管理组件
│   └── main.js           # 应用入口文件
├── package.json          # 项目依赖配置
└── README.md             # 项目文档
```

## 组件说明

### 1. AdLayout 组件（前台展示组件）

#### 功能特点
- 纯展示型组件，用于在前端页面展示广告布局
- 支持根据广告位配置自动调整布局结构
- 流式布局设计，确保在不同屏幕尺寸下的良好显示效果
- 支持多种布局类型（单列、双列、三列等）

#### 实现思路
- 通过props接收广告位配置数据数组
- 使用CSS Grid或Flexbox实现流式布局
- 根据广告位的布局类型动态计算宽度和定位
- 采用响应式设计，确保在不同设备上都能正常展示

#### 使用方法

```vue
<template>
  <div>
    <AdLayout :ad-items="adItems" />
  </div>
</template>

<script>
import AdLayout from './components/AdLayout.vue';

export default {
  components: {
    AdLayout
  },
  data() {
    return {
      adItems: [
        {
          id: 'ad1',
          title: '广告标题1',
          content: '广告内容1',
          layoutType: 1 // 布局类型：1-单列, 2-双列, 3-三列
        },
        {
          id: 'ad2',
          title: '广告标题2',
          content: '广告内容2',
          layoutType: 2
        }
        // 更多广告位配置...
      ]
    };
  }
};
</script>
```

#### Props说明

| Prop名称 | 类型 | 必需 | 默认值 | 描述 |
|---------|------|------|--------|------|
| adItems | Array | 是 | [] | 广告位配置数组，每个对象包含id、title、content、layoutType等属性 |

### 2. DraggableAdLayout 组件（后台拖拽管理组件）

#### 功能特点
- 支持广告位的拖拽排序功能
- 实时更新广告布局配置
- 提供直观的操作界面，便于管理员调整广告位顺序
- 与前台展示组件使用相同的数据结构，确保展示一致性

#### 实现思路
- 基于vuedraggable插件实现拖拽功能
- 监听拖拽事件，实时更新广告位顺序
- 维护本地状态并同步到父组件
- 采用与前台组件相同的布局算法，确保预览效果与实际展示一致

#### 使用方法

```vue
<template>
  <div>
    <DraggableAdLayout 
      :ad-items="adItems" 
      @update-items="handleAdItemsUpdate"
    />
  </div>
</template>

<script>
import DraggableAdLayout from './components/DraggableAdLayout.vue';

export default {
  components: {
    DraggableAdLayout
  },
  data() {
    return {
      adItems: [
        {
          id: 'ad1',
          title: '广告标题1',
          content: '广告内容1',
          layoutType: 1
        },
        {
          id: 'ad2',
          title: '广告标题2',
          content: '广告内容2',
          layoutType: 2
        }
      ]
    };
  },
  methods: {
    handleAdItemsUpdate(newItems) {
      this.adItems = newItems;
      // 这里可以添加保存到服务器的逻辑
      console.log('广告位配置已更新:', newItems);
    }
  }
};
</script>
```

#### Props说明

| Prop名称 | 类型 | 必需 | 默认值 | 描述 |
|---------|------|------|--------|------|
| adItems | Array | 是 | [] | 广告位配置数组 |

#### Events说明

| Event名称 | 参数 | 描述 |
|----------|------|------|
| update-items | newItems: Array | 当广告位顺序变更时触发，返回更新后的广告位数组 |

## 数据结构说明

### adItems 数组

组件使用的核心数据结构是一个广告位配置对象的数组（adItems）。每个组件都通过props接收这个数组，并根据数组中的配置渲染对应的广告布局。

#### 完整数组格式示例：

```javascript
[
  {
    id: 'ad1',              // 广告位唯一标识
    title: '广告标题1',      // 广告标题
    content: '广告内容1',    // 广告内容或描述
    layoutType: 1           // 布局类型：1-单列, 2-双列, 3-三列
    // 可根据需要扩展其他属性
  },
  {
    id: 'ad2',
    title: '广告标题2',
    content: '广告内容2',
    layoutType: 2
  },
  {
    id: 'ad3',
    title: '广告标题3',
    content: '广告内容3',
    layoutType: 3
  }
  // 更多广告位配置对象...
]
```

#### 单个广告位对象属性说明：

| 属性名 | 类型 | 必需 | 描述 |
|-------|------|------|------|
| id | String | 是 | 广告位唯一标识，用于区分不同广告位 |
| title | String | 是 | 广告标题，显示在广告位中 |
| content | String | 是 | 广告内容或描述文本 |
| layoutType | Number | 是 | 布局类型：1-单列（100%宽度）, 2-双列（50%宽度）, 3-三列（33.33%宽度）
| [其他自定义属性] | Any | 否 | 可根据业务需求扩展其他属性，如图片URL、链接等 |

#### 布局类型与宽度关系：
- layoutType: 1 - 单列布局，宽度为容器的100%
- layoutType: 2 - 双列布局，宽度为容器的50%
- layoutType: 3 - 三列布局，宽度为容器的33.33%

组件会根据每个广告位对象的layoutType属性，自动计算并应用相应的宽度样式，实现灵活的流式布局效果。

## 安装和运行

1. 安装依赖

```bash
npm install
```

2. 开发模式运行

```bash
npm run dev
```

3. 构建生产版本

```bash
npm run build
```

## 扩展建议

1. 可以添加广告位删除、添加、编辑功能
2. 实现广告内容的富文本编辑
3. 添加布局模板预设功能
4. 实现配置的导入导出功能
5. 添加拖拽预览和实时效果预览

## 技术栈

- Vue.js 2.x
- VueDraggable (拖拽功能)
- Vite (构建工具)
- CSS3 (Grid/Flexbox 布局)

## 在线预览

可以访问以下地址查看项目预览：
[http://www.lingyao.cc/demo/adLayout/](http://www.lingyao.cc/demo/adLayout/)

## 源码获取

源码托管在 Gitee：[https://gitee.com/foge/adLayout.git](https://gitee.com/foge/adLayout.git)