mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
引入vue-jsx， 按钮完善
This commit is contained in:
niunai
parent
e415d039f0
commit
9a4ac14066
@ -1,4 +1,4 @@
|
||||
lib/
|
||||
dist/
|
||||
node_modules/
|
||||
build/
|
||||
build/**/*.js
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
var config = {
|
||||
|
||||
"bem": {
|
||||
"shortcuts": {"component": "c", "modifier": "m", "descendent": "d"},
|
||||
"separators": {"descendent": "-", "modifier": "--"}
|
||||
"shortcuts": {"component": "b", "modifier": "m", "descendent": "e"},
|
||||
"separators": {"descendent": "__", "modifier": "--"}
|
||||
}/*,
|
||||
"autoprefixer": {"browsers": ["ie > 8", "last 2 versions"]},
|
||||
"rem": {"browsers": ["ie > 8", "last 2 versions"]}*/
|
||||
|
||||
@ -109,7 +109,7 @@ if (process.env.NODE_ENV === 'production') {
|
||||
postcss: getPoastcssPlugin,
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime']
|
||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||
},
|
||||
eslint: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
<style lang="css">
|
||||
@component-namespace page {
|
||||
@component button {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@descendent group {
|
||||
@component-namespace z {
|
||||
@component button-group {
|
||||
.z-button-1-1 {
|
||||
margin-bottom: 15px;
|
||||
|
||||
& > * {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,34 +10,67 @@
|
||||
|
||||
## Button组件
|
||||
|
||||
### 基础用法
|
||||
### 按钮功能
|
||||
|
||||
:::demo 样例代码
|
||||
:::demo 只接受primary, default, danger三种类型，默认default
|
||||
```html
|
||||
<div class="page-button">
|
||||
<h1 class="page-title">Button</h1>
|
||||
<div class="page-button-group">
|
||||
<z-button size="large">default</z-button>
|
||||
<z-button size="large" type="primary">primary</z-button>
|
||||
<z-button size="large" type="danger">danger</z-button>
|
||||
</div>
|
||||
|
||||
<div class="page-button-group">
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1-1">
|
||||
<z-button>default</z-button>
|
||||
</div>
|
||||
<div class="z-button-1-1">
|
||||
<z-button type="primary">primary</z-button>
|
||||
</div>
|
||||
<div class="z-button-1-1">
|
||||
<z-button type="danger">danger</z-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
<div class="page-button-group">
|
||||
<z-button size="small">default</z-button>
|
||||
<z-button size="small" type="primary">primary</z-button>
|
||||
<z-button size="small" type="danger">danger</z-button>
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1-1">
|
||||
<z-button disabled>diabled</z-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
<div class="page-button-group">
|
||||
<z-button disabled size="large">default</z-button>
|
||||
<z-button disabled size="large" type="primary">primary</z-button>
|
||||
<z-button disabled size="large" type="danger" class="aaa">danger</z-button>
|
||||
### 按钮尺寸
|
||||
|
||||
:::demo 只接受large, normal, small, mini四种尺寸，默认normal
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1-1">
|
||||
<z-button size="large">large</z-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-button-group" :style="{ width: '50%' }">
|
||||
<div class="z-button-3-1">
|
||||
<z-button type="primary">normal</z-button>
|
||||
</div>
|
||||
<div class="z-button-3-1">
|
||||
<z-button size="small">small</z-button>
|
||||
</div>
|
||||
<div class="z-button-3-1">
|
||||
<z-button size="mini">mini</z-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
:::demo 有时按钮需要是一个a标签
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1-1">
|
||||
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -54,4 +81,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
| type | 按钮类型 | string | 'default' | 'primary', 'danger' |
|
||||
| size | 按钮尺寸 | string | 'normal' | 'large', 'small', 'mini' |
|
||||
| tag | 按钮标签 | string | 'button' | 'a', 'span', ... |
|
||||
| diabled | 按钮是否禁用 | Boolean | | |
|
||||
| block | 按钮是否显示为块级元素 | Boolean | | |
|
||||
|
||||
|
||||
@ -40,9 +40,10 @@
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.17.0",
|
||||
"babel-eslint": "^6.1.2",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-module-resolver": "^2.2.0",
|
||||
"babel-plugin-syntax-jsx": "^6.8.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
@ -118,4 +119,4 @@
|
||||
"webpack-node-externals": "^1.5.4",
|
||||
"webpack-vendor-chunk-plugin": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,26 +1,4 @@
|
||||
<template>
|
||||
<button
|
||||
:type="nativeType"
|
||||
:class="[
|
||||
'z-button',
|
||||
'z-button--' + type,
|
||||
'z-button--' + size,
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading
|
||||
}
|
||||
]"
|
||||
:disabled="disabled"
|
||||
@click="handleClick"
|
||||
>
|
||||
<i v-if="loading" class="z-icon-loading"></i>
|
||||
<span class="z-button-text"><slot></slot></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* z-header
|
||||
* @module components/button
|
||||
* @desc 按钮
|
||||
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
|
||||
@ -42,21 +20,52 @@ export default {
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
block: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
nativeType: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator(value) {
|
||||
return allowedSize.indexOf(value) > -1;
|
||||
return allowedType.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
validator(value) {
|
||||
return allowedType.indexOf(value) > -1;
|
||||
return allowedSize.indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
let { type, nativeType, size, disabled, loading, block } = this;
|
||||
let Tag = this.tag;
|
||||
|
||||
return (
|
||||
<Tag
|
||||
type={nativeType}
|
||||
disabled={disabled}
|
||||
class={[
|
||||
'z-button',
|
||||
'z-button--' + type,
|
||||
'z-button--' + size,
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading,
|
||||
'is-block': block
|
||||
}
|
||||
]}
|
||||
>
|
||||
{
|
||||
loading ? <i class="z-icon-loading"></i> : null
|
||||
}
|
||||
<span class="z-button-text">{this.$slots.default}</span>
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,10 +1,12 @@
|
||||
@import "./common/var.pcss";
|
||||
|
||||
@component-namespace z {
|
||||
@component button {
|
||||
@b button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
@ -25,43 +27,58 @@
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
@modifier default {
|
||||
@m default {
|
||||
color: $button-default-color;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
}
|
||||
|
||||
@modifier primary {
|
||||
@m primary {
|
||||
color: $button-primary-color;
|
||||
background-color: $button-primary-background-color;
|
||||
border: 1px solid $button-primary-border-color;
|
||||
}
|
||||
|
||||
@modifier danger {
|
||||
@m danger {
|
||||
color: $button-danger-color;
|
||||
background-color: $button-danger-background-color;
|
||||
border: 1px solid $button-danger-border-color;
|
||||
}
|
||||
|
||||
@modifier large {
|
||||
display: block;
|
||||
@m large {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@modifier normal {
|
||||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
@modifier small {
|
||||
display: inline-block;
|
||||
@m normal {
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
@m small {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@m mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
opacity: .6;
|
||||
color: $button-disabled-color;
|
||||
background-color: $button-disabled-background-color;
|
||||
border: 1px solid $button-disabled-border-color;
|
||||
}
|
||||
|
||||
@when block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
packages/zanui-css/src/button_group.pcss
Normal file
29
packages/zanui-css/src/button_group.pcss
Normal file
@ -0,0 +1,29 @@
|
||||
@define-mixin button-wrap {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.z-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@component-namespace z {
|
||||
@b button-group {
|
||||
font-size: 0;
|
||||
}
|
||||
@b button-1-1 {
|
||||
@mixin button-wrap;
|
||||
width: 100%;
|
||||
}
|
||||
@b button-2-1 {
|
||||
@mixin button-wrap;
|
||||
width: 50%;
|
||||
}
|
||||
@b button-3-1 {
|
||||
@mixin button-wrap;
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
@ -27,6 +27,10 @@ $button-danger-color: $c-white;
|
||||
$button-danger-background-color: #f44;
|
||||
$button-danger-border-color: #e33;
|
||||
|
||||
$button-disabled-color: $c-gray-dark;
|
||||
$button-disabled-background-color: $c-gray-light;
|
||||
$button-disabled-border-color: #cacaca;
|
||||
|
||||
:root{
|
||||
|
||||
/* z-index
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
css组件库入口，组装成css组件库
|
||||
*/
|
||||
@import './button.pcss';
|
||||
@import './button_group.pcss';
|
||||
@import './cell.pcss';
|
||||
@import './dialog.pcss';
|
||||
@import './field.pcss';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user