lis-common-vue3

一个从 LIS Search Vue3 项目中提取的 Vue3 组件库。该库提供了一系列可重用的 UI 组件、Hooks 和工具函数，适用于 Vue3 应用程序。

安装

npm install lis-common-vue3

前置依赖

该库需要以下对等依赖：

• Vue 3.3+
• Element Plus 2.4+
• @element-plus/icons-vue 2.3+

请确保在您的项目中安装这些依赖：

npm install vue@^3.3.0 element-plus@^2.4.0 @element-plus/icons-vue@^2.3.1

使用方法

全量导入

一次性导入所有组件和工具：

import { createApp } from 'vue'
import App from './App.vue'
import LisCommonVue3 from 'lis-common-vue3'
import 'lis-common-vue3/dist/style.css'

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

按需导入（推荐）

只导入您需要的组件，以减少打包体积：

组件

// 导入特定组件
import { ContentWrap } from 'lis-common-vue3/components'
import { Dialog } from 'lis-common-vue3/components'
import { Drawer } from 'lis-common-vue3/components'
import { Icon, IconSelect } from 'lis-common-vue3/components'
import { InputGroup } from 'lis-common-vue3/components'
import Pagination from 'lis-common-vue3/components/Pagination'

// 全局或局部注册组件
app.component('ContentWrap', ContentWrap)
app.component('Dialog', Dialog)
// ... 等等

工具函数

// 导入特定工具函数
import { auth } from 'lis-common-vue3/utils/auth'
import { downloadFile } from 'lis-common-vue3/utils/download'
import { encrypt, decrypt } from 'lis-common-vue3/utils/encrypt'
import { formatTime } from 'lis-common-vue3/utils/formatTime'
import { isNumber, isString, isArray } from 'lis-common-vue3/utils/is'
import { filteringError, filterTableSearchList } from 'lis-common-vue3/utils/method'
import { treeToList, listToTree } from 'lis-common-vue3/utils/tree'

组件

ContentWrap

一个用于页面内容的包装组件，内置加载和错误处理功能。

<template>
  <ContentWrap 
    :loading="loading" 
    :error="error"
    title="页面标题"
  >
    <!-- 您的内容 -->
  </ContentWrap>
</template>

<script setup>
import { ContentWrap } from 'lis-common-vue3/components'
</script>

Dialog

基于 Element Plus Dialog 的增强对话框组件。

<template>
  <Dialog 
    v-model="dialogVisible"
    title="对话框标题"
    width="500px"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <!-- 对话框内容 -->
  </Dialog>
</template>

<script setup>
import { Dialog } from 'lis-common-vue3/components'
</script>

Drawer

基于 Element Plus Drawer 的增强抽屉组件。

<template>
  <Drawer 
    v-model="drawerVisible"
    title="抽屉标题"
    size="500px"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <!-- 抽屉内容 -->
  </Drawer>
</template>

<script setup>
import { Drawer } from 'lis-common-vue3/components'
</script>

Icon

一个灵活的图标组件，支持 Element Plus 图标和自定义图标。

<template>
  <Icon name="search" />
  <IconSelect v-model="selectedIcon" />
</template>

<script setup>
import { Icon, IconSelect } from 'lis-common-vue3/components'
</script>

InputGroup

用于组合多个输入框或输入框与按钮的输入组组件。

<template>
  <!-- 基础用法 -->
  <InputGroup>
    <el-input v-model="value" />
    <template #append>
      <el-button @click="search">搜索</el-button>
    </template>
  </InputGroup>
  
  <!-- 使用flex属性控制布局 -->
  <InputGroup 
    :flex-wrapper="'1'" 
    :flex-append="'0 0 auto'"
    is-group-append
  >
    <el-input v-model="value" />
    <template #prepend>
      <span>前缀</span>
    </template>
    <template #append>
      <el-button @click="search">搜索</el-button>
    </template>
  </InputGroup>
</template>

<script setup>
import { InputGroup } from 'lis-common-vue3/components'

// props说明:
// - isGroupAppend: boolean - 是否显示append区域
// - flexWrapper: string | number - wrapper区域的flex值，默认为空字符串
// - flexPrepend: string | number - prepend区域的flex值，默认为空字符串  
// - flexAppend: string | number - append区域的flex值，默认为空字符串
</script>

Pagination

具有额外功能的增强分页组件。

<template>
  <Pagination 
    v-model:current-page="currentPage"
    :total="total"
    :page-size="pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import Pagination from 'lis-common-vue3/components/Pagination'
</script>

Hooks

useDesign

提供设计相关的工具和主题信息。

import { useDesign } from 'lis-common-vue3/hook'

const { prefixCls, getPrefixCls } = useDesign()
console.log(prefixCls) // 默认前缀类名

useI18n

用于多语言支持的国际化 Hook。

import { useI18n } from 'lis-common-vue3/hook'

const { t } = useI18n()
console.log(t('common.confirm')) // 翻译后的文本

useMessage

增强的消息通知 Hook。

import { useMessage } from 'lis-common-vue3/hook'

const { success, error, warning, info } = useMessage()
success('操作成功！')

usePermission

权限检查 Hook。

import { usePermission } from 'lis-common-vue3/hook'

const { hasPermission } = usePermission()
if (hasPermission('user:create')) {
  // 用户有创建用户的权限
}

useTheme

主题管理 Hook。

import { useTheme } from 'lis-common-vue3/hook'

const { changeTheme, getTheme } = useTheme()
changeTheme('dark')

工具函数

auth

认证相关工具函数。

import { auth } from 'lis-common-vue3/utils/auth'

auth.setToken('your-token')
const token = auth.getToken()

download

文件下载工具函数。

import { downloadFile } from 'lis-common-vue3/utils/download'

downloadFile(data, 'filename.xlsx')

encrypt

加密和解密工具函数。

import { encrypt, decrypt } from 'lis-common-vue3/utils/encrypt'

const encrypted = encrypt('sensitive-data')
const decrypted = decrypt(encrypted)

formatTime

时间格式化工具函数。

import { formatTime } from 'lis-common-vue3/utils/formatTime'

const formatted = formatTime(new Date(), 'YYYY-MM-DD HH:mm:ss')

is

类型检查工具函数。

import { isNumber, isString, isArray } from 'lis-common-vue3/utils/is'

console.log(isNumber(42)) // true
console.log(isString('hello')) // true
console.log(isArray([1, 2, 3])) // true

method

通用工具方法。

import { filteringError, filterTableSearchList } from 'lis-common-vue3/utils/method'

const filteredError = filteringError(error)
const filteredList = filterTableSearchList(['name', 'email'], searchParams, userList)

tree

树形数据结构工具函数。

import { treeToList, listToTree } from 'lis-common-vue3/utils/tree'

const list = treeToList(treeData)
const tree = listToTree(listData)

常量

提供项目中常用的常量定义，包括用户信息和偏好设置相关的键名。

用户相关常量

import { USER, PERMISSIONS, REVIEWERFORM } from 'lis-common-vue3/constants'

// 用户信息存储键名
console.log(USER) // "Lis-user"

// 权限信息存储键名  
console.log(PERMISSIONS) // "Lis-core-access"

// 审核人员信息存储键名
console.log(REVIEWERFORM) // "Lis-reviewer-user"

偏好设置常量

import { PREFERENCES, LOCALE } from 'lis-common-vue3/constants'

// 主题配置存储键名
console.log(PREFERENCES) // "Lis-preferences"

// 语言配置存储键名
console.log(LOCALE) // "Lis-preferences-locale"

样式

库中包含的 CSS 样式可以全局导入：

import 'lis-common-vue3/dist/style.css'

TypeScript 支持

包含完整的 TypeScript 支持，为所有组件、Hooks 和工具函数提供类型定义。

许可证

MIT 许可证

版本

1.0.15