mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Button: add icon prop
This commit is contained in:
陈嘉涵
parent
8e9ffadc28
commit
b02773a455
@ -77,6 +77,18 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('icon')">
|
||||
<van-button
|
||||
type="primary"
|
||||
icon="star-o"
|
||||
/>
|
||||
<van-button
|
||||
type="danger"
|
||||
icon="star-o"
|
||||
:text="$t('button')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('size')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@ -112,6 +124,7 @@ export default {
|
||||
'zh-CN': {
|
||||
type: '按钮类型',
|
||||
size: '按钮尺寸',
|
||||
icon: '图标按钮',
|
||||
loading: '加载状态',
|
||||
shape: '按钮形状',
|
||||
default: '默认按钮',
|
||||
@ -133,6 +146,7 @@ export default {
|
||||
'en-US': {
|
||||
type: 'Type',
|
||||
size: 'Size',
|
||||
icon: 'Icon',
|
||||
loading: 'Loading',
|
||||
shape: 'Shape',
|
||||
default: 'Default',
|
||||
@ -158,8 +172,6 @@ export default {
|
||||
<style lang="less">
|
||||
.demo-button {
|
||||
.van-button {
|
||||
user-select: none;
|
||||
|
||||
&--large {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -60,6 +60,13 @@ Vue.use(Button);
|
||||
<van-button round type="danger">Round</van-button>
|
||||
```
|
||||
|
||||
### Icon
|
||||
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="danger">Button</van-button>
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
```html
|
||||
@ -78,6 +85,7 @@ Vue.use(Button);
|
||||
| type | Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
|
||||
| size | Can be set to `large` `small` `mini` | `String` | `normal` |
|
||||
| text | Text | `String` | - |
|
||||
| icon | Left Icon | `String` | - |
|
||||
| tag | HTML Tag | `String` | `button` |
|
||||
| native-type | Native Type Attribute | `String` | `''` |
|
||||
| plain | Whether to be plain button | `Boolean` | `false` |
|
||||
|
||||
@ -108,10 +108,9 @@
|
||||
line-height: @button-small-line-height;
|
||||
}
|
||||
|
||||
&--loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
}
|
||||
&__loading {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
@ -143,10 +142,18 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&__loading-text {
|
||||
&__icon {
|
||||
min-width: 1em;
|
||||
font-size: 1.2em;
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__icon + &__text,
|
||||
&__loading + &__text {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&--hairline {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { use } from '../utils';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import { routeProps, RouteProps, functionalRoute } from '../utils/router';
|
||||
import Icon from '../icon';
|
||||
import Loading, { LoadingType } from '../loading';
|
||||
|
||||
// Types
|
||||
@ -16,6 +17,7 @@ export type ButtonProps = RouteProps & {
|
||||
type: ButtonType;
|
||||
size: ButtonSize;
|
||||
text?: string;
|
||||
icon?: string;
|
||||
block?: boolean;
|
||||
plain?: boolean;
|
||||
round?: boolean;
|
||||
@ -41,7 +43,7 @@ function Button(
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<ButtonProps>
|
||||
) {
|
||||
const { tag, type, disabled, loading, hairline, loadingText } = props;
|
||||
const { tag, icon, type, disabled, loading, hairline, loadingText } = props;
|
||||
|
||||
function onClick(event: Event) {
|
||||
if (!loading && !disabled) {
|
||||
@ -59,7 +61,6 @@ function Button(
|
||||
type,
|
||||
props.size,
|
||||
{
|
||||
loading,
|
||||
disabled,
|
||||
hairline,
|
||||
block: props.block,
|
||||
@ -71,6 +72,36 @@ function Button(
|
||||
{ 'van-hairline--surround': hairline }
|
||||
];
|
||||
|
||||
function Content() {
|
||||
const content = [];
|
||||
|
||||
if (loading) {
|
||||
content.push(
|
||||
<Loading
|
||||
class={bem('loading')}
|
||||
size={props.loadingSize}
|
||||
type={props.loadingType}
|
||||
color={type === 'default' ? undefined : ''}
|
||||
/>
|
||||
);
|
||||
} else if (icon) {
|
||||
content.push(<Icon name={icon} class={bem('icon')} />);
|
||||
}
|
||||
|
||||
let text;
|
||||
if (loading) {
|
||||
text = loadingText;
|
||||
} else {
|
||||
text = slots.default ? slots.default() : props.text;
|
||||
}
|
||||
|
||||
if (text) {
|
||||
content.push(<span class={bem('text')}>{text}</span>);
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
return (
|
||||
<tag
|
||||
class={classes}
|
||||
@ -80,18 +111,7 @@ function Button(
|
||||
onTouchstart={onTouchstart}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
{loading ? (
|
||||
[
|
||||
<Loading
|
||||
size={props.loadingSize}
|
||||
type={props.loadingType}
|
||||
color={type === 'default' ? undefined : ''}
|
||||
/>,
|
||||
loadingText && <span class={bem('loading-text')}>{loadingText}</span>
|
||||
]
|
||||
) : (
|
||||
<span class={bem('text')}>{slots.default ? slots.default() : props.text}</span>
|
||||
)}
|
||||
{Content()}
|
||||
</tag>
|
||||
);
|
||||
}
|
||||
@ -99,6 +119,7 @@ function Button(
|
||||
Button.props = {
|
||||
...routeProps,
|
||||
text: String,
|
||||
icon: String,
|
||||
block: Boolean,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
|
||||
@ -8,12 +8,15 @@ exports[`renders demo correctly 1`] = `
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button> <button class="van-button van-button--danger van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button> <button class="van-button van-button--danger van-button--normal">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__text">加载中...</span>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i></button> <button class="van-button van-button--danger van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
|
||||
大号按钮
|
||||
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`loading size 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<button class="van-button van-button--default van-button--normal">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
@ -68,6 +68,13 @@ Vue.use(Button);
|
||||
<van-button round type="danger">圆形按钮</van-button>
|
||||
```
|
||||
|
||||
### 图标按钮
|
||||
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="danger">按钮</van-button>
|
||||
```
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
@ -87,9 +94,10 @@ Vue.use(Button);
|
||||
|------|------|------|------|------|
|
||||
| type | 类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` | 1.6.6 |
|
||||
| size | 尺寸，可选值为 `large` `small` `mini` | `String` | `normal` | - |
|
||||
| text | 文字 | `String` | - | - |
|
||||
| text | 按钮文字 | `String` | - | - |
|
||||
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 2.0.0 |
|
||||
| tag | HTML 标签 | `String` | `button` | - |
|
||||
| native-type | 原生 type 属性 | `String` | - | - |
|
||||
| native-type | 原生 button 标签 type 属性 | `String` | - | - |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` | - |
|
||||
| plain | 是否为朴素按钮 | `Boolean` | `false` | 1.1.13 |
|
||||
| square | 是否为方形按钮 | `Boolean` | `false` | 1.2.0 |
|
||||
|
||||
@ -21,8 +21,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--loading van-button--square van-submit-bar__button">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`decimal-length prop 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 1.1</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button>
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 1.1</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -11,7 +11,7 @@ exports[`decimal-length prop 1`] = `
|
||||
exports[`disable submit 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"><span class="van-button__text"></span></button>
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -19,18 +19,18 @@ exports[`disable submit 1`] = `
|
||||
exports[`suffix-label prop 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥ 1.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button>
|
||||
<div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥ 1.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`top slot 1`] = `
|
||||
<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button></div>
|
||||
<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`without price 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button></div>
|
||||
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user