[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tag>{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="success">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('plain')">
|
||||
<van-tag plain>{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
plain
|
||||
type="primary"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
plain
|
||||
type="success"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('round')">
|
||||
<van-tag round>{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
type="danger"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
type="primary"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
round
|
||||
type="success"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('mark')">
|
||||
<van-tag mark>{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
mark
|
||||
type="danger"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
mark
|
||||
type="primary"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
mark
|
||||
type="success"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-tag color="#f2826a">{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
color="#f2826a"
|
||||
plain
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag color="#7232dd">{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
color="#7232dd"
|
||||
plain
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
color="#ffe1e1"
|
||||
text-color="#ad0000"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customSize')">
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag
|
||||
type="danger"
|
||||
size="medium"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
type="danger"
|
||||
size="large"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
plain: '空心样式',
|
||||
round: '圆角样式',
|
||||
mark: '标记样式',
|
||||
customColor: '自定义颜色',
|
||||
customSize: '标签大小'
|
||||
},
|
||||
'en-US': {
|
||||
plain: 'Plain style',
|
||||
round: 'Round style',
|
||||
mark: 'Mark style',
|
||||
customColor: 'Custom Color',
|
||||
customSize: 'Custom Size'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-tag {
|
||||
background-color: #fff;
|
||||
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
# Tag
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Tag } from 'vant';
|
||||
|
||||
Vue.use(Tag);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-tag type="primary">Tag</van-tag>
|
||||
<van-tag type="success">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
<van-tag plain type="success">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Round style
|
||||
|
||||
```html
|
||||
<van-tag round>Tag</van-tag>
|
||||
<van-tag round type="danger">Tag</van-tag>
|
||||
<van-tag round type="primary">Tag</van-tag>
|
||||
<van-tag round type="success">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Mark style
|
||||
|
||||
```html
|
||||
<van-tag mark>Tag</van-tag>
|
||||
<van-tag mark type="danger">Tag</van-tag>
|
||||
<van-tag mark type="primary">Tag</van-tag>
|
||||
<van-tag mark type="success">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
<van-tag color="#f2826a">Tag</van-tag>
|
||||
<van-tag color="#f2826a" plain>Tag</van-tag>
|
||||
<van-tag color="#7232dd">Tag</van-tag>
|
||||
<van-tag color="#7232dd" plain>Tag</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Custom Size
|
||||
|
||||
```html
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag size="medium">Tag</van-tag>
|
||||
<van-tag size="large">Tag</van-tag>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| type | Type, can be set to `primary` `success` `danger` | `String` | - |
|
||||
| size | Size, can be set to `large` `medium` | `String` | - |
|
||||
| color | Custom color | `String` | - |
|
||||
| plain | Whether to be plain style | `Boolean` | `false` |
|
||||
| round | Whether to be round style | `Boolean` | `false` |
|
||||
| mark | Whether to be mark style | `Boolean` | `false` |
|
||||
| text-color | Text color | `String` | `white` |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Default slot |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | - |
|
||||
@@ -0,0 +1,40 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-tag {
|
||||
display: inline-block;
|
||||
padding: @tag-padding;
|
||||
color: @tag-text-color;
|
||||
font-size: @tag-font-size;
|
||||
line-height: normal;
|
||||
border-radius: @tag-border-radius;
|
||||
|
||||
&::after {
|
||||
border-color: currentColor;
|
||||
border-radius: @tag-border-radius * 2;
|
||||
}
|
||||
|
||||
&--mark {
|
||||
padding-right: .6em;
|
||||
border-radius: 0 .8em .8em 0;
|
||||
|
||||
&::after {
|
||||
border-radius: 0 1.6em 1.6em 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
border-radius: @tag-round-border-radius;
|
||||
|
||||
&::after {
|
||||
border-radius: @tag-round-border-radius * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&--medium {
|
||||
font-size: @tag-medium-font-size;
|
||||
}
|
||||
|
||||
&--large {
|
||||
font-size: @tag-large-font-size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { inherit } from '../utils/functional';
|
||||
import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
|
||||
export type TagType = 'primary' | 'success' | 'danger';
|
||||
|
||||
export type TagSize = 'large' | 'medium';
|
||||
|
||||
export type TagProps = {
|
||||
size?: TagSize;
|
||||
type?: TagType;
|
||||
mark?: boolean;
|
||||
color?: string;
|
||||
plain?: boolean;
|
||||
round?: boolean;
|
||||
textColor?: string;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('tag');
|
||||
|
||||
const COLOR_MAP: { [key: string]: string } = {
|
||||
danger: RED,
|
||||
primary: BLUE,
|
||||
success: GREEN
|
||||
};
|
||||
|
||||
function Tag(
|
||||
h: CreateElement,
|
||||
props: TagProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<TagProps>
|
||||
) {
|
||||
const { type, mark, plain, round, size } = props;
|
||||
|
||||
const color = props.color || (type && COLOR_MAP[type]) || GRAY_DARK;
|
||||
const key = plain ? 'color' : 'backgroundColor';
|
||||
const style = { [key]: color };
|
||||
|
||||
if (props.textColor) {
|
||||
style.color = props.textColor;
|
||||
}
|
||||
|
||||
const classes: { [key: string]: any } = { mark, plain, round };
|
||||
if (size) {
|
||||
classes[size] = size;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
style={style}
|
||||
class={[
|
||||
bem(classes),
|
||||
{
|
||||
'van-hairline--surround': plain
|
||||
}
|
||||
]}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{slots.default && slots.default()}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
Tag.props = {
|
||||
size: String,
|
||||
type: String,
|
||||
mark: Boolean,
|
||||
color: String,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
textColor: String
|
||||
};
|
||||
|
||||
export default createComponent<TagProps>(Tag);
|
||||
@@ -0,0 +1,40 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><span class="van-tag" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span> <span class="van-tag" style="background-color: rgb(25, 137, 250);">标签</span> <span class="van-tag" style="background-color: rgb(7, 193, 96);">标签</span></div>
|
||||
<div><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color: rgb(255, 68, 68);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color: rgb(25, 137, 250);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(7, 193, 96);">
|
||||
标签
|
||||
</span></div>
|
||||
<div><span class="van-tag van-tag--round" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--round" style="background-color: rgb(255, 68, 68);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--round" style="background-color: rgb(25, 137, 250);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--round" style="background-color: rgb(7, 193, 96);">
|
||||
标签
|
||||
</span></div>
|
||||
<div><span class="van-tag van-tag--mark" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--mark" style="background-color: rgb(25, 137, 250);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--mark" style="background-color: rgb(7, 193, 96);">
|
||||
标签
|
||||
</span></div>
|
||||
<div><span class="van-tag" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(242, 130, 106);">
|
||||
标签
|
||||
</span> <span class="van-tag" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(114, 50, 221);">
|
||||
标签
|
||||
</span> <span class="van-tag" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">
|
||||
标签
|
||||
</span></div>
|
||||
<div><span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span> <span class="van-tag van-tag--medium" style="background-color: rgb(255, 68, 68);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--large" style="background-color: rgb(255, 68, 68);">
|
||||
标签
|
||||
</span></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,16 @@
|
||||
import Tag from '..';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
test('click event', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(Tag, {
|
||||
context: {
|
||||
on: {
|
||||
click
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
@@ -0,0 +1,99 @@
|
||||
# Tag 标记
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Tag } from 'vant';
|
||||
|
||||
Vue.use(Tag);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 type 属性控制 Tag 颜色，默认为灰色
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
```
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置`plain`属性设置为空心样式
|
||||
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
```
|
||||
|
||||
### 圆角样式
|
||||
|
||||
通过`round`设置为圆角样式
|
||||
|
||||
```html
|
||||
<van-tag round>标签</van-tag>
|
||||
<van-tag round type="danger">标签</van-tag>
|
||||
<van-tag round type="primary">标签</van-tag>
|
||||
<van-tag round type="success">标签</van-tag>
|
||||
```
|
||||
|
||||
### 标记样式
|
||||
|
||||
通过`mark`设置为标记样式(半圆角)
|
||||
|
||||
```html
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-tag color="#f2826a">标签</van-tag>
|
||||
<van-tag color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
```
|
||||
|
||||
### 标签大小
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag size="medium">标签</van-tag>
|
||||
<van-tag size="large">标签</van-tag>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| type | 类型，可选值为`primary` `success` `danger` | `String` | - | - |
|
||||
| size | 大小, 可选值为`large` `medium` | `String` | - | 1.3.8 |
|
||||
| color | 标签颜色 | `String` | - | 1.3.8 |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` | - |
|
||||
| round | 是否为圆角样式 | `Boolean` | `false` | 1.3.8 |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` | - |
|
||||
| text-color | 文本颜色，优先级高于`color`属性 | `String` | `white` | 1.5.0 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 自定义 Tag 显示内容 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | - |
|
||||
Reference in New Issue
Block a user