# Preview 將圖片預覽組件組件函數化。通過函數方便創建組件 ## Usage ```vue <template> <div class="p-4"> <Alert message="有預覽圖" type="info" /> <div class="flex justify-center mt-4"> <img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" /> </div> <Alert message="無預覽圖" type="info" /> <a-button @click="handlePreview" type="primary" class="mt-4">預覽圖片</a-button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Alert } from 'ant-design-vue'; import { createImgPreview } from '/@/components/Preview/index'; const imgList: string[] = [ 'https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216', 'https://picsum.photos/id/68/346/216', ]; export default defineComponent({ components: { Alert }, setup() { function handleClick(img: string) { createImgPreview({ imageList: [img] }); } function handlePreview() { createImgPreview({ imageList: imgList }); } return { imgList, handleClick, handlePreview }; }, }); </script> ``` ## createImgPreview ### 參數/Options | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | ------- | ---------- | ------ | ------ | -------- | | imgList | `string[]` | - | - | 圖片列表 | | index | `number` | 0 | - | 初始預覽時的圖片索引 | | scaleStep | `number` | - | - | 縮放步進值（每次縮放的幅度）。默認為自動（當前縮放值的10%） | | defaultWidth | `number` | - | - | 默認寬度（單位px）。當提供此值時，所有圖片初始時都會被縮放至此寬度 | | maskClosable | `boolean` | false | `true/false` | 點擊遮罩時是否自動關閉預覽 | | rememberState | `boolean` | false | `true/false` | 是否記住每張圖片各自的縮放狀態 | | onImgLoad | `({ index: number, url: string, dom: HTMLImageElement }) => void` | - | - | 圖片加載成功時的回調函數 | | onImgError | `({ index: number, url: string, dom: HTMLImageElement }) => void` | - | - | 圖片加載失敗時的回調函數 | ### 返回值/PreviewActions 可用于控制當前預覽狀態 ```typescript interface PreviewActions { // 重置狀態 resume: () => void; // 關閉預覽 close: () => void; // 顯示前一張 prev: () => void; // 顯示后一張 next: () => void; // 設置縮放比例(針對當前圖片) setScale: (scale: number) => void; // 設置旋轉角度(針對當前圖片) setRotate: (rotate: number) => void; } ```