Skip to content

Commit 4a71680

Browse files
author
zhongjie
committed
抽取组件模版
1 parent e4f6a3e commit 4a71680

File tree

11 files changed

+190
-109
lines changed

11 files changed

+190
-109
lines changed

‎src/components/api-table.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="site-api">
33
<div v-if="dataApiData && dataApiData.length">
4-
<div class="site-content-subtitle" >
4+
<div class="site-content-subtitle">
55
DATA-API
66
</div>
77
<div class="site-content-des">
@@ -35,7 +35,7 @@
3535
</code></pre>
3636
</div>
3737

38-
<div v-if="attrData && attrData.length">
38+
<div v-if="attrData && attrData.length">
3939
<div class="site-content-subtitle">
4040
属性
4141
</div>
@@ -154,7 +154,7 @@ export default class extends Vue {
154154
hookData: any[];
155155
156156
created() {
157-
(<any>window).cd.tooltip();
157+
cd.tooltip();
158158
}
159159
}
160160
</script>

‎src/components/component-template.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div>
3+
<div class="site-content-title">
4+
{{ title }}
5+
</div>
6+
<div class="site-content-des">
7+
{{ des }}
8+
</div>
9+
<div class="cd-row">
10+
<div :class="'cd-xs-' + item.col" v-for="(item, index) in card" :key="index">
11+
<x-panel :code="item.code|trim">
12+
<div slot="title">
13+
{{ item.title }}
14+
</div>
15+
<div slot="code">
16+
<pre v-highlightjs><code class="html">
17+
{{ item.code }}
18+
</code></pre>
19+
</div>
20+
<div class="cd-mb16" slot="style" v-html="item.code"></div>
21+
<div class="" slot="dec">
22+
{{ item.dec }}
23+
</div>
24+
</x-panel>
25+
</div>
26+
</div>
27+
<x-api-table
28+
:code="api.code"
29+
:eventData="api.eventData"
30+
:dataApiData="api.dataApiData"
31+
:attrData="api.attrData"
32+
:hookData="api.hookData">
33+
</x-api-table>
34+
</div>
35+
</template>
36+
37+
<script lang="ts">
38+
import Vue from 'vue';
39+
import { Component, Prop } from 'vue-property-decorator';
40+
41+
import XPanel from '@/components/panel.vue';
42+
import XApiTable from '@/components/api-table.vue';
43+
44+
@Component({
45+
components: {
46+
XApiTable,
47+
XPanel
48+
}
49+
})
50+
export default class extends Vue {
51+
@Prop({ default: '' })
52+
title: string;
53+
54+
@Prop({ default: '' })
55+
des: string;
56+
57+
@Prop({ default: [] })
58+
card: any[];
59+
60+
@Prop()
61+
api: any;
62+
}
63+
</script>
64+

‎src/components/panel.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default class extends Vue {
3333
code: any[];
3434
3535
created() {
36-
(<any>window).cd.tooltip({
36+
cd.tooltip({
3737
el: '.js-code-tooltip'
3838
});
3939
}
@@ -45,7 +45,7 @@ export default class extends Vue {
4545
copy() {
4646
const clipboard = new Clipboard('.js-copy-code');
4747
clipboard.on('success', function(e) {
48-
(<any>window).cd.message({
48+
cd.message({
4949
type: 'success',
5050
message: '复制成功'
5151
});

‎src/main.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Vue from 'vue';
22
import MetaInfo from 'vue-meta-info';
3-
import App from '@/App.vue';
43
import router from '@/router';
54
import filters from '@/filters';
65
import plugins from '@/plugins';
@@ -9,7 +8,7 @@ import 'babel-polyfill';
98
import hljs from 'highlight.js';
109
import 'highlight.js/styles/googlecode.css';
1110
import 'jquery';
12-
import 'codeages-design/dist/codeages-design';
11+
import * as cd from 'codeages-design';
1312
import 'codeages-design/src/less/codeages-design.less';
1413
import '@/assets/styles/main.less';
1514

@@ -19,10 +18,12 @@ Vue.use(plugins);
1918

2019
Vue.config.productionTip = false;
2120

22-
Vue.directive('highlightjs', function(el) {
23-
hljs.highlightBlock(el);
21+
Vue.directive('highlightjs', (e) => {
22+
hljs.highlightBlock(e);
2423
});
2524

25+
(<any>window).cd = cd;
26+
2627
/* eslint-disable no-new */
2728
new Vue({
2829
el: '#app',

‎src/mixins/component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
import Vue from 'vue';
3+
import { Component } from 'vue-property-decorator';
4+
5+
import XPanel from '@/components/panel.vue';
6+
import XApiTable from '@/components/api-table.vue';
7+
8+
9+
@Component({
10+
components: {
11+
XPanel,
12+
XApiTable
13+
}
14+
})
15+
export default class extends Vue {
16+
17+
}

‎src/tools.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module 'codeages-design/package.json';
2+
declare module '@/router';
3+
declare module '@/filters';
4+
declare module '@/plugins';
5+
declare module '@/mixins/component';
6+
7+
declare module '@/components/panel.vue';
8+
declare module '@/components/api-table.vue';
9+
declare module '@/components/component-template.vue';

‎src/views/component.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,29 @@
1818
</template>
1919

2020
<script lang="ts">
21+
import Vue from 'vue';
22+
import { Component } from 'vue-property-decorator';
23+
2124
import XSideBar from '@/views/sidebar.vue';
2225
import XHeader from '@/views/header.vue';
2326
import XPager from '@/views/pager.vue';
2427
2528
import * as code from './component/modal';
2629
27-
export default {
30+
@Component({
2831
name: 'layout',
29-
data() {
30-
return {
31-
code,
32-
isHideSidebar: false,
33-
}
34-
},
3532
components: {
3633
XSideBar,
3734
XHeader,
3835
XPager
39-
},
40-
methods: {
41-
sidebarToggle() {
42-
return this.isHideSidebar = !this.isHideSidebar;
43-
},
44-
},
36+
}
37+
})
38+
export default class extends Vue {
39+
code: any = code;
40+
isHideSidebar: boolean = false;
41+
42+
sidebarToggle() {
43+
return this.isHideSidebar = !this.isHideSidebar;
44+
}
4545
};
4646
</script>

‎src/views/component/alert.vue‎

Lines changed: 49 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,65 @@
11
<template>
2-
<div>
3-
<div class="site-content-title">提示框</div>
4-
<div class="site-content-des">提示框的作用是在页面级别的交互反馈中用以给用户展示场景信息，大部分情况下，提示框都应该是固定在某个具体位置不主动消失。</div>
5-
<div class="cd-row">
6-
<div class="cd-xs-12">
7-
<x-panel :code="code.alert_color|trim">
8-
<div slot="title">
9-
场景提示框
10-
</div>
11-
<div slot="code">
12-
<pre v-highlightjs><code class="html">
13-
{{ code.alert_color }}
14-
</code></pre>
15-
</div>
16-
<div class="cd-mb16" slot="style" v-html="code.alert_color"></div>
17-
<div class="" slot="dec">
18-
我们将场景色引入了提示框中，为的是让用户通过场景色能够快速感知提示框可能带来的内容定义。通过成功提示框、错误提示框、警告提示框、信息提示框来区分不同场景下的信息提示。
19-
</div>
20-
</x-panel>
21-
</div>
22-
<div class="cd-xs-12">
23-
<x-panel :code="code.alert_close|trim">
24-
<div slot="title">
25-
可关闭提示框
26-
</div>
27-
<div slot="code">
28-
<pre v-highlightjs><code class="html">
29-
{{ code.alert_close }}
30-
</code></pre>
31-
</div>
32-
<div class="cd-mb16" slot="style" v-html="code.alert_close">
33-
</div>
34-
<div class="" slot="dec">
35-
在一些偏向营销的提示框场景下，我们应该给用户以关闭“碍眼的提示信息”的权利。
36-
</div>
37-
</x-panel>
38-
</div>
39-
</div>
40-
<x-api-table
41-
:code="code.alert_api"
42-
:attrData="attrData"
43-
:hookData="hookData">
44-
</x-api-table>
45-
</div>
2+
<x-component-template
3+
title="提示框"
4+
des="提示框的作用是在页面级别的交互反馈中用以给用户展示场景信息，大部分情况下，提示框都应该是固定在某个具体位置不主动消失。"
5+
:card="card"
6+
:api="api"
7+
>
8+
</x-component-template>
469
</template>
4710

48-
<script>
11+
<script lang="ts">
12+
import Vue from 'vue';
13+
import { Component } from 'vue-property-decorator';
14+
import XComponentTemplate from '@/components/component-template.vue';
15+
4916
import * as code from './alert';
50-
import XPanel from '@/components/panel.vue';
51-
import XApiTable from '@/components/api-table.vue';
5217
53-
const attrData = [
18+
const card = [
5419
{
55-
name: 'el',
56-
dec: '要绑定的Dom元素',
57-
type: 'String',
58-
value: '无',
59-
optional: '--'
20+
col: '12',
21+
title: '场景提示框',
22+
dec: '我们将场景色引入了提示框中，为的是让用户通过场景色能够快速感知提示框可能带来的内容定义。通过成功提示框、错误提示框、警告提示框、信息提示框来区分不同场景下的信息提示。',
23+
code: code.alert_color,
6024
},
61-
];
62-
63-
const hookData = [
6425
{
65-
name: 'close',
66-
dec: '关闭后触发的钩子',
67-
callback: '--',
68-
args: 'args1: $alert，被绑定的Dom元素的jquery对象'
26+
col: '12',
27+
title: '可关闭提示框',
28+
dec: '在一些偏向营销的提示框场景下，我们应该给用户以关闭“碍眼的提示信息”的权利。',
29+
code: code.alert_close
6930
}
7031
];
7132
72-
export default {
73-
components: {
74-
XPanel,
75-
XApiTable
76-
},
77-
data() {
78-
return {
79-
code,
80-
attrData,
81-
hookData
33+
const api = {
34+
code: code.alert_api,
35+
attrData: [
36+
{
37+
name: 'el',
38+
dec: '要绑定的Dom元素',
39+
type: 'String',
40+
value: '无',
41+
optional: '--'
8242
}
43+
],
44+
hookData: [
45+
{
46+
name: 'close',
47+
dec: '关闭后触发的钩子',
48+
callback: '--',
49+
args: 'args1: $alert，被绑定的Dom元素的jquery对象'
50+
}
51+
]
52+
}
53+
54+
@Component({
55+
components: {
56+
XComponentTemplate
8357
},
58+
})
59+
export default class extends Vue {
60+
card: any = card;
61+
api: any = api;
62+
8463
mounted() {
8564
cd.alert({
8665
el: '.js-cd-alert',

‎src/views/component/autocomplete.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@
3030
</div>
3131
</template>
3232

33-
<script>
33+
<script lang="ts">
34+
import Vue from 'vue';
35+
import { Component } from 'vue-property-decorator';
36+
3437
import * as code from './autocomplete';
3538
import XPanel from '@/components/panel.vue';
3639
import XApiTable from '@/components/api-table.vue';
@@ -68,18 +71,17 @@ const hookData = [
6871
}
6972
];
7073
71-
export default {
74+
@Component({
7275
components: {
7376
XPanel,
7477
XApiTable
75-
},
76-
data() {
77-
return {
78-
code,
79-
attrData,
80-
hookData
81-
}
82-
},
78+
}
79+
})
80+
export default class extends Vue {
81+
code: any = code;
82+
attrData: any[] = attrData;
83+
hookData: any[] = hookData;
84+
8385
mounted() {
8486
cd.autocomplete({
8587
el: '#cd-autocomplete',
@@ -103,8 +105,6 @@ export default {
103105
],
104106
selectKey: 'name'
105107
});
106-
},
107-
methods: {
108108
}
109109
}
110110
</script>

0 commit comments

Comments
 (0)