页面效果:
作者在这里将一个个组件分别开发,然后统一引入
分模块开发组件:
引入:
<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
使用组件:
export default {
name: 'DashboardAdmin',
components: {
GithubCorner, // github角标,就是那只小猫咪
PanelGroup, // 页头4个展示框
LineChart, // 折线图
RaddarChart, // 雷达图
PieChart, // 圆角统计图
BarChart, // 竖线图
TransactionTable, // 价格表
TodoList, // 待做事宜
BoxCard // 卡片盒子
}
另外,这里是admin专属,,在main页面对加载进行了控制,我们的入口
<script>
// 导入了两种主页
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'
export default {
name: 'Dashboard',
// 根据参数选择取出对应的组件页面
components: { adminDashboard, editorDashboard },
data() {
return {
// 预置参数
currentRole: 'adminDashboard'
}
},
computed: {
...mapGetters([
'roles'
])
},
created() {
// 根据条件变化预置参数,干预最终加载结果
if (!this.roles.includes('admin')) {
this.currentRole = 'editorDashboard'
}
if (this.roles.includes('dev3')) {
this.currentRole = 'adminDashboard'
}
}
}
</script>
加载流程:
index——》根据条件加载主页组件——》主页加载封装好的组件