# vue3-hover-effect-card

**Repository Path**: xhyKeyNG/vue3-hover-effect-card

## Basic Information

- **Project Name**: vue3-hover-effect-card
- **Description**: vue3 鼠标悬浮3d动效卡片
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-22
- **Last Updated**: 2022-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [vue3-hover-effect-card](https://www.npmjs.com/package/vue3-hover-effect-card)

# 组件下载

```
npm i vue3-hover-effect-card
```

# 全局引用方法

示例：

```html
<script setup>
	import { createApp } from 'vue';
	import App from './App.vue';
	import HoverEffectCard from 'vue3-hover-effect-card';
	import 'vue3-hover-effect-card/lib/style.css';

	const app = createApp(App);
	app.use(HoverEffectCard).mount('#app');
</script>
```

# 局部引用方法

示例：

```html
<script setup>
	import { HoverEffectCard } from 'vue3-hover-effect-card';
	import 'vue3-hover-effect-card/lib/style.css';
</script>

<template>
	<hover-effect-card :width="400" :height="300" :src="'https://unsplash.it/800/800/?random'" />
</template>

<style></style>
```

# 参数说明

| 属性      | 描述                                   | 类型                                    | 默认值    |
| --------- | -------------------------------------- | --------------------------------------- | --------- |
| width     | 卡片宽度                               | Number                                  | 300       |
| height    | 卡片高度                               | Number                                  | 300       |
| src       | 卡片背景图                             | String &#124; Null                      | null      |
| className | 自定义类名                             | String                                  | ''        |
| imgMode   | 背景图展示模式<br />拉伸、原比例、裁剪 | 'stretch' &#124; 'normal' &#124; 'clip' | 'stretch' |
| undertone | 卡片底色                               | String                                  | '#000'    |

# 源码地址

- gitee 地址：[vue3-hover-effect-card](https://gitee.com/xhyKeyNG/vue3-hover-effect-card)