mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Button: add color prop (#4124)
This commit is contained in:
neverland
GitHub
parent
3f39166cbc
commit
f130580501
@ -81,6 +81,13 @@ Vue.use(Button);
|
||||
<van-button type="primary" to="index">Vue Router</van-button>
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
<van-button color="#7232dd">Custom Color</van-button>
|
||||
<van-button color="#7232dd" plain>Custom Color</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -90,6 +97,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` | - |
|
||||
| color | Color | `string` | - |
|
||||
| icon | Left Icon | `string` | - |
|
||||
| tag | HTML Tag | `string` | `button` |
|
||||
| native-type | Native Type Attribute | `string` | `''` |
|
||||
|
||||
@ -99,6 +99,15 @@ Vue.use(Button);
|
||||
<van-button type="primary" to="index">路由跳转</van-button>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性可以自定义按钮的颜色
|
||||
|
||||
```html
|
||||
<van-button color="#7232dd">自定义颜色</van-button>
|
||||
<van-button color="#7232dd" plain>自定义颜色</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -108,6 +117,7 @@ Vue.use(Button);
|
||||
| type | 类型，可选值为 `primary` `info` `warning` `danger` | `string` | `default` | 1.6.6 |
|
||||
| size | 尺寸，可选值为 `large` `small` `mini` | `string` | `normal` | - |
|
||||
| text | 按钮文字 | `string` | - | - |
|
||||
| color | 按钮颜色 | `string` | - | 2.1.3 |
|
||||
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `string` | - | 2.0.0 |
|
||||
| tag | HTML 标签 | `string` | `button` | - |
|
||||
| native-type | 原生 button 标签 type 属性 | `string` | - | - |
|
||||
|
||||
@ -138,6 +138,18 @@
|
||||
to="index"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-button
|
||||
color="#7232dd"
|
||||
:text="$t('customColor')"
|
||||
/>
|
||||
<van-button
|
||||
plain
|
||||
color="#7232dd"
|
||||
:text="$t('customColor')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -167,7 +179,8 @@ export default {
|
||||
loadingText: '加载中...',
|
||||
router: '页面导航',
|
||||
urlRoute: 'URL 跳转',
|
||||
vueRoute: '路由跳转'
|
||||
vueRoute: '路由跳转',
|
||||
customColor: '自定义颜色'
|
||||
},
|
||||
'en-US': {
|
||||
type: 'Type',
|
||||
@ -192,7 +205,8 @@ export default {
|
||||
loadingText: 'Loading...',
|
||||
router: 'Router',
|
||||
urlRoute: 'URL',
|
||||
vueRoute: 'Vue Router'
|
||||
vueRoute: 'Vue Router',
|
||||
customColor: 'Custom Color'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import { BORDER_SURROUND } from '../utils/constant';
|
||||
import { BORDER_SURROUND, WHITE } from '../utils/constant';
|
||||
import { routeProps, RouteProps, functionalRoute } from '../utils/router';
|
||||
import Icon from '../icon';
|
||||
import Loading, { LoadingType } from '../loading';
|
||||
@ -19,6 +19,7 @@ export type ButtonProps = RouteProps & {
|
||||
size: ButtonSize;
|
||||
text?: string;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
block?: boolean;
|
||||
plain?: boolean;
|
||||
round?: boolean;
|
||||
@ -44,7 +45,28 @@ function Button(
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<ButtonProps>
|
||||
) {
|
||||
const { tag, icon, type, disabled, loading, hairline, loadingText } = props;
|
||||
const {
|
||||
tag,
|
||||
icon,
|
||||
type,
|
||||
color,
|
||||
plain,
|
||||
disabled,
|
||||
loading,
|
||||
hairline,
|
||||
loadingText
|
||||
} = props;
|
||||
|
||||
const style: Record<string, string> = {};
|
||||
|
||||
if (color) {
|
||||
style.borderColor = color;
|
||||
style.color = plain ? color : WHITE;
|
||||
|
||||
if (!plain) {
|
||||
style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
|
||||
function onClick(event: Event) {
|
||||
if (!loading && !disabled) {
|
||||
@ -62,10 +84,10 @@ function Button(
|
||||
type,
|
||||
props.size,
|
||||
{
|
||||
plain,
|
||||
disabled,
|
||||
hairline,
|
||||
block: props.block,
|
||||
plain: props.plain,
|
||||
round: props.round,
|
||||
square: props.square
|
||||
}
|
||||
@ -105,6 +127,7 @@ function Button(
|
||||
|
||||
return (
|
||||
<tag
|
||||
style={style}
|
||||
class={classes}
|
||||
type={props.nativeType}
|
||||
disabled={disabled}
|
||||
@ -121,6 +144,7 @@ Button.props = {
|
||||
...routeProps,
|
||||
text: String,
|
||||
icon: String,
|
||||
color: String,
|
||||
block: Boolean,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
|
||||
@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
|
||||
</div>
|
||||
<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 class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain van-button--hairline 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">
|
||||
<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>
|
||||
@ -32,5 +32,6 @@ exports[`renders demo correctly 1`] = `
|
||||
迷你按钮
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
|
||||
<div><button class="van-button van-button--default van-button--normal" style="border-color: #7232dd; color: rgb(255, 255, 255); background-color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="border-color: #7232dd; color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user