tanyupeng
Version:
通过自定义指令实现一些有趣的操作,图片放大 , 字符串转图片验证码
62 lines (45 loc) • 1.54 kB
Markdown
通过自定义指令实现一些有趣的操作,图片放大 , 字符串转图片验证码
# 安装
```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>
```
# 图片放大镜
更新时间: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>
```
