<template>
21 | <sum-layout :settings="settings" class="sum-layout">
22 | <template #title>
23 | <div class="title">
24 | <img style="height: 50px;margin-right: 10px;" src="data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0IDQ0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzQwOWVmZjtmaWxsLXJ1bGU6ZXZlbm9kZDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmVsZW1lbnQgcGx1cy1sb2dvLXNtYWxsIOWJr+acrDwvdGl0bGU+PHBhdGggaWQ9ImVsZW1lbnRfcGx1cy1sb2dvLXNtYWxsIiBkYXRhLW5hbWU9ImVsZW1lbnQgcGx1cy1sb2dvLXNtYWxsIiBjbGFzcz0iY2xzLTEiIGQ9Ik0zNy40MSwzMi4zN2MwLDEuNTctLjgzLDEuOTMtLjgzLDEuOTNMMjEuNTEsNDNBMS42OSwxLjY5LDAsMCwxLDIwLDQzUzUuMiwzNC40LDQuNjYsMzRhMS4yOSwxLjI5LDAsMCwxLS41NS0xVjE1LjI0YzAtLjc4LDEtMS4zMywxLTEuMzNMMTkuODYsNS4zNmEyLDIsMCwwLDEsMS43OSwwbDE0LjQ2LDguNDFhMi4wNiwyLjA2LDAsMCwxLDEuMjUsMi4wNlYzMi4zN1ptLTUuOS0xN0wyMS4zNSw5LjVhMS41OSwxLjU5LDAsMCwwLTEuNDEsMEw4LjMzLDE2LjE1cy0uNzcuNDYtLjc2LDEuMDgsMCwxMy45MiwwLDEzLjkyQTEsMSwwLDAsMCw4LDMxLjljLjQzLjMsMTIsNywxMiw3YTEuMzEsMS4zMSwwLDAsMCwxLjE5LDBDMjEuOTEsMzguNSwzMywzMi4xMSwzMywzMi4xMXMuNjUtLjI4LjY1LTEuNTFWMjcuMTNsLTEzLDcuOVYzMmEzLjA1LDMuMDUsMCwwLDEsMS0yLjA3TDMzLjIsMjNhMi40NCwyLjQ0LDAsMCwwLC41NS0xLjQ2VjE4LjQzTDIwLjY0LDI2LjM1di0zLjJhMi4yMiwyLjIyLDAsMCwxLC44My0xLjc5Wk00MS4wNyw0LjIyYS4zOS4zOSwwLDAsMC0uMzctLjQySDM4VjEuMDZjMC0uMTYtLjI2LS4yMi0uNTMtLjIyTDM2LDEuMDhjLS4xOCwwLS4zMS4xMi0uMzEuMjNWMy44SDMzYS40LjQsMCwwLDAtLjM2LjM3djJoM1Y5YzAsLjE2LjI2LjI3LjU0LjIzbDEuNTEtLjI1Yy4xOCwwLC4yOS0uMTMuMjktLjIzVjYuMTRoM1oiLz48L3N2Zz4=">
25 | <div>测试标题</div>
26 | </div>
27 | </template>
28 | <template #right>
29 | <div>admin</div>
30 | </template>
31 | <template #default>
32 | <div>container</div>
33 | </template>
34 | </sum-layout>
35 | </template>
36 |
37 | <script lang="ts">
38 | import { defineComponent, reactive, toRefs } from 'vue'
39 |
40 | export default defineComponent({
41 | setup() {
42 | const settings = reactive({
43 | // 可以用slot插槽或者render渲染函数两种方式，当使用render的时候需要改成 <script lang="tsx">
44 | headerTitle: {
45 | slot: 'title'
46 | },
47 | // headerTitle: () =>
48 | // <div class="title">
49 | // <img
50 | // src="./logo.png"
51 | // alt="header-logo"
52 | // />
53 | // <div>测试标题</div>
54 | // </div>,
55 | headerRight: {
56 | slot: 'right'
57 | },
58 | // headerRight: () => <div>admin</div>,
59 | menuData: [
60 | {
61 | title: '菜单列表', // 标题
62 | icon: 'el-icon-s-goods', // icon
63 | auth: 'menu', // 权限
64 | path: '/menu', // 路径
65 | children: [ // 子菜单
66 | {
67 | title: '数据',
68 | auth: 'menu/data',
69 | // path: '/menu/data'
70 | },
71 | {
72 | title: '分析',
73 | auth: 'menu/analysis',
74 | // path: '/menu/analysis'
75 | }
76 | ]
77 | }
78 | ],
79 | headerStyles: {
80 | backgroundColor: '#545c64',
81 | padding: '10px',
82 | color: '#fff'
83 | },
84 | menuProps: {
85 | backgroundColor: '#f7f6f2',
86 | textColor: '#333',
87 | activeTextColor: '#409eff',
88 | defaultActive: '0-0',
89 | defaultOpeneds: [0]
90 | },
91 | triggerCollapse: true,
92 | footer: '@copyRight by footer', // 字符串或者render函数
93 | })
94 | return {
95 | settings,
96 | ...toRefs(settings)
97 | }
98 | }
99 | })
100 | </script>
101 |
102 | <style>
103 | .sum-layout {
104 | min-height: 500px;
105 | }
106 | .title {
107 | display: flex;
108 | align-items: center;
109 | }
110 | a:hover {
111 | text-decoration: none!important;
112 | }
113 | </style>
114 |
