@mt-kit/vue-directives

Vue 自定义指令集合，提供元素拖拽、时间戳转换等常用指令。

安装

npm i @mt-kit/vue-directives

API

directiveDraggable

使元素可拖拽的自定义指令。

参数：

参数名	说明	类型	是否必传	默认值
value	是否允许拖出边界	boolean	否	false

全局注册：

import { createApp } from 'vue';
import App from './App.vue';
import { directiveDraggable } from '@mt-kit/vue-directives';

const app = createApp(App);
app.use(directiveDraggable);
app.mount('#app');

使用示例：

<template>
  <!-- 普通拖拽（不允许拖出边界） -->
  <div v-directiveDraggable>可拖拽元素</div>
  
  <!-- 允许拖出边界 -->
  <div v-directiveDraggable="true">可拖出边界的元素</div>
</template>

directiveConversionTime

将时间戳转换为格式化时间的自定义指令。

参数：

参数名	说明	类型	是否必传
timestamp	时间戳（毫秒或秒）	number | string	是

全局注册：

import { createApp } from 'vue';
import App from './App.vue';
import { directiveConversionTime } from '@mt-kit/vue-directives';

const app = createApp(App);
directiveConversionTime(app);
app.mount('#app');

使用示例：

<template>
  <!-- 毫秒时间戳 -->
  <div v-directiveConversionTime>1744560601775</div>
  
  <!-- 秒时间戳 -->
  <div v-directiveConversionTime>1672531200</div>
</template>