Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 94a7445

Browse files
chenjiahanchenjiahan
authored
[new feature] Icon: add tag prop (youzan#2986)
1 parent 36fc3ab commit 94a7445

File tree

10 files changed

+56
-18
lines changed

10 files changed

+56
-18
lines changed

‎packages/button/en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Vue.use(Button);
6363
| type | Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
6464
| size | Can be set to `large` `small` `mini` | `String` | `normal` |
6565
| text | Text | `String` | - |
66-
| tag | Tag | `String` | `button` |
66+
| tag | HTML Tag | `String` | `button` |
6767
| native-type | Native Type Attribute | `String` | `''` |
6868
| plain | Whether to be plain button | `Boolean` | `false` |
6969
| block | Whether to set display block | `Boolean` | `false` |

‎packages/button/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { CreateElement, RenderContext } from 'vue/types';
88
import { DefaultSlots } from '../utils/use/sfc';
99

1010
export type ButtonProps = RouteProps & {
11-
tag: string;
11+
tag: keyof HTMLElementTagNameMap;
1212
type: string;
1313
size: string;
1414
text?: string;

‎packages/goods-action-mini-btn/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function GoodsActionMiniBtn(
3131
<div class={[bem(), 'van-hairline']} onClick={onClick} {...inherit(ctx)}>
3232
<Icon
3333
class={[bem('icon'), props.iconClass]}
34+
tag="div"
3435
info={props.info}
3536
name={props.icon}
3637
/>

‎packages/goods-action/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,35 @@ exports[`renders demo correctly 1`] = `
44
<div>
55
<div>
66
<div class="van-goods-action">
7-
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
8-
<!----></i>客服</div>
9-
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
10-
<!----></i>购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
7+
<div class="van-goods-action-mini-btn van-hairline">
8+
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
9+
<!---->
10+
</div>客服
11+
</div>
12+
<div class="van-goods-action-mini-btn van-hairline">
13+
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
14+
<!---->
15+
</div>购物车
16+
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
1117
</div>
1218
</div>
1319
<div>
1420
<div class="van-goods-action">
15-
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
16-
<!----></i>客服</div>
17-
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
21+
<div class="van-goods-action-mini-btn van-hairline">
22+
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
23+
<!---->
24+
</div>客服
25+
</div>
26+
<div class="van-goods-action-mini-btn van-hairline">
27+
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
1828
<div class="van-info">5</div>
19-
</i>购物车</div>
20-
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon">
21-
<!----></i>店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
29+
</div>购物车
30+
</div>
31+
<div class="van-goods-action-mini-btn van-hairline">
32+
<div class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon">
33+
<!---->
34+
</div>店铺
35+
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
2236
</div>
2337
</div>
2438
</div>

‎packages/goods-action/test/__snapshots__/index.spec.js.snap‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
exports[`BigBtn render default slot 1`] = `<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">Default Content</span></button>`;
44

55
exports[`Mini render default slot 1`] = `
6-
<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-undefined van-goods-action-mini-btn__icon">
7-
<!----></i>Default Content</div>
6+
<div class="van-goods-action-mini-btn van-hairline">
7+
<div class="van-icon van-icon-undefined van-goods-action-mini-btn__icon">
8+
<!---->
9+
</div>Default Content
10+
</div>
811
`;

‎packages/icon/en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ import 'vant/lib/icon/local.css';
6262
| color | Icon color | `String` | `inherit` |
6363
| size | Icon size | `String` | `inherit` |
6464
| class-prefix | ClassName prefix | `String` | `van-icon` |
65-
65+
| tag | HTML Tag | `String` | `i` |
6666

6767
### Event
6868

‎packages/icon/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { CreateElement, RenderContext } from 'vue/types';
88
import { DefaultSlots } from '../utils/use/sfc';
99

1010
export type IconProps = {
11+
tag: keyof HTMLElementTagNameMap;
1112
name: string;
1213
size?: string;
1314
color?: string;
@@ -30,7 +31,7 @@ function Icon(
3031
const urlIcon = isSrc(props.name);
3132

3233
return (
33-
<i
34+
<props.tag
3435
class={[
3536
props.classPrefix,
3637
urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
@@ -44,7 +45,7 @@ function Icon(
4445
{slots.default && slots.default()}
4546
{urlIcon && <img src={props.name} />}
4647
<Info info={props.info} />
47-
</i>
48+
</props.tag>
4849
);
4950
}
5051

@@ -53,6 +54,10 @@ Icon.props = {
5354
size: String,
5455
color: String,
5556
info: [String, Number],
57+
tag: {
58+
type: String,
59+
default: 'i'
60+
},
5661
classPrefix: {
5762
type: String,
5863
default: 'van-icon'

‎packages/icon/test/__snapshots__/index.spec.js.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,9 @@ exports[`render icon with url name 1`] = `
1414
<i class="van-icon van-icon--image"><img src="https://img.yzcdn.com/icon.jpg">
1515
<!----></i>
1616
`;
17+
18+
exports[`tag prop 1`] = `
19+
<div class="van-icon van-icon-undefined">
20+
<!---->
21+
</div>
22+
`;

‎packages/icon/test/index.spec.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,12 @@ test('render icon default slot', () => {
2727
});
2828
expect(wrapper).toMatchSnapshot();
2929
});
30+
31+
test('tag prop', () => {
32+
const wrapper = mount(Icon, {
33+
propsData: {
34+
tag: 'div'
35+
}
36+
});
37+
expect(wrapper).toMatchSnapshot();
38+
});

‎packages/icon/zh-CN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,10 @@ import 'vant/lib/icon/local.css';
6565
| color | 图标颜色 | `String` | `inherit` | 1.1.3 |
6666
| size | 图标大小，如 `20px` `2em` | `String` | `inherit` | 1.1.15 |
6767
| class-prefix | 类名前缀 | `String` | `van-icon` | 1.2.1 |
68+
| tag | HTML 标签 | `String` | `i` | 1.6.10 |
6869

6970
### Event
7071

7172
| 事件名 | 说明 | 参数 |
7273
|------|------|------|
7374
| click | 点击图标时触发 | - |
74-

0 commit comments

Comments
 (0)