shilvren v0.4.0

shilvren components library

基于 Vue3.x + Vite4.x + Typescript

【以下为已发布组件，其余插件目前还在更新中···】

• 01-系统切换
• 02-iOT 图标选择
• 03-换肤 · New

更新说明 2023-09-28 (version 0.3.0)

修复了部分样式错误

减轻了安装包的体积

组件名称<01-系统切换>

全局引入

import shilvren from 'shilvren'
import 'shilvren/lib/style.css'

const app = createApp(App)

app.use(router).use(shilvren)

按需引入(此项暂停使用，请稍等片刻)

import OSS from 'shilvren'
import 'shilvren/lib/style.css'

使用

<slv-oss ref="ossRef" @getOssParams="getOssParams" />
import { ref } from 'vue'
const ossRef = ref<any>(null)

传参

interface Oss_ {
	apps: any[] // 应用列表
	works: any[] // 工作列表
	title?: string // 插槽标题
	avator?: string // 用户头像
}
const ossParams: Oss_ = ref<any){
	apps: [],
	works: [],
	title: '',
	avator: ''
}
----------------------------------------------------------------
【props传参】
title?: string // 标题
tips?: string  // 副标题/提示信息
isBotm: boolean // 是否需要底部说明栏（默认有）
infoConf?: {
	isExplain: true, // 是否需要左侧说明
	isUserInfo: true, // 是否显示用户信息
	exp: { // exp 属性在 v0.3.0+之后弃用（特别说明！！！）
		p1: '说明1',
		p2: '说明2',
		p3: ''
	},
	user: {
		username: 'shilvren',
		nickname: 'shilvren',
		mobile: '123', // mobile 属性在v0.3.0+起弃用！！！
		email: '**@**.com'
	}
}
activeSession?: { // 当前用户的session信息
	sessionName: 'shilvren', // sessionName信息
	appFieldName: 'name'
	workFieldName: 'id'
}
autoGetUserBySession: string // 自动获取用户的sessionName

【v0.3.0新增默认值传参属性 defaultValue】
interface DfaultValue_ {
	app?: string
	work?: string
}
defaultValue?: DfaultValue_

事件

ossRef.value.handleGetParams(ossParams.value) // 调用弹出框并传参
const getOssParams = (v: any) => {} // 确认（回调）
ossRef.value.handleClose() // 关闭

组件名称<02-iot 图标选择>

使用

<slv-icon @handleGetActive="handleGetActive" />

传参

interface Ps {
	isFilter? boolean // 是否启用筛选（默认启用）
	activeColor?: string // 选中时颜色（该属性暂未启用，传递无效）
}

事件

const handleGetActive = (v: any) => {} // 确认（回调）
const iconFontRef = ref < any > null
iconFontRef.value && iconFontRef.value.handleConvertValue(data.icon || '') // 图标转化

组件名称<换肤 · New>

使用

<slv-skin :themes="themes" defaultThemes="SakuraPink" :isCallTheme="false" @getThemesName="getThemesName" />

传参

interface Skin_ {
	themes: any[] // 主题列表
	defaultThemes?: string // 默认主题
	isCallTheme?: boolean // 是否需要返回主题名称(默认不返回)
}

事件

const getThemesName = (v: any) => {} // 返回主题名称