@songe/songe-components

SONGE Vue3 组件库，基于 view-ui-plus 构建。

安装

npm install hzsonge-components

引入

全量引入

import { createApp } from 'vue'
import SongeComponents from '@songe/songe-components'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import '@songe/songe-components/dist/songe.css'

const app = createApp(App)
app.use(SongeComponents)

按需引入

import { createApp } from 'vue'
import { sButton, sInput, sSelect } from '@songe/songe-components'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)
app.use(sButton).use(sInput).use(sSelect)

使用

<template>
  <s-button type="primary">按钮</s-button>
  <s-input v-model="value" placeholder="输入框" />
  <s-select v-model="selected">
    <s-option value="1">选项1</s-option>
    <s-option value="2">选项2</s-option>
  </s-select>
</template>

组件列表

| 组件 | 说明 | |------|------| | s-button | 按钮 | | s-icon | 图标 | | s-row / s-col | 栅格布局 | | s-tabs | 标签页 | | s-dropdown | 下拉菜单 | | s-page | 页面容器 | | s-breadcrumb | 面包屑 | | s-badge | 徽标 | | s-steps | 步骤条 | | s-form / s-form-item | 表单 | | s-input | 输入框 | | s-input-number | 数字输入框 | | s-select / s-option | 选择器 | | s-cascader | 级联选择 | | s-tree-select | 树形选择 | | s-date-picker | 日期选择器 | | s-time-picker | 时间选择器 | | s-radio | 单选框 | | s-checkbox | 多选框 | | s-switch | 开关 | | s-slider | 滑块 | | s-table | 表格 | | s-tree | 树形控件 | | s-upload | 上传 | | s-tag | 标签 | | s-tag-select | 标签选择 | | s-transfer | 穿梭框 | | s-color-picker | 颜色选择器 | | s-city | 城市选择 | | s-alert | 警告提示 | | s-modal | 弹窗 | | s-drawer | 抽屉 | | s-message | 消息提示 | | s-tooltip | 气泡提示 | | s-poptip | 弹出提示 | | s-carousel | 轮播 | | s-image | 图片 | | s-time | 时间 | | s-timeline | 时间线 |

s-button 扩展功能

除 view-ui-plus 原有属性外，还提供以下扩展：

<template>
  <!-- 水波纹效果 -->
  <s-button ripple>水波纹按钮</s-button>

  <!-- 防抖（毫秒） -->
  <s-button :debounce="1000">防抖1秒</s-button>

  <!-- 节流（毫秒） -->
  <s-button :throttle="1000">节流1秒</s-button>

  <!-- 权限控制 -->
  <s-button permission="add">权限按钮</s-button>

  <!-- 无权限时隐藏 -->
  <s-button permission="delete" hide-mode>隐藏按钮</s-button>
</template>

权限控制

权限数据来源（按优先级）：

1. window.__PERMISSIONS__ 全局变量
2. localStorage.getItem('permissions')

方式一：全局变量

// 设置权限
window.__PERMISSIONS__ = ['add', 'edit', 'delete']

// 使用组件
<s-button permission="add">添加</s-button>
<s-button permission="delete">删除</s-button>

方式二：provide/inject

// 父组件
import { ref, provide } from 'vue'
import { sButton } from '@songe/songe-components'

const permissions = ref(['add', 'edit'])
provide('s-button-permissions', permissions)

依赖

• vue: ^3.0.0
• view-ui-plus: ^1.3.19

License

MIT