Kmoke 组件库 - Vue 2 版本

一个基于 Vue 2 的文件预览组件库，支持图片预览、PDF预览和文件下载功能

1. 构建库

npm run build:lib

2. 发布到npm

npm publish

安装方式

方式1：npm安装（推荐）

npm install kmoke_component-library

更新版本

npm update kmoke_component-library

方式2：直接复制组件

复制 src/components/FilePreview 目录到你的项目

方式3：CDN引入

<!-- 引入CSS -->
<link rel="stylesheet" href="https://your-cdn.com/kmoke_component-library.css">

<!-- 引入JS -->
<script src="https://your-cdn.com/kmoke-component-library.umd.js"></script>

快速开始

1. 全局注册组件

// main.js
import Vue from 'vue'
import KmokeComponentLibrary from 'kmoke_component-library'
import 'kmoke_component-library/dist/kmoke_component-library.css'

Vue.use(KmokeComponentLibrary)

2. 局部注册组件

// 在需要使用的组件中
import { FilePreview } from 'kmoke_component-library'
import 'kmoke_component-library/dist/kmoke_component-library.css'

export default {
  components: {
    FilePreview
  }
}

3. 完整项目示例

<template>
  <div class="demo-container">
    <h2>FilePreview 演示</h2>
    
    <!-- 触发按钮 -->
    <button @click="openPreview" class="preview-btn">
      预览文件
    </button>

    <!-- 文件预览组件 -->
    <FilePreview
      v-model="showPreview"
      :files="fileList"
      :initialIndex="currentIndex"
      @download="handleDownload"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制显示状态
      showPreview: false,
      currentIndex: 0,
      
      // 文件列表
      fileList: [
        {
          id: 1,
          name: '产品图片.jpg',
          url: 'https://picsum.photos/800/600?random=1',
          type: 'image/jpeg',
          size: 2048000
        },
        {
          id: 2,
          name: '产品说明书.pdf',
          url: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
          type: 'application/pdf',
          size: 1024000
        },
        {
          id: 3,
          name: '公司logo.png',
          url: 'https://picsum.photos/400/300?random=2',
          type: 'image/png',
          size: 512000
        }
      ]
    }
  },
  methods: {
    // 打开预览
    openPreview() {
      this.showPreview = true
    },

    // 处理文件下载
    handleDownload(file) {
      console.log('准备下载:', file.name)
      
      // 创建下载链接
      const link = document.createElement('a')
      link.href = file.url
      link.download = file.name
      link.target = '_blank'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
}

.preview-btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.preview-btn:hover {
  background: #0056b3;
}
</style>

4. 不同使用场景

场景1：图片预览

<template>
  <div>
    <div class="image-gallery">
      <img
        v-for="img in images"
        :key="img.id"
        :src="img.thumbnail"
        @click="previewImage(img)"
        class="thumbnail"
      />
    </div>

    <FilePreview
      v-model="showPreview"
      :files="images"
      :initialIndex="previewIndex"
      :showPreviewList="true"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          id: 1,
          name: '风景1.jpg',
          url: '/images/landscape1.jpg',
          thumbnail: '/images/thumb1.jpg',
          type: 'image/jpeg'
        },
        // 更多图片...
      ],
      showPreview: false,
      previewIndex: 0
    }
  },
  methods: {
    previewImage(image) {
      this.previewIndex = this.images.findIndex(img => img.id === image.id)
      this.showPreview = true
    }
  }
}
</script>

场景2：文档预览

<template>
  <div>
    <ul>
      <li v-for="doc in documents" :key="doc.id">
        <span>{{ doc.name }}</span>
        <button @click="previewDoc(doc)">预览</button>
      </li>
    </ul>

    <FilePreview
      v-model="showPreview"
      :files="[selectedDoc]"
      :downloadable="true"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      documents: [
        {
          id: 1,
          name: '年度报告.pdf',
          url: '/docs/annual-report.pdf',
          type: 'application/pdf'
        },
        {
          id: 2,
          name: '产品手册.pdf',
          url: '/docs/product-manual.pdf',
          type: 'application/pdf'
        }
      ],
      showPreview: false,
      selectedDoc: null
    }
  },
  methods: {
    previewDoc(doc) {
      this.selectedDoc = doc
      this.showPreview = true
    }
  }
}
</script>

组件API

属性

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | files | Array | [] | 文件列表 | | initialIndex | Number | 0 | 初始显示的文件索引 | | visible | Boolean | false | 是否显示预览模态框 | | downloadable | Boolean | true | 是否允许下载文件 | | closable | Boolean | true | 是否允许关闭模态框 | | showPreviewList | Boolean | true | 是否显示底部预览列表 |

事件

| 事件名 | 说明 | 参数 | |-------|------|------| | close | 关闭模态框时触发 | 无 | | download | 下载文件时触发 | 当前文件对象 |

文件对象结构

{
  id: '文件唯一标识', // 必须
  name: '文件名', // 可选
  url: '文件URL', // 必须
  type: '文件类型', // 可选，如 'image/jpeg', 'application/pdf'
  size: 文件大小, // 可选，单位字节
  thumbnail: '缩略图URL' // 可选，图片缩略图
}

常见问题

1. 文件无法显示

• 检查文件URL是否可访问
• 确认文件类型是否正确设置
• 检查跨域问题

2. 样式问题

• 确保引入了CSS文件
• 检查是否有样式冲突
• 使用浏览器开发者工具调试

3. 性能优化

• 大文件建议使用CDN
• 图片使用缩略图
• 考虑懒加载

4. 兼容性问题

• 组件基于Vue 2.6.x开发
• 支持现代浏览器(Chrome, Firefox, Safari, Edge)
• 对于IE浏览器可能需要额外的polyfill