通过自定义指令实现一些有趣的操作,图片放大 , 字符串转图片验证码

# 安装

```js
npm i tanyupeng
```

# 字符转图片验证码功能

```js
//在需要使用这个自定义的组件引入我的指令
import { vercode } from 'tanyupeng'
```

```js
//在需要用到自定义指令的组件里面定义一个自定义指令
const vSuiji = vercode
官方文档:https://cn.vuejs.org/guide/reusability/custom-directives.html#introduction
```

```js
//然后直接在canvas上写一个自定义指令, 传入你的随机验证码就行,这里用code表示
 <canvas v-suiji="{ code }"></canvas>
宽高应该不需要设置了,如果需要的话
 <canvas v-suiji="{ code:'随机字符串', width:160}"></canvas>
```

![](https://www.hualigs.cn/image/642ade26b0acf.jpg)



# 图片放大镜

更新时间:2023年4月2日 02:55:29

```js
//组件内引入我的自定义指令
import {zoompic} from "tanyupeng";
//再自己定义一个指令接受
const vZoom = zoompic
//这样在标签上就可使用了
```

举个例子

```js
<template>
  <div class="pic">
    <div class="listitem" v-for="(item) in obj">
      <!-- 默认在原图上放大,如果需要显示蒙版放大的话可以在v-zoom传入倍数
      例如放大2倍就是v-zoom="{ zoom:2 } -->
      <img :src="item.src" alt="" v-zoom="{ zoom: item.zoom }">
      <div class="title">{{ item.title }}</div>
    </div>
  </div>
</template>
```

![](https://www.hualigs.cn/image/642ade87a5863.jpg)