Skip to content

Commit 3c92884

Browse files
author
zhongjie
committed
抽取color item
1 parent 4a71680 commit 3c92884

File tree

12 files changed

+482
-687
lines changed

12 files changed

+482
-687
lines changed

‎src/components/color-item.vue‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<template>
2+
<div class="color-palette">
3+
<div :class="`palette-${name}`" :style="{background: colorArr[middleIndex].color}">
4+
<span class="text-left-top">{{ title }}</span>
5+
<span class="text-right-bottom">{{ colorArr[middleIndex].color }}</span>
6+
</div>
7+
<div class="palette-color"
8+
:class="index < middleIndex ? 'cd-dark-major': 'cd-light-major'"
9+
:style="{background: item.color}"
10+
v-for="(item, index) in colorArr"
11+
:key="index">
12+
<span class="text-left">{{item.key}}</span>
13+
<span class="text-right">{{ item.color }}</span>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script lang="ts">
19+
import Vue from 'vue';
20+
import { Component, Prop, Watch } from 'vue-property-decorator';
21+
22+
@Component
23+
export default class extends Vue {
24+
@Prop({
25+
type: Array,
26+
default: () => {
27+
return []
28+
}
29+
})
30+
colorArr: any;
31+
32+
@Prop()
33+
name: string;
34+
35+
@Prop()
36+
title: string;
37+
38+
get middleIndex():number {
39+
console.log(Math.ceil(this.colorArr.length / 2), 'colorArr')
40+
return Math.ceil(this.colorArr.length / 2);
41+
}
42+
}
43+
</script>
44+
45+
<style lang="less" scoped>
46+
@import '~codeages-design/src/less/variables.less';
47+
@import '~codeages-design/src/less/mixins.less';
48+
49+
.color-palette {
50+
position: relative;
51+
margin: 0 16px 40px 0px;
52+
font-size: 14px;
53+
line-height: 14px;
54+
color: white;
55+
border-radius: 4px;
56+
.cd-transition;
57+
.text-left-top {
58+
position: absolute;
59+
top: 16px;
60+
left: 16px;
61+
}
62+
.text-right-bottom {
63+
position: absolute;
64+
top: 48px;
65+
right: 16px;
66+
}
67+
.text-left {
68+
display: inline-block;
69+
padding: 13px 16px;
70+
}
71+
.text-right {
72+
opacity: 0;
73+
float: right;
74+
display: inline-block;
75+
padding: 13px 16px;
76+
.cd-transition;
77+
}
78+
& div:last-child {
79+
border-radius: 0 0 4px 4px;
80+
}
81+
}
82+
83+
.palette-color {
84+
.cd-transition;
85+
&:hover {
86+
transform: scale(1.03);
87+
.cd-box-shadow(24px);
88+
.cd-transition;
89+
.text-right {
90+
opacity: 1;
91+
.cd-transition;
92+
}
93+
}
94+
}
95+
96+
.palette-levels(@color, @key) {
97+
.palette-@{key} {
98+
height: 80px;
99+
background: @color;
100+
border-radius: 4px 4px 0 0;
101+
}
102+
}
103+
104+
.palette-levels(@brand-primary, primary);
105+
.palette-levels(@color-forest, forest);
106+
.palette-levels(@color-ocean, ocean);
107+
.palette-levels(@color-rose, rose);
108+
.palette-levels(@color-flame, flame);
109+
.palette-levels(@color-bud, bud);
110+
.palette-levels(@color-lemon, lemon);
111+
.palette-levels(@color-violet, violet);
112+
.palette-levels(@color-sakura, sakura);
113+
.palette-levels(@color-gray, gray);
114+
</style>
115+
116+

‎src/components/component-template.vue‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div>
2+
<div :class="className">
33
<div class="site-content-title">
44
{{ title }}
55
</div>
66
<div class="site-content-des">
77
{{ des }}
88
</div>
99
<div class="cd-row">
10-
<div :class="'cd-xs-' + item.col" v-for="(item, index) in card" :key="index">
10+
<div :class="'cd-xs-' + item.col || 12" v-for="(item, index) in card" :key="index">
1111
<x-panel :code="item.code|trim">
1212
<div slot="title">
1313
{{ item.title }}
@@ -17,12 +17,13 @@
1717
{{ item.code }}
1818
</code></pre>
1919
</div>
20-
<div class="cd-mb16" slot="style" v-html="item.code"></div>
20+
<div class="cd-mb16" slot="style" v-html="item.code_style || item.code"></div>
2121
<div class="" slot="dec">
2222
{{ item.dec }}
2323
</div>
24-
</x-panel>
24+
</x-panel>
2525
</div>
26+
<slot name="card"></slot>
2627
</div>
2728
<x-api-table
2829
:code="api.code"
@@ -48,16 +49,29 @@ import XApiTable from '@/components/api-table.vue';
4849
}
4950
})
5051
export default class extends Vue {
52+
@Prop({default: ''})
53+
className: string;
54+
5155
@Prop({ default: '' })
5256
title: string;
5357
5458
@Prop({ default: '' })
5559
des: string;
5660
57-
@Prop({ default: [] })
61+
@Prop({
62+
type: Array,
63+
default: () => {
64+
return [];
65+
}
66+
})
5867
card: any[];
5968
60-
@Prop()
69+
@Prop({
70+
type: Object,
71+
default: () => {
72+
return {}
73+
}
74+
})
6175
api: any;
6276
}
6377
</script>

‎src/mixins/component.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/utils/color-mix.js‎ renamed to ‎src/utils/color-mix.ts‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
export const tint = (color, amount) => {
1+
export const tint = (color: string, amount: number): string => {
22

33
if (amount === 0) {
44
return `#${color}`.toLowerCase();
55
}
66

7-
let red = parseInt(color.slice(0, 2), 16)
8-
let green = parseInt(color.slice(2, 4), 16)
9-
let blue = parseInt(color.slice(4, 6), 16)
7+
let red:number | string = parseInt(color.slice(0, 2), 16)
8+
let green:number | string = parseInt(color.slice(2, 4), 16)
9+
let blue:number | string = parseInt(color.slice(4, 6), 16)
1010

1111
red += Math.round(amount * (255 - red))
1212
green += Math.round(amount * (255 - green))
@@ -19,10 +19,10 @@ export const tint = (color, amount) => {
1919
return `#${red}${green}${blue}`
2020
};
2121

22-
export const shade = (color, amount) => {
23-
let red = parseInt(color.slice(0, 2), 16)
24-
let green = parseInt(color.slice(2, 4), 16)
25-
let blue = parseInt(color.slice(4, 6), 16)
22+
export const shade = (color: string, amount: number): string => {
23+
let red:number | string = parseInt(color.slice(0, 2), 16)
24+
let green:number | string = parseInt(color.slice(2, 4), 16)
25+
let blue:number | string = parseInt(color.slice(4, 6), 16)
2626

2727
red = Math.round((1 - amount) * red)
2828
green = Math.round((1 - amount) * green)
@@ -35,7 +35,4 @@ export const shade = (color, amount) => {
3535
return `#${red}${green}${blue}`
3636
};
3737

38-
export const tone = (color, amount) => {
39-
40-
};
4138

‎src/views/component/autocomplete.vue‎

Lines changed: 50 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,70 @@
11
<template>
2-
<div>
3-
<div class="site-content-title">自动补全</div>
4-
<div class="site-content-des">
5-
6-
</div>
7-
<div class="cd-row">
8-
<div class="cd-xs-12">
9-
<x-panel :code="code.autoComplete_base|trim">
10-
<span slot="title">
11-
基础
12-
</span>
13-
<div slot="code">
14-
<pre v-highlightjs><code class="html">
15-
{{ code.autoComplete_base }}
16-
</code></pre>
17-
</div>
18-
<div class="cd-mb16" slot="style" v-html="code.autoComplete_base" style="width: 200px">
19-
</div>
20-
<div class="" slot="dec">
21-
</div>
22-
</x-panel>
23-
</div>
24-
</div>
25-
<x-api-table
26-
:code="code.autocomplete_api"
27-
:attrData="attrData"
28-
:hookData="hookData">
29-
</x-api-table>
30-
</div>
2+
<x-component-template
3+
title='自动补全'
4+
:card="card"
5+
:api="api"
6+
>
7+
</x-component-template>
318
</template>
329

3310
<script lang="ts">
3411
import Vue from 'vue';
3512
import { Component } from 'vue-property-decorator';
13+
import XComponentTemplate from '@/components/component-template.vue';
3614
3715
import * as code from './autocomplete';
38-
import XPanel from '@/components/panel.vue';
39-
import XApiTable from '@/components/api-table.vue';
4016
41-
const attrData = [
17+
const card = [
4218
{
43-
name: 'el',
44-
dec: '要绑定的Dom元素',
45-
type: 'String',
46-
value: '无',
47-
optional: '--'
48-
},
49-
{
50-
name: 'sources',
51-
dec: '数据源, 如果是Function类型，则必须返回一个Promise, resolve值为数组',
52-
type: 'Array | Function',
53-
value: '无',
54-
optional: '--'
55-
},
56-
{
57-
name: 'selectKey',
58-
dec: '如果数据源中的每一项是一个对象，则添加selectKey来筛选要匹配的key',
59-
type: 'String',
60-
value: '无',
61-
optional: '--'
62-
},
63-
];
64-
65-
const hookData = [
66-
{
67-
name: 'change',
68-
dec: '修改后触发的钩子',
69-
callback: '--',
70-
args: 'args1: value，选中的值'
19+
col: '12',
20+
title: '基础',
21+
code: code.autoComplete_base
7122
}
72-
];
23+
]
24+
25+
const api = {
26+
code: code.autocomplete_api,
27+
attrData: [
28+
{
29+
name: 'el',
30+
dec: '要绑定的Dom元素',
31+
type: 'String',
32+
value: '无',
33+
optional: '--'
34+
},
35+
{
36+
name: 'sources',
37+
dec: '数据源, 如果是Function类型，则必须返回一个Promise, resolve值为数组',
38+
type: 'Array | Function',
39+
value: '无',
40+
optional: '--'
41+
},
42+
{
43+
name: 'selectKey',
44+
dec: '如果数据源中的每一项是一个对象，则添加selectKey来筛选要匹配的key',
45+
type: 'String',
46+
value: '无',
47+
optional: '--'
48+
},
49+
],
50+
hookData: [
51+
{
52+
name: 'change',
53+
dec: '修改后触发的钩子',
54+
callback: '--',
55+
args: 'args1: value，选中的值'
56+
}
57+
]
58+
}
7359
7460
@Component({
7561
components: {
76-
XPanel,
77-
XApiTable
62+
XComponentTemplate,
7863
}
7964
})
8065
export default class extends Vue {
81-
code: any = code;
82-
attrData: any[] = attrData;
83-
hookData: any[] = hookData;
66+
card: any = card;
67+
api: any = api;
8468
8569
mounted() {
8670
cd.autocomplete({
@@ -109,6 +93,3 @@ export default class extends Vue {
10993
}
11094
</script>
11195

112-
<style lang="less">
113-
114-
</style>

0 commit comments

Comments
 (0)