Skip to content
This repository was archived by the owner on Jan 8, 2025. It is now read-only.

Commit 2085879

Browse files
Liuhuazhong0801Liuhuazhong0801
committed
feat(ui/card): add component card
1 parent cc342dc commit 2085879

File tree

15 files changed

+725
-0
lines changed

15 files changed

+725
-0
lines changed

‎packages/varlet-vue2-ui/src/card/Card.vue

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div
3+
class="var-card"
4+
:class="[elevation ? `var-elevation--${elevation}` : 'var-elevation--2']"
5+
v-ripple="{ disabled: !ripple }"
6+
@click="handleClick"
7+
>
8+
<slot name="image">
9+
<img
10+
class="var-card__image"
11+
:style="{
12+
objectFit: fit,
13+
height: toSizeUnit(height),
14+
}"
15+
:src="src"
16+
:alt="alt"
17+
v-if="src"
18+
/>
19+
</slot>
20+
<slot name="title">
21+
<div class="var-card__title" v-if="title">{{ title }}</div>
22+
</slot>
23+
<slot name="subtitle">
24+
<div class="var-card__subtitle" v-if="subtitle">{{ subtitle }}</div>
25+
</slot>
26+
<slot name="description">
27+
<div class="var-card__description" v-if="description">{{ description }}</div>
28+
</slot>
29+
<div class="var-card__footer" v-if="hasSlots('extra')">
30+
<slot name="extra" />
31+
</div>
32+
</div>
33+
</template>
34+
35+
<script>
36+
import Ripple from '../ripple'
37+
import { defineComponent } from '../utils/create'
38+
import { props } from './props'
39+
import { toSizeUnit } from '../utils/elements'
40+
41+
export default defineComponent({
42+
name: 'VarCard',
43+
directives: { Ripple },
44+
props,
45+
data() {
46+
return {
47+
toSizeUnit,
48+
}
49+
},
50+
methods: {
51+
handleClick(e) {
52+
const { disabled } = this
53+
const { onClick } = this.getListeners()
54+
55+
if (!onClick || disabled) {
56+
return
57+
}
58+
59+
onClick(e)
60+
},
61+
},
62+
})
63+
</script>
64+
65+
<style lang="less">
66+
@import '../styles/common';
67+
@import '../styles/elevation';
68+
@import '../ripple/ripple';
69+
@import './card';
70+
</style>

‎packages/varlet-vue2-ui/src/card/__tests__/__snapshots__/index.spec.js.snap

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`test card example 1`] = `
4+
"<div class=\\"var-card-outer\\">
5+
<div class=\\"app-type\\">基本使用</div>
6+
<div class=\\"var-card var-elevation--2\\">
7+
<!---->
8+
<div class=\\"var-card__title\\">风景</div>
9+
<!---->
10+
<div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
11+
<!---->
12+
</div>
13+
<div class=\\"app-type\\">显示副标题</div>
14+
<div class=\\"var-card var-elevation--2\\">
15+
<!---->
16+
<div class=\\"var-card__title\\">风景</div>
17+
<div class=\\"var-card__subtitle\\">公园里的风景</div>
18+
<div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
19+
<!---->
20+
</div>
21+
<div class=\\"app-type\\">显示图片</div>
22+
<div class=\\"var-card var-elevation--2\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-card__image\\" style=\\"object-fit: cover;\\">
23+
<div class=\\"var-card__title\\">风景</div>
24+
<div class=\\"var-card__subtitle\\">公园里的风景</div>
25+
<div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
26+
<!---->
27+
</div>
28+
<div class=\\"app-type\\">使用插槽</div>
29+
<div class=\\"var-card var-elevation--2\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-card__image\\" style=\\"object-fit: cover;\\">
30+
<div class=\\"var-card__title\\">风景</div>
31+
<div class=\\"var-card__subtitle\\">公园里的风景</div>
32+
<div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
33+
<div class=\\"var-card__footer\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\" style=\\"margin-right: 10px;\\">
34+
<!---->
35+
<div class=\\"var-button__content\\">添加按钮</div>
36+
</button> <button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2\\">
37+
<!---->
38+
<div class=\\"var-button__content\\">添加按钮</div>
39+
</button></div>
40+
</div>
41+
<div class=\\"app-type\\">水波效果</div>
42+
<div class=\\"var-card var-elevation--2\\">
43+
<!---->
44+
<div class=\\"var-card__title\\">风景</div>
45+
<div class=\\"var-card__subtitle\\">公园里的风景</div>
46+
<div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
47+
<!---->
48+
</div>
49+
</div>"
50+
`;
51+
52+
exports[`test card props 1`] = `
53+
"<div class=\\"var-card var-elevation--2\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" alt=\\"This is an image\\" class=\\"var-card__image\\" style=\\"object-fit: cover; height: 200px;\\">
54+
<div class=\\"var-card__title\\">This is Card</div>
55+
<div class=\\"var-card__subtitle\\">This is subtitle</div>
56+
<div class=\\"var-card__description\\">This is description</div>
57+
<div class=\\"var-card__footer\\">
58+
<div>text</div>
59+
</div>
60+
</div>"
61+
`;

‎packages/varlet-vue2-ui/src/card/__tests__/index.spec.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import example from '../example'
2+
import Vue from 'vue'
3+
import Card from '..'
4+
import VarCard from '../Card'
5+
import { mount } from '@vue/test-utils'
6+
7+
test('test card example', () => {
8+
const wrapper = mount(example)
9+
expect(wrapper.html()).toMatchSnapshot()
10+
wrapper.destroy()
11+
})
12+
13+
test('test card plugin', () => {
14+
Vue.use(Card)
15+
expect(Vue.component(Card.name)).toBeTruthy()
16+
})
17+
18+
test('test card props', async () => {
19+
const wrapper = mount(VarCard, {
20+
propsData: {
21+
title: 'This is Card',
22+
description: 'This is description',
23+
subtitle: 'This is subtitle',
24+
src: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
25+
fit: 'cover',
26+
height: '200px',
27+
alt: 'This is an image',
28+
elevation: '2',
29+
ripple: true,
30+
},
31+
scopedSlots: {
32+
extra: '<div>text</div>',
33+
},
34+
})
35+
36+
expect(wrapper.find('img').attributes('style')).toMatch('height: 200px')
37+
expect(wrapper.find('img').attributes('style')).toMatch('object-fit: cover')
38+
expect(wrapper.find('img').attributes('alt')).toMatch('This is an image')
39+
expect(wrapper.find('img').attributes('src')).toMatch('https://varlet.gitee.io/varlet-ui/cat.jpg')
40+
expect(wrapper.find('.var-card__title').text()).toBe('This is Card')
41+
expect(wrapper.find('.var-card__subtitle').text()).toBe('This is subtitle')
42+
expect(wrapper.find('.var-card__description').text()).toBe('This is description')
43+
expect(wrapper.find('.var-card__footer').text()).toBe('text')
44+
expect(wrapper.classes()).toContain('var-elevation--2')
45+
expect(wrapper.html()).toMatchSnapshot()
46+
wrapper.destroy()
47+
})
48+
49+
test('test card onClick with null callback', () => {
50+
const wrapper = mount(VarCard)
51+
wrapper.trigger('click')
52+
wrapper.destroy()
53+
})
54+
55+
test('test card onClick', () => {
56+
const onClick = jest.fn()
57+
const wrapper = mount(VarCard, {
58+
listeners: {
59+
click: onClick,
60+
},
61+
})
62+
63+
wrapper.trigger('click')
64+
expect(onClick).toHaveBeenCalledTimes(1)
65+
wrapper.destroy()
66+
})

‎packages/varlet-vue2-ui/src/card/card.less

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@card-padding: 0 0 15px 0;
2+
@card-background: #fff;
3+
@card-border-radius: 4px;
4+
@card-image-width: 100%;
5+
@card-image-height: 200px;
6+
@card-title-color: #333;
7+
@card-title-font-size: 20px;
8+
@card-title-padding: 0 12px;
9+
@card-title-margin: 15px 0 0 0;
10+
@card-subtitle-color: rgba(0, 0, 0, 0.6);
11+
@card-subtitle-font-size: 14px;
12+
@card-subtitle-padding: 0 13px;
13+
@card-subtitle-margin: 10px 0 0 0;
14+
@card-description-color: rgba(0, 0, 0, 0.6);
15+
@card-description-font-size: 14px;
16+
@card-description-margin: 20px 0 0 0;
17+
@card-description-padding: 0 13px;
18+
@card-footer-padding: 0 12px;
19+
@card-footer-margin: 30px 0 0px 0;
20+
@card-line-height: 22px;
21+
22+
:root {
23+
--card-padding: @card-padding;
24+
--card-background: @card-background;
25+
--card-border-radius: @card-border-radius;
26+
--card-image-width: @card-image-width;
27+
--card-image-height: @card-image-height;
28+
--card-title-color: @card-title-color;
29+
--card-title-font-size: @card-title-font-size;
30+
--card-title-padding: @card-title-padding;
31+
--card-title-margin: @card-title-margin;
32+
--card-subtitle-color: @card-subtitle-color;
33+
--card-subtitle-font-size: @card-subtitle-font-size;
34+
--card-subtitle-padding: @card-subtitle-padding;
35+
--card-subtitle-margin: @card-subtitle-margin;
36+
--card-description-color: @card-description-color;
37+
--card-description-font-size: @card-description-font-size;
38+
--card-description-margin: @card-description-margin;
39+
--card-description-padding: @card-description-padding;
40+
--card-footer-padding: @card-footer-padding;
41+
--card-footer-margin: @card-footer-margin;
42+
--card-line-height: @card-line-height;
43+
}
44+
45+
.var-card {
46+
border-radius: var(--card-border-radius);
47+
overflow: hidden;
48+
padding: var(--card-padding);
49+
line-height: var(--card-line-height);
50+
background: var(--card-background);
51+
transition: background-color 0.25s;
52+
53+
&__image {
54+
width: var(--card-image-width);
55+
height: var(--card-image-height);
56+
display: block;
57+
}
58+
59+
&__title {
60+
font-size: var(--card-title-font-size);
61+
padding: var(--card-title-padding);
62+
margin: var(--card-title-margin);
63+
color: var(--card-title-color);
64+
}
65+
66+
&__subtitle {
67+
font-size: var(--card-subtitle-font-size);
68+
color: var(--card-subtitle-color);
69+
padding: var(--card-subtitle-padding);
70+
margin: var(--card-subtitle-margin);
71+
}
72+
73+
&__description {
74+
font-size: var(--card-description-font-size);
75+
color: var(--card-description-color);
76+
margin: var(--card-description-margin);
77+
padding: var(--card-description-padding);
78+
word-break: break-all;
79+
}
80+
81+
&__footer {
82+
padding: var(--card-footer-padding);
83+
margin: var(--card-footer-margin);
84+
}
85+
}

0 commit comments

Comments
 (0)