是一个实现图片放大镜的效果的组件，基于vue3和ts

安装

npm install vue-cubic-loupe

yarn add vue-cubic-loupe

快速引入

全局引入

import { createApp } from 'vue'
import App from './App.vue'


import CubicLoupe  from "vue-cubic-loupe";
import "vue-cubic-loupe/styles/index.scss";

const app = createApp(App);

app.use(CubicLoupe)
app.mount('#app')

局部引入

<script lang="ts" setup>
import {VueCubicLoupe}  from "vue-cubic-loupe";
import "vue-cubic-loupe/styles/index.scss";
</script>

slot插槽

小图自定义

<template #footer="slotProps">
    <div>{{ slotProps.index}}</div>
</template>

空状态

<template #empty></template>

属性配置

| v-model | loupeWidth | hoverState | emptyText | thumbnail | | - | - | - | - | - | | 图片列表 | 主体宽度 | 鼠标滑到小图显示的效果 | 无图时展示 | 是否展示底部小图 | | Array | Number | Boolean | String | Boolean | | [] | 400 | false | "暂无图片展示" | true |

浏览器支持

现代浏览器和Internet Explorer 10+。