blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen

Browse Source
This commit is contained in:
cookfront 2017-02-17 16:05:49 +08:00
commit 8f227dfcd6
7 changed files with 47 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -1,3 +1,4 @@
lib/
dist/
node_modules/
build/

35
docs/examples/switch.md
View File

@ -12,11 +12,7 @@ export default {
},
methods: {
updateState(newState) {
console.log('changing');
this.switchState = newState;
},
handleClick() {
alert('click');
}
}
};
@ -26,12 +22,15 @@ export default {
@component switch {
padding: 0 15px 15px;
@descendent sample {
margin: 0 15px;
@descendent wrapper {
margin: 30px;
width: 100px;
float: left;
text-align: center;
}
@descendent text {
margin-right: 20px;
margin: 20px 0;
}
}
}
@ -44,9 +43,14 @@ export default {
:::demo 样例代码
```html
<div class="page-switch">
<span class="page-switch-text">Switch state: {{switchStateText}}</span>
<z-switch class="page-switch-sample" :checked="switchState" :on-change="updateState"></z-switch>
<z-switch class="page-switch-sample" :checked="false" :disabled="true"></z-switch>
<div class="page-switch-wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<div class="page-switch-text">{{switchStateText}}</div>
</div>
<div class="page-switch-wrapper">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<div class="page-switch-text">OFF, DISABLED</div>
</div>
</div>
```
@ -55,17 +59,16 @@ export default {
export default {
data() {
return {
switchState: false
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? 'on' : 'off';
return this.switchState ? ' ON' : 'OFF';
}
},
methods: {
updateState(newState) {
console.log('changing');
this.switchState = newState;
}
}
@ -77,7 +80,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| checked | 开关状态 | boolean | false | true,false |
| loading | loading状态 | boolean | false | true,false |
| disabled | 禁用状态 | boolean | false | true,false |
| checked | 开关状态 | boolean | false | true, false |
| loading | loading状态 | boolean | false | true, false |
| disabled | 禁用状态 | boolean | false | true, false |
| onChange | 回调 | function | function（）{} | - |

23
packages/button/src/button.vue
View File

@ -32,15 +32,13 @@
* @example
* <z-button size="large" type="primary">按钮</z-button>
*/
const allowedSize = ['mini', 'small', 'normal', 'large'];
const allowedType = ['default', 'danger', 'primary'];
export default {
name: 'z-button',
methods: {
handleClick(e) {
this.$emit('click', e);
}
},
props: {
disabled: Boolean,
loading: Boolean,
@ -49,23 +47,14 @@ export default {
type: String,
default: 'default',
validator(value) {
return [
'default',
'danger',
'primary'
].indexOf(value) > -1;
return allowedSize.indexOf(value) > -1;
}
},
size: {
type: String,
default: 'normal',
validator(value) {
return [
'mini',
'small',
'normal',
'large'
].indexOf(value) > -1;
return allowedType.indexOf(value) > -1;
}
}
}

10
packages/switch/src/switch.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="z-switch" :class="['is-' + switchState]" @click="toggleState">
<div class="z-switch-node"></div>
<div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
<div class="o2-switch-node" :class="['is-' + switchState]"></div>
</div>
</template>
<script>
/**
* z-switch
* o2-switch
* @module components/switch
* @desc 开关
* @param {boolean} [checked=false] - 开关状态
@ -15,10 +15,10 @@
* @param {callback} [onChange] - 开关状态改变回调函数。
*
* @example
* <z-switch checked="true" disabled="false"></z-switch>
* <o2-switch checked="true" disabled="false"></o2-switch>
*/
export default {
name: 'z-switch',
name: 'o2-switch',
props: {
checked: {
type: Boolean,

3
packages/zanui/src/button.pcss
View File

@ -28,16 +28,19 @@
@modifier default {
color: $button-default-color;
background-color: $button-default-background-color;
border: 1px solid $button-default-border-color;
}
@modifier primary {
color: $button-primary-color;
background-color: $button-primary-background-color;
border: 1px solid $button-primary-border-color;
}
@modifier danger {
color: $button-danger-color;
background-color: $button-danger-background-color;
border: 1px solid $button-danger-border-color;
}
@modifier large {

11
packages/zanui/src/common/var.pcss
View File

@ -17,12 +17,15 @@ $c-blue: #38f;
$c-background: #f8f8f8;
/* 按钮颜色 */
$button-default-color: $c-white;
$button-default-background-color: $c-green-wx;
$button-primary-color: $c-black;
$button-primary-background-color: $c-white;
$button-primary-color: $c-white;
$button-primary-background-color: $c-green-wx;
$button-primary-border-color: #0a0;
$button-default-color: $c-black;
$button-default-background-color: $c-white;
$button-default-border-color: #bbb;
$button-danger-color: $c-white;
$button-danger-background-color: #f44;
$button-danger-border-color: #e33;
:root{

6
packages/zanui/src/switch.pcss
View File

@ -28,11 +28,17 @@
@when on {
background-color: #44db5e;
border-color: #44db5e;
@descendent node {
left: 0;
}
}
@when off {
background-color: #fff;
border-color: rgba(0, 0, 0, .1);
@descendent node {
right: 0;
}
}
@when loading {