lis-vue-component

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

安装

npm install lis-vue-component

前置依赖

该库需要以下对等依赖：

• 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 LisVueComponent from 'lis-vue-component'
import 'lis-vue-component/dist/style.css'

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

按需导入（推荐）

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

组件

// 导入特定组件
import ContentWrap from 'lis-vue-component/components/ContentWrap'
import Dialog from 'lis-vue-component/components/Dialog'
import Drawer from 'lis-vue-component/components/Drawer'
import Icon from 'lis-vue-component/components/Icon'
import InputGroup from 'lis-vue-component/components/InputGroup'
import Pagination from 'lis-vue-component/components/Pagination'

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

Hooks

// 导入特定 Hooks
import { useCache } from 'lis-vue-component/hook/useCache'
import { useDesign } from 'lis-vue-component/hook/useDesign'
import { useI18n } from 'lis-vue-component/hook/useI18n'
import { useMessage } from 'lis-vue-component/hook/useMessage'
import { usePermission } from 'lis-vue-component/hook/usePermission'
import { useTheme } from 'lis-vue-component/hook/useTheme'

工具函数

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

国际化语言包

// 导入语言包
import { zhCn, en } from 'lis-vue-component/locales/language'

组件

ContentWrap

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

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

<script setup>
import ContentWrap from 'lis-vue-component/components/ContentWrap'
</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-vue-component/components/Dialog'
</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-vue-component/components/Drawer'
</script>

Icon

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

<template>
  <Icon name="search" />
  <Icon name="custom-icon" />
</template>

<script setup>
import Icon from 'lis-vue-component/components/Icon'
</script>

InputGroup

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

<template>
  <InputGroup>
    <el-input v-model="value" />
    <template #append>
      <el-button @click="search">搜索</el-button>
    </template>
  </InputGroup>
</template>

<script setup>
import InputGroup from 'lis-vue-component/components/InputGroup'
</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-vue-component/components/Pagination'
</script>

Hooks

useCache

使用 web-storage-cache 提供缓存功能。

import { useCache } from 'lis-vue-component/hook/useCache'

const cache = useCache()
cache.set('key', 'value', 3600) // 缓存1小时
const value = cache.get('key')

useDesign

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

import { useDesign } from 'lis-vue-component/hook/useDesign'

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

useI18n

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

import { useI18n } from 'lis-vue-component/hook/useI18n'

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

useMessage

增强的消息通知 Hook。

import { useMessage } from 'lis-vue-component/hook/useMessage'

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

usePermission

权限检查 Hook。

import { usePermission } from 'lis-vue-component/hook/usePermission'

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

useTheme

主题管理 Hook。

import { useTheme } from 'lis-vue-component/hook/useTheme'

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

工具函数

auth

认证相关工具函数。

import { auth } from 'lis-vue-component/utils/auth'

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

download

文件下载工具函数。

import { downloadFile } from 'lis-vue-component/utils/download'

downloadFile(data, 'filename.xlsx')

encrypt

加密和解密工具函数。

import { encrypt, decrypt } from 'lis-vue-component/utils/encrypt'

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

formatTime

时间格式化工具函数。

import { formatTime } from 'lis-vue-component/utils/formatTime'

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

is

类型检查工具函数。

import { isNumber, isString, isArray } from 'lis-vue-component/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-vue-component/utils/method'

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

tree

树形数据结构工具函数。

import { treeToList, listToTree } from 'lis-vue-component/utils/tree'

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

样式

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

import 'lis-vue-component/dist/style.css'

或者您可以为特定组件导入样式：

// 当使用按需导入时，如果您的打包工具支持 CSS 提取，
// 样式将自动处理

TypeScript 支持

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

许可证

MIT 许可证

版本

1.0.4