VSoft UI

基于 Element Plus 的二次封装组件库，包含全局权限控制功能。

安装

npm install vsoft-ui element-plus @element-plus/icons-vue

使用

注册组件库

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VSoftUI from 'vsoft-ui'

const app = createApp(App)

// 安装组件库（自动导入 Element Plus 及其样式）
app.use(VSoftUI)

app.mount('#app')

2. 权限控制配置

// 在适当的位置设置权限
import { usePermission } from 'vsoft-ui'

const { setPermissions } = usePermission()
setPermissions(['user:view', 'user:edit', 'button:click'])

组件使用

所有组件均以 V 开头，保持与 Element Plus API 一致：

<template>
  <!-- 权限控制指令 -->
  <v-button v-permission="'user:view'" type="primary">查看</v-button>
  <v-button v-permission="'user:edit'" type="success">编辑</v-button>
  
  <!-- 普通组件 -->
  <v-form>
    <v-form-item label="用户名" prop="username">
      <v-input v-model="form.username" placeholder="请输入用户名"></v-input>
    </v-form-item>
  </v-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const form = reactive({
  username: ''
})
</script>

权限控制

指令方式

<!-- 单个权限 -->
<v-button v-permission="'user:view'">查看</v-button>

<!-- any 模式 - 满足任一权限 -->
<v-button v-permission:any="['user:view', 'user:edit']">编辑</v-button>

<!-- all 模式 - 满足所有权限 -->
<v-button v-permission:all="['user:view', 'user:admin']">管理</v-button>

组合式函数

<template>
  <v-button @click="checkPermission">检查权限</v-button>
</template>

<script setup>
import { usePermission } from 'vsoft-ui'

const { hasPermission, hasAllPermissions } = usePermission()

const checkPermission = () => {
  const canView = hasPermission('user:view')
  const canAdmin = hasAllPermissions(['user:view', 'user:admin'])
  console.log(canView, canAdmin)
}
</script>

组件列表

• VAffix
• VAlert
• VAside
• VAvatar
• VBacktop
• VBadge
• VBreadcrumb
• VBreadcrumbItem
• VButton
• VCalendar
• VCard
• VCarousel
• VCarouselItem
• VCascader
• VCheckbox
• VCheckboxButton
• VCollapse
• VCollapseItem
• VColorPicker
• VConfigProvider
• VContainer
• VDatePicker
• VDialog
• VDivider
• VDrawer
• VDropdown
• VDropdownItem
• VDropdownMenu
• VEmpty
• VFooter
• VForm
• VFormItem
• VHeader
• VIcon
• VImage
• VInput
• VInputNumber
• VLink
• VMain
• VMenu
• VMenuGroup
• VMenuItem
• VOption
• VOptionGroup
• VPagination
• VPopconfirm
• VPopper
• VProgress
• VRadio
• VRadioButton
• VRate
• VScrollbar
• VSelect
• VSelectV2
• VSlider
• VSpace
• VStep
• VSteps
• VSubMenu
• VSwitch
• VTable
• VTableColumn
• VTabPane
• VTabs
• VTag
• VTimeline
• VTimelineItem
• VTimePicker
• VTooltip
• VTransfer
• VTree
• VTreeNode
• VUpload
• VUploadDragger

注意事项

1. 本组件库基于 Element Plus，使用前请确保已安装 Element Plus 和 @element-plus/icons-vue
2. 组件库已自动导入 Element Plus 及其样式，无需手动导入
3. 组件库已自动安装 Element Plus，无需再次单独安装
4. 所有组件均保持与 Element Plus API 一致，使用方式相同

更新日志

• 1.0.0: 初始版本，包含权限控制和基础组件
• 1.0.4: 优化打包配置，修复样式问题

许可证

MIT