rhjy-admin-components
v1.0.12
Published
荣怀教育后台前端组件库
Downloads
29
Readme
rhjy-admin-components
荣怀教育后台系统组件库, 组件前缀 Rh
快速开始
安装
$ npm install rhjy-admin-components --save-dev
$ yarn add rhjy-admin-components --save-dev
$ pnpm install rhjy-admin-components --save-dev
页面上直接使用组件
<template>
<div>
<RhStandardTableWrap :tableData="tableData"></RhStandardTableWrap>
</div>
</template>
<script setup>
import {RhStandardTableWrap} from 'rhjy-admin-components/packages/components'
const tableData = {
columns:[{label:'姓名', prop:'name'}],
list:[{name:'荣荣'},{name:'怀怀'}]
}
</script>
注册全局组件
注册指定组件
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { RhStandardTableWrap } from 'rhjy-admin-components/packages/components'
const app = createApp(App)
app.use(RhStandardTableWrap)
app.mount('#app')
注册全部组件
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import RhjyAdminComponent from 'rhjy-admin-components/packages/components'
Object.keys(RhjyAdminComponent).forEach((component) => {
app.use(RhjyAdminComponent[component])
})
app.mount('#app')
使用hooks
<template>
<div>
<RhStandardTableWrap :tableData="tableData">
<template #default='{row}'>
<RhButton @click='execRemove(row)'>编辑</RhButton>
<el-button type='text'>删除</el-button>
</template>
</RhStandardTableWrap>
</div>
</template>
<script setup>
import {useRouteJump} from 'rhjy-admin-components/packages/hooks'
const {route, goPath} = useRouteJump()
console.log('route', route)
const tableData = {
columns:[{label:'姓名', prop:'name'}, {label:'操作'}],
list:[{id:1, name:'荣荣'},{id:2, name:'怀怀'}]
}
const execRemove = (row={})=> {
goPath("", {id:row.id})
}
</script>