1 | # SideNav
|
2 |
|
3 | ### Basic usage
|
4 |
|
5 | :::kview
|
6 |
|
7 | ```html
|
8 | <template>
|
9 | <el-button type="primary" size="small" @click="changeData">changeData</el-button>
|
10 | <k-side-nav :data-source="menuData" />
|
11 | </template>
|
12 |
|
13 | <script>
|
14 |
|
15 | export default {
|
16 | data() {
|
17 | return {
|
18 | menuData: [{
|
19 | "label": "Home",
|
20 | "value": "home",
|
21 | "icon": "home"
|
22 | }, {
|
23 | "label": "Black List",
|
24 | "value": "black",
|
25 | "icon": "black"
|
26 | }, {
|
27 | "label": "White List",
|
28 | "value": "white",
|
29 | "icon": "white"
|
30 | }, {
|
31 | "label": "Voice Menu",
|
32 | "value": "voice",
|
33 | "icon": "voice",
|
34 | "children": [{
|
35 | "label": "voice conpare",
|
36 | "value": "voice-compare",
|
37 | "props": {
|
38 | "style": "padding-left:10px;"
|
39 | }
|
40 | }, {
|
41 | "label": "voice verify",
|
42 | "value": "voice-verify",
|
43 | "props": {
|
44 | "style": "padding-left:10px;"
|
45 | }
|
46 | }, {
|
47 | "label": "voice check",
|
48 | "value": "voice-check",
|
49 | "props": {
|
50 | "style": "padding-left:10px;"
|
51 | }
|
52 | }]
|
53 | }, {
|
54 | "label": "Company Management",
|
55 | "value": "company",
|
56 | "icon": "company",
|
57 | "children": [{
|
58 | "label": "Account Manage",
|
59 | "value": "company-account",
|
60 | "props": {
|
61 | "style": "padding-left:10px;"
|
62 | }
|
63 | }, {
|
64 | "label": "Role Manage",
|
65 | "value": "company-role",
|
66 | "props": {
|
67 | "style": "padding-left:10px;"
|
68 | }
|
69 | }]
|
70 | }, {
|
71 | "label": "Fail Record",
|
72 | "value": "fail",
|
73 | "icon": "fail"
|
74 | }, {
|
75 | "label": "Logs",
|
76 | "value": "log",
|
77 | "icon": "log"
|
78 | }]
|
79 | }
|
80 | },
|
81 | methods:{
|
82 | changeData(){
|
83 | this.menuData=[{
|
84 | "label": "Fail Logs",
|
85 | "value": "fail",
|
86 | "icon": "fail"
|
87 | }, {
|
88 | "label": "Actions Records",
|
89 | "value": "log",
|
90 | "icon": "log"
|
91 | }]
|
92 | }
|
93 | }
|
94 | };
|
95 | </script>
|
96 | ```
|
97 |
|
98 | :::
|
99 |
|