v-directive 快速上手

下载

npm

npm install @skrey/v-directive

yarn

yarn add @skrey/v-directive

项目使用

全量使用指令

import { createApp } from 'vue'
import vDirectives from '@skrey/v-directive'

const app = createApp()
app.use(vDirective)

部分使用指令

import { createApp } from 'vue'
import { customVDirective } from '@skrey/v-directive'

const app = createApp()
customVDirective(app, {
  useDirectives: ['debounce', 'throttle']
})

配置方法

全局配置

• 在 plugins/ 下新建 vDirectives.ts,并暴露 useVDirective 方法
• 在 main.ts 中引入使用

vDirectives.ts

import { App } from 'vue'
import { customVDirective } from '@skrey/v-directive'

const useVDirective = (app: App) => {
  customVDirective(app, {
    useDirectives: ['debounce', 'throttle'],
    alias: {
      preview: 'p', // 使用 v-p 代替 v-preview
      throttle: 't' // 使用 v-t 代替 v-throttle
    }
  })
}

export default useVDirective

main.ts

import { createApp } from 'vue'
import useVDirective from '@/plugins/vDirectives'

const app = createApp()
useVDirective(app)

部分配置

部分指令如 preview 支持单独配置， 支持单独配置的指令如下：

• preview - 前往

配置选项

全部配置

• useDirectives
• alias
• config
  • preview

useDirectives

说明

按需注入所需要的指令，它是一个指令数组，包含所需注册的指令名称

使用方式 plugins/vDirectives.ts：

import { App } from 'vue'
import { customVDirective } from '@skrey/v-directive'

const useVDirective = (app: App) => {
  customVDirective(app, {
    useDirectives: ['debounce', 'throttle'],
  })
}

export default useVDirective

alias

说明

给指令起别名，可以避免与已有的指令相冲突

使用方式 plugins/vDirectives.ts：

import { App } from 'vue'
import { customVDirective } from '@skrey/v-directive'

const useVDirective = (app: App) => {
  customVDirective(app, {
    alias: {
      preview: 'p', // 使用 v-p 代替 v-preview
      throttle: 't' // 使用 v-t 代替 v-throttle
    }
  })
}

export default useVDirective

config.preview

说明

对指令 preview 的全局配置，此配置有一些默认配置，详情查看medium-zoom

可选配置

 {
  margin: 24, // 缩放图像外边距
  background: '#BADA55', // 缩放图像的背景
  scrollOffset: 0, // 滚动以关闭缩放的距离
  container: '#zoom-container', // 指定缩放容器
  template: '#zoom-template', // 指定缩放模板
  useInstance: (instance:Zoom) => {}, // useInstance 帮助我们拿到实例做进一步的处理
}

默认配置

{
  margin: 24,
  background: 'rgba(0,0,0,.3)',
  scrollOffset: 0,
  useInstance: () => {}
}

使用方式 plugins/vDirectives.ts：

import { App } from 'vue'
import { customVDirective } from '@skrey/v-directive'

const useVDirective = (app: App) => {
  customVDirective(app, {
    config: {
      preview: {
        margin: 10,
        background: '#3785bb',
        useInstance: (instance) => {
          console.log(instance)
        }
      }
    }
  })
}

export default useVDirective