Adam / gulu-admin

Blame view

src/views/theme/index.vue 2.63 KB
edit raw normal view history
d7d9c38c2   Adam   auto commit the c... 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
  <template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header">
          <a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
            {{ $t('theme.documentation') }}
          </a>
        </div>
        <div class="box-item">
          <span class="field-label">{{ $t('theme.change') }} : </span>
          <el-switch v-model="theme" />
          <aside style="margin-top:15px;">{{ $t('theme.tips') }}</aside>
        </div>
      </el-card>
  
      <div class="block">
        <el-button type="primary">
          Primary
        </el-button>
        <el-button type="success">
          Success
        </el-button>
        <el-button type="info">
          Info
        </el-button>
        <el-button type="warning">
          Warning
        </el-button>
        <el-button type="danger">
          Danger
        </el-button>
      </div>
  
      <div class="block">
        <el-button type="primary" icon="el-icon-edit" />
        <el-button type="primary" icon="el-icon-share" />
        <el-button type="primary" icon="el-icon-delete" />
        <el-button type="primary" icon="el-icon-search">
          Search
        </el-button>
        <el-button type="primary">
          Upload
          <i class="el-icon-upload el-icon-right" />
        </el-button>
      </div>
  
      <div class="block">
        <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
          {{ tag.name }}
        </el-tag>
      </div>
  
      <div class="block">
        <el-radio-group v-model="radio">
          <el-radio :label="3">
            Option A
          </el-radio>
          <el-radio :label="6">
            Option B
          </el-radio>
          <el-radio :label="9">
            Option C
          </el-radio>
        </el-radio-group>
      </div>
  
      <div class="block">
        <el-slider v-model="slideValue" />
      </div>
    </div>
  </template>
  
  <script>
  import { toggleClass } from '@/utils'
  import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
  
  export default {
    name: 'Theme',
    data() {
      return {
        theme: false,
        tags: [
          { name: 'Tag One', type: '' },
          { name: 'Tag Two', type: 'info' },
          { name: 'Tag Three', type: 'success' },
          { name: 'Tag Four', type: 'warning' },
          { name: 'Tag Five', type: 'danger' }
        ],
        slideValue: 50,
        radio: 3
      }
    },
    watch: {
      theme() {
        toggleClass(document.body, 'custom-theme')
      }
    }
  }
  </script>
  
  <style scoped>
  .field-label{
    vertical-align: middle;
  }
  .box-card {
    width: 400px;
    max-width: 100%;
    margin: 20px auto;
  }
  
  .block {
    padding: 30px 24px;
  }
  
  .tag-item {
    margin-right: 15px;
  }
  </style>