rhjy-admin-components v1.0.12

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>