@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);
directiveDraggable(app);
app.mount('#app');

使用示例：

<template>
  <!-- 普通拖拽（不允许拖出边界） -->
  <div v-directive-draggable>可拖拽元素</div>

  <!-- 允许拖出边界 -->
  <div v-directive-draggable="true">可拖出边界的元素</div>
</template>

directiveConversionTime

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

参数：

| 参数名 | 说明 | 类型 | 是否必传 | |--------|------|------|----------| | 元素文本 | 时间戳（毫秒或秒） | 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-directive-conversion-time>1744560601775</div>

  <!-- 秒时间戳 -->
  <div v-directive-conversion-time>1672531200</div>
</template>