ik-next-plugin

金合前端组件库 - 包含图片验证码和模板编辑器组件

安装

npm install ik-next-plugin
# 或
pnpm add ik-next-plugin

组件

IkImageValid - 滑动图片验证码

滑动拼图验证码组件，支持自定义图片和验证误差范围。

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | width | number | 320 | 验证码区域宽度 | | height | number | 170 | 验证码区域高度 | | show | boolean | false | 是否显示验证码弹窗 | | sliderSize | number | 30 | 滑块大小 | | scale | number | 1 | 拼图块缩放比例 (0.2-2) | | range | number | 10 | 验证误差范围 (像素) | | images | string[] | null | null | 自定义图片 URL 数组 | | successText | string | "验证成功" | 验证成功提示文字 | | failText | string | "验证失败" | 验证失败提示文字 | | sliderText | string | "拖动滑块完成验证" | 滑块提示文字 | | padding | number | 15 | 验证码区域内边距 | | el | HTMLElement | string | "body" | 挂载目标元素 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | success | x: number | 验证成功时触发，返回偏差值 | | fail | x: number | 验证失败时触发，返回偏差值 | | close | - | 关闭验证码弹窗时触发 | | update:show | value: boolean | 更新 show 状态 (支持 v-model) |

示例

<script setup>
import { ref } from 'vue'
import { IkImageValid } from 'ik-next-plugin'
import 'ik-next-plugin/dist/style.css'

const show = ref(false)

const handleSuccess = (x) => {
  console.log('验证成功，偏差值:', x)
}

const handleFail = (x) => {
  console.log('验证失败，偏差值:', x)
}
</script>

<template>
  <button @click="show = true">显示验证码</button>
  <IkImageValid 
    v-model:show="show"
    :width="320"
    :height="170"
    :range="10"
    @success="handleSuccess"
    @fail="handleFail"
  />
</template>

IkNextTemp - 模板编辑器

基于 contenteditable 的模板编辑器组件，支持标签插入和主题配置。

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | template | string | "" | 初始模板字符串，使用 ${key} 占位符 | | list | TagItem[] | [] | 可插入的标签列表 | | paramProps | ParamProps | { key: 'key', name: 'name' } | 字段映射配置 | | height | string | number | 300 | 编辑器高度 | | validError | boolean | false | 是否显示验证错误样式 | | direction | 'horizontal' | 'vertical' | 'horizontal' | 布局方向 | | theme | 'light' | 'dark' | 'light' | 主题模式 | | themeConfig | Partial | {} | 自定义主题配置 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | change | value: string | 内容变化时触发，返回 ${key} 格式的模板值 |

Expose

| 方法/属性 | 类型 | 说明 | |------|------|------| | clearValue | () => void | 清空模板内容 | | template | string | 当前模板内容（HTML格式） | | value | string | 当前模板值（${key} 格式） |

示例

<script setup>
import { ref } from 'vue'
import { IkNextTemp } from 'ik-next-plugin'
import 'ik-next-plugin/dist/style.css'

const template = ref('你好，${name}！欢迎来到${place}。')

const tags = [
  { key: 'name', name: '姓名' },
  { key: 'place', name: '地点' },
  { key: 'date', name: '日期' },
]

const handleChange = (value) => {
  console.log('模板值:', value)
}
</script>

<template>
  <IkNextTemp
    v-model:template="template"
    :list="tags"
    :height="200"
    @change="handleChange"
  />
</template>

使用方式

全局注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import IkNextPlugin from 'ik-next-plugin'
import 'ik-next-plugin/dist/style.css'

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

按需导入

import { IkImageValid, IkNextTemp } from 'ik-next-plugin'
import 'ik-next-plugin/dist/style.css'

自动导入 (unplugin-vue-components)

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { IkNextPluginResolver } from 'ik-next-plugin/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [IkNextPluginResolver()]
    })
  ]
})

然后在组件中直接使用，无需手动导入：

<template>
  <IkImageValid :show="show" @success="handleSuccess" />
  <IkNextTemp :list="tags" @change="handleChange" />
</template>

License

Apache-2.0