组件属性由VUE3+ts+element-plus组成结构

npm install element-plus --save

• 组件中插入element-plus框架内容，所以需要安装下UI框架element-plus

npm i com-dragmenu

• npm安装表头过滤拖拽排序组件

在main.ts进行全局组件引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import ComDragmenu from 'com-dragmenu'
import "com-dragmenu/style.css"

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(ComDragmenu)
app.mount('#app')

组件使用的数据结构与预留样式设置

// 使用组件的页面 已做全局注册，可直接使用
<DragMenu 
  :showType="showType" 
  :iconWidth="iconWidth" 
  :iconHeight="iconHeight" 
  :setListData="setListData"
  @showListData="showListData">
</DragMenu>

// 固定的数据传送结构
interface data {
  id: number,
  content: string,
  checked: boolean
}

| 字段 | 描述 | 类型 | 可选参数 |

| --- | --- | --- | --- |

| showType | 表头标签展示方式 | string | click/hover(默认hover) |

| iconWidth | 表头标签宽度 | number | 默认40 |

| iconHeight | 表头标签高度 | number | 默认40|

| setListData | 传入的数据结构 | data | |

| showListData | 排序后的数据返回结构 | data | |

例子

const showType = "click"
const iconWidth = 30
const iconHeight = 30
const showListData = (e: object) => {
  console.log('value', e)
  // 展示过滤后的数据结构
}
interface setList {
  id?: number,
  content: string,
  checked: boolean
}
let setListData: setList[] = [
  { id: 1, content: '需求申请单号', checked: true },
  { id: 2, content: '系统管理单位', checked: false },
  { id: 3, content: '需求归属业务系统', checked: true },
  { id: 4, content: '申请人', checked: true },
  { id: 5, content: '联系电话', checked: true },
  { id: 6, content: '申请时间', checked: true },
  { id: 7, content: '需求描述', checked: true },
  { id: 8, content: '需求分类', checked: true },
  { id: 9, content: '当前环节', checked: true },
  { id: 10, content: '附件', checked: true }
]

效果展示

image.png

报错提示

• 无法找到模块"com-dragmenu"的声明文件 解决: // vite-env.d.ts添加声明 declare module "com-dragmenu"