mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
use zanui name
This commit is contained in:
cookfront
parent
3bed02995d
commit
c786235977
@ -7,5 +7,6 @@
|
||||
"icon": "./packages/icon/index.js",
|
||||
"cell-group": "./packages/cell-group/index.js",
|
||||
"popup": "./packages/popup/index.js",
|
||||
"dialog": "./packages/dialog/index.js"
|
||||
"dialog": "./packages/dialog/index.js",
|
||||
"picker": "./packages/picker/index.js"
|
||||
}
|
||||
|
||||
82
docs/build/0.js
vendored
82
docs/build/0.js
vendored
@ -394,60 +394,60 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "page-title"
|
||||
}, [_vm._v("Button")]), _vm._v(" "), _c('div', {
|
||||
staticClass: "page-button-group"
|
||||
}, [_c('o2-button', {
|
||||
}, [_c('z-button', {
|
||||
attrs: {
|
||||
"size": "large"
|
||||
}
|
||||
}, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
|
||||
attrs: {
|
||||
"size": "large",
|
||||
"type": "primary"
|
||||
}
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||
attrs: {
|
||||
"size": "large",
|
||||
"type": "danger"
|
||||
}
|
||||
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
||||
staticClass: "page-button-group"
|
||||
}, [_c('o2-button', [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_c('z-button', [_vm._v("default")]), _vm._v(" "), _c('z-button', {
|
||||
attrs: {
|
||||
"type": "primary"
|
||||
}
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||
attrs: {
|
||||
"type": "danger"
|
||||
}
|
||||
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
||||
staticClass: "page-button-group"
|
||||
}, [_c('o2-button', {
|
||||
}, [_c('z-button', {
|
||||
attrs: {
|
||||
"size": "small"
|
||||
}
|
||||
}, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
|
||||
attrs: {
|
||||
"size": "small",
|
||||
"type": "primary"
|
||||
}
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||
attrs: {
|
||||
"size": "small",
|
||||
"type": "danger"
|
||||
}
|
||||
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
||||
staticClass: "page-button-group"
|
||||
}, [_c('o2-button', {
|
||||
}, [_c('z-button', {
|
||||
attrs: {
|
||||
"disabled": "",
|
||||
"size": "large"
|
||||
}
|
||||
}, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
|
||||
attrs: {
|
||||
"disabled": "",
|
||||
"size": "large",
|
||||
"type": "primary"
|
||||
}
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
||||
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||
staticClass: "aaa",
|
||||
attrs: {
|
||||
"disabled": "",
|
||||
@ -491,7 +491,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -499,11 +499,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -515,11 +515,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -531,7 +531,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
@ -547,15 +547,15 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("default"), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("default"), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("type")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -563,11 +563,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("type")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -575,7 +575,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
@ -591,7 +591,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -599,11 +599,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -615,11 +615,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -631,7 +631,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
@ -647,7 +647,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
@ -657,11 +657,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
@ -675,11 +675,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
@ -697,7 +697,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-button")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
@ -763,13 +763,13 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "page-switch"
|
||||
}, [_c('span', {
|
||||
staticClass: "page-switch-text"
|
||||
}, [_vm._v("Switch state: " + _vm._s(_vm.switchStateText))]), _vm._v(" "), _c('o2-switch', {
|
||||
}, [_vm._v("Switch state: " + _vm._s(_vm.switchStateText))]), _vm._v(" "), _c('z-switch', {
|
||||
staticClass: "page-switch-sample",
|
||||
attrs: {
|
||||
"checked": _vm.switchState,
|
||||
"onchange": _vm.updateState
|
||||
}
|
||||
}), _vm._v(" "), _c('o2-switch', {
|
||||
}), _vm._v(" "), _c('z-switch', {
|
||||
staticClass: "page-switch-sample",
|
||||
attrs: {
|
||||
"checked": false,
|
||||
@ -804,7 +804,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-switch")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-switch")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("class")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -820,11 +820,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-switch")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
}, [_vm._v("z-switch")]), _vm._v(">")]), _vm._v("\n "), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("<"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-switch")]), _vm._v(" "), _c('span', {
|
||||
}, [_vm._v("z-switch")]), _vm._v(" "), _c('span', {
|
||||
staticClass: "hljs-attr"
|
||||
}, [_vm._v("class")]), _vm._v("="), _c('span', {
|
||||
staticClass: "hljs-string"
|
||||
@ -840,7 +840,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
}, [_vm._v("o2-switch")]), _vm._v(">")]), _vm._v("\n"), _c('span', {
|
||||
}, [_vm._v("z-switch")]), _vm._v(">")]), _vm._v("\n"), _c('span', {
|
||||
staticClass: "hljs-tag"
|
||||
}, [_vm._v("</"), _c('span', {
|
||||
staticClass: "hljs-name"
|
||||
|
||||
2
docs/build/0.js.map
vendored
2
docs/build/0.js.map
vendored
File diff suppressed because one or more lines are too long
708
docs/build/build-docs.js
vendored
708
docs/build/build-docs.js
vendored
File diff suppressed because one or more lines are too long
2
docs/build/build-docs.js.map
vendored
2
docs/build/build-docs.js.map
vendored
File diff suppressed because one or more lines are too long
@ -23,27 +23,27 @@
|
||||
<div class="page-button">
|
||||
<h1 class="page-title">Button</h1>
|
||||
<div class="page-button-group">
|
||||
<o2-button size="large">default</o2-button>
|
||||
<o2-button size="large" type="primary">primary</o2-button>
|
||||
<o2-button size="large" type="danger">danger</o2-button>
|
||||
<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">
|
||||
<o2-button>default</o2-button>
|
||||
<o2-button type="primary">primary</o2-button>
|
||||
<o2-button type="danger">danger</o2-button>
|
||||
<z-button>default</z-button>
|
||||
<z-button type="primary">primary</z-button>
|
||||
<z-button type="danger">danger</z-button>
|
||||
</div>
|
||||
|
||||
<div class="page-button-group">
|
||||
<o2-button size="small">default</o2-button>
|
||||
<o2-button size="small" type="primary">primary</o2-button>
|
||||
<o2-button size="small" type="danger">danger</o2-button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="page-button-group">
|
||||
<o2-button disabled size="large">default</o2-button>
|
||||
<o2-button disabled size="large" type="primary">primary</o2-button>
|
||||
<o2-button disabled size="large" type="danger" class="aaa">danger</o2-button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -22,10 +22,10 @@ export default {
|
||||
|
||||
:::demo 样例代码
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-cell title="单元格1" value="单元格1内容"></o2-cell>
|
||||
<o2-cell title="单元格2" value="单元格2内容"></o2-cell>
|
||||
</o2-cell-group>
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" value="单元格1内容"></z-cell>
|
||||
<z-cell title="单元格2" value="单元格2内容"></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -33,10 +33,10 @@ export default {
|
||||
|
||||
:::demo 传入`label`属性，属性值为描述信息的值。
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></o2-cell>
|
||||
<o2-cell title="单元格2" label="描述信息"></o2-cell>
|
||||
</o2-cell-group>
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
|
||||
<z-cell title="单元格2" label="描述信息"></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -44,10 +44,10 @@ export default {
|
||||
|
||||
:::demo 传入`icon`属性
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-cell title="起码运动馆" icon="home"></o2-cell>
|
||||
<o2-cell title="线下门店" icon="location"></o2-cell>
|
||||
</o2-cell-group>
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" icon="home"></z-cell>
|
||||
<z-cell title="线下门店" icon="location"></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -55,10 +55,10 @@ export default {
|
||||
|
||||
:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></o2-cell>
|
||||
<o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
|
||||
</o2-cell-group>
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -68,15 +68,15 @@ export default {
|
||||
|
||||
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<z-cell-group>
|
||||
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="o2-cell-text">起码运动馆</span>
|
||||
<span class="z-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
</template>
|
||||
</o2-cell>
|
||||
<o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
|
||||
</o2-cell-group>
|
||||
</z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -32,9 +32,9 @@ export default {
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<o2-button @click="handleAlertClick">alert</o2-button>
|
||||
<z-button @click="handleAlertClick">alert</z-button>
|
||||
|
||||
<o2-button @click="handleConfirmClick">confirm</o2-button>
|
||||
<z-button @click="handleConfirmClick">confirm</z-button>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -22,11 +22,11 @@ export default {
|
||||
|
||||
:::demo 根据`type`属性显示不同的输入框。
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-field type="text" label="用户名：" placeholder="请输入用户名"></o2-field>
|
||||
<o2-field type="password" label="密码：" placeholder="请输入密码"></o2-field>
|
||||
<o2-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></o2-field>
|
||||
</o2-cell-group>
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
|
||||
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
|
||||
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -34,9 +34,9 @@ export default {
|
||||
|
||||
:::demo 不传入`label`属性即可。
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-field type="text" placeholder="请输入用户名"></o2-field>
|
||||
</o2-cell-group>
|
||||
<z-cell-group>
|
||||
<z-field type="text" placeholder="请输入用户名"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -44,9 +44,9 @@ export default {
|
||||
|
||||
:::demo 监听组件的`change`事件。
|
||||
```html
|
||||
<o2-cell-group>
|
||||
<o2-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></o2-field>
|
||||
</o2-cell-group>
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
|
||||
</z-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
35
docs/examples/picker.md
Normal file
35
docs/examples/picker.md
Normal file
@ -0,0 +1,35 @@
|
||||
## Picker组件
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| itemHeight | 选中元素区高度 | Number | 44 | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | Array | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
|
||||
|
||||
### columns
|
||||
|
||||
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中值的索引，默认为0 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值，返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
|
||||
@ -22,12 +22,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.o2-popup-1 {
|
||||
.z-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.o2-popup-2 {
|
||||
.z-popup-2 {
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
@ -35,13 +35,13 @@ export default {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.o2-popup-3 {
|
||||
.z-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.o2-popup-4 {
|
||||
.z-popup-4 {
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
@ -55,25 +55,25 @@ export default {
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<o2-button @click="popupShow1 = true">从下方弹出popup</o2-button>
|
||||
<o2-popup v-model="popupShow1" position="bottom" class="o2-popup-1">
|
||||
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
|
||||
xxxx
|
||||
</o2-popup>
|
||||
</z-popup>
|
||||
|
||||
<o2-button @click="popupShow2 = true">从上方方弹出popup</o2-button>
|
||||
<o2-popup v-model="popupShow2" position="top" class="o2-popup-2" :overlay="false">
|
||||
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</o2-popup>
|
||||
</z-popup>
|
||||
|
||||
<o2-button @click="popupShow3 = true">从右方弹出popup</o2-button>
|
||||
<o2-popup v-model="popupShow3" position="right" class="o2-popup-3" :overlay="false">
|
||||
<o2-button @click.native="popupShow3 = false">关闭 popup</o2-button>
|
||||
</o2-popup>
|
||||
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
|
||||
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
|
||||
</z-popup>
|
||||
|
||||
<o2-button @click="popupShow4 = true">从中间弹出popup</o2-button>
|
||||
<o2-popup v-model="popupShow4" transition="popup-fade" class="o2-popup-4">
|
||||
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
|
||||
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
|
||||
一些内容
|
||||
</o2-popup>
|
||||
</z-popup>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<o2-radio v-model="radio"></o2-radio>
|
||||
<z-radio v-model="radio"></z-radio>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -45,8 +45,8 @@ export default {
|
||||
```html
|
||||
<div class="page-switch">
|
||||
<span class="page-switch-text">Switch state: {{switchStateText}}</span>
|
||||
<o2-switch class="page-switch-sample" :checked="switchState" :on-change="updateState"></o2-switch>
|
||||
<o2-switch class="page-switch-sample" :checked="false" :disabled="true"></o2-switch>
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/o2-button",
|
||||
"name": "@youzan/z-button",
|
||||
"version": "0.0.1",
|
||||
"description": "button component",
|
||||
"main": "./lib/index.js",
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<button
|
||||
:type="nativeType"
|
||||
:class="[
|
||||
'o2-button',
|
||||
'o2-button--' + type,
|
||||
'o2-button--' + size,
|
||||
'z-button',
|
||||
'z-button--' + type,
|
||||
'z-button--' + size,
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading
|
||||
@ -13,14 +13,14 @@
|
||||
:disabled="disabled"
|
||||
@click="handleClick"
|
||||
>
|
||||
<i v-if="loading" class="o2-icon-loading"></i>
|
||||
<span class="o2-button-text"><slot></slot></span>
|
||||
<i v-if="loading" class="z-icon-loading"></i>
|
||||
<span class="z-button-text"><slot></slot></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* o2-header
|
||||
* z-header
|
||||
* @module components/button
|
||||
* @desc 按钮
|
||||
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
|
||||
@ -30,10 +30,10 @@
|
||||
* @param {slot} - 显示文本
|
||||
*
|
||||
* @example
|
||||
* <o2-button size="large" type="primary">按钮</o2-button>
|
||||
* <z-button size="large" type="primary">按钮</z-button>
|
||||
*/
|
||||
export default {
|
||||
name: 'o2-button',
|
||||
name: 'z-button',
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="o2-cell-group">
|
||||
<div class="z-cell-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'o2-cell-group'
|
||||
name: 'z-cell-group'
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<a class="o2-cell" :href="url" @click="handleClick">
|
||||
<div class="o2-cell-title">
|
||||
<a class="z-cell" :href="url" @click="handleClick">
|
||||
<div class="z-cell-title">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="o2-cell-text" v-text="title"></span>
|
||||
<span class="o2-cell-label" v-if="label" v-text="label"></span>
|
||||
<span class="z-cell-text" v-text="title"></span>
|
||||
<span class="z-cell-label" v-if="label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="o2-cell-value" :class="{ 'is-link' : isLink }">
|
||||
<div class="z-cell-value" :class="{ 'is-link' : isLink }">
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'o2-cell',
|
||||
name: 'z-cell',
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<transition name="dialog-bounce">
|
||||
<div class="o2-dialog-wrapper">
|
||||
<div class="o2-dialog" v-show="value">
|
||||
<div class="o2-dialog-header" v-if="title">
|
||||
<div class="o2-dialog-title" v-text="title"></div>
|
||||
<div class="z-dialog-wrapper">
|
||||
<div class="z-dialog" v-show="value">
|
||||
<div class="z-dialog-header" v-if="title">
|
||||
<div class="z-dialog-title" v-text="title"></div>
|
||||
</div>
|
||||
<div class="o2-dialog-content" v-if="message">
|
||||
<div class="o2-dialog-message" v-html="message"></div>
|
||||
<div class="z-dialog-content" v-if="message">
|
||||
<div class="z-dialog-message" v-html="message"></div>
|
||||
</div>
|
||||
<div class="o2-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="o2-dialog-btn o2-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="o2-dialog-btn o2-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
<div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确认';
|
||||
|
||||
export default {
|
||||
name: 'o2-dialog',
|
||||
name: 'z-dialog',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{
|
||||
"name": "o2-field"
|
||||
"name": "z-field"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<o2-cell
|
||||
class="o2-field"
|
||||
<z-cell
|
||||
class="z-field"
|
||||
:title="label"
|
||||
:class="{
|
||||
'is-textarea': type === 'textarea',
|
||||
@ -8,7 +8,7 @@
|
||||
}">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
class="o2-field-control"
|
||||
class="z-field-control"
|
||||
v-model="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
:placeholder="placeholder"
|
||||
@ -18,7 +18,7 @@
|
||||
</textarea>
|
||||
<input
|
||||
v-else
|
||||
class="o2-field-control"
|
||||
class="z-field-control"
|
||||
:value="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
@input="handleInput"
|
||||
@ -27,17 +27,17 @@
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
</o2-cell>
|
||||
</z-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import O2Cell from 'packages/cell';
|
||||
import zCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'o2-field',
|
||||
name: 'z-field',
|
||||
|
||||
components: {
|
||||
O2Cell
|
||||
zCell
|
||||
},
|
||||
|
||||
props: {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "o2-icon",
|
||||
"name": "z-icon",
|
||||
"version": "0.0.1",
|
||||
"description": "o2-icon",
|
||||
"description": "z-icon",
|
||||
"main": "index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"devDependencies": {},
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'o2-icon',
|
||||
name: 'z-icon',
|
||||
|
||||
props: {
|
||||
name: String
|
||||
|
||||
8
packages/picker/CHANGELOG.md
Normal file
8
packages/picker/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/picker/README.md
Normal file
26
packages/picker/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
3
packages/picker/index.js
Normal file
3
packages/picker/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Picker from './src/picker';
|
||||
|
||||
export default Picker;
|
||||
10
packages/picker/package.json
Normal file
10
packages/picker/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
65
packages/picker/src/picker-column.vue
Normal file
65
packages/picker/src/picker-column.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="z-picker-column">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'z-picker-column',
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 每一列可见备选元素的个数
|
||||
*/
|
||||
visibileColumnCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
className: {},
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: DEFAULT_ITEM_HEIGHT
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value,
|
||||
dragging: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
values(val) {
|
||||
|
||||
},
|
||||
|
||||
currentValue(val) {
|
||||
this.$emit('change');
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* picker可见备选元素总高度
|
||||
*/
|
||||
visibleContentHeight() {
|
||||
return this.itemHeight * this.visibileColumnCount;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
147
packages/picker/src/picker.vue
Normal file
147
packages/picker/src/picker.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="z-picker">
|
||||
<div class="z-picker-toolbar">
|
||||
<slot>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="z-picker-columns">
|
||||
<picker-column
|
||||
v-for="(item, index) in columns"
|
||||
v-model="values[index]"
|
||||
:values="item.values"
|
||||
:class-name="item.className"
|
||||
:itemHeight="itemHeight"
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="columnValueChange">
|
||||
</picker-column>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PickerColumn from './picker-column';
|
||||
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'z-picker',
|
||||
|
||||
components: {
|
||||
PickerColumn
|
||||
},
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 每一列可见备选元素的个数
|
||||
*/
|
||||
visibileColumnCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
/**
|
||||
* 选中元素区高度
|
||||
*/
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: DEFAULT_ITEM_HEIGHT
|
||||
},
|
||||
/**
|
||||
* 对象数组，配置每一列显示的数据
|
||||
*/
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 否在组件顶部显示一个toolbar
|
||||
*/
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
values() {
|
||||
let columns = this.columns || [];
|
||||
let values = [];
|
||||
|
||||
columns.forEach(column => {
|
||||
values.push(column.value || column[column.defaultIndex || 0]);
|
||||
});
|
||||
|
||||
return values;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 处理列`change`事件
|
||||
*/
|
||||
columnValueChange() {
|
||||
this.$emit('change', this, this.values);
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应索引的列的实例
|
||||
*/
|
||||
getColumn(index) {
|
||||
let children = this.$children.filter(child => child.$options.name === 'z-picker-column');
|
||||
return children[index];
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应列中选中的值
|
||||
*/
|
||||
getColumnValue(index) {
|
||||
let column = this.getColumn(index);
|
||||
return column && column.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置对应列中选中的值
|
||||
*/
|
||||
setColumnValue(index, value) {
|
||||
let column = this.getColumn(index);
|
||||
if (column) {
|
||||
column.currentValue = value;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应列中所有的备选值
|
||||
*/
|
||||
getColumnValues(index) {
|
||||
let column = this.getColumn(index);
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置对应列中所有的备选值
|
||||
*/
|
||||
setColumnValues(index, values) {
|
||||
let column = this.getColumn(index);
|
||||
if (column) {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取所有列中被选中的值，返回一个数组
|
||||
*/
|
||||
getValues() {
|
||||
return this.values;
|
||||
},
|
||||
|
||||
/**
|
||||
* `values`为一个数组，设置所有列中被选中的值
|
||||
*/
|
||||
setValues(values) {
|
||||
values.forEach((value, index) => {
|
||||
this.setColumnValue(index, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-show="currentValue" class="o2-popup" :class="[position ? 'o2-popup--' + position : '']">
|
||||
<div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
@ -10,7 +10,7 @@
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'o2-popup',
|
||||
name: 'z-popup',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="o2-radio-group">
|
||||
<div class="z-radio-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<o2-cell
|
||||
class="o2-radio"
|
||||
<z-cell
|
||||
class="z-radio"
|
||||
:class="{
|
||||
'is-disabled': disabled
|
||||
}">
|
||||
</o2-cell>
|
||||
</z-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import O2Cell from 'packages/cell';
|
||||
import zCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'o2-radio',
|
||||
name: 'z-radio',
|
||||
|
||||
components: {
|
||||
O2Cell
|
||||
zCell
|
||||
},
|
||||
|
||||
props: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/o2-switch",
|
||||
"name": "@youzan/z-switch",
|
||||
"version": "0.0.1",
|
||||
"description": "switch component",
|
||||
"main": "./lib/index.js",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
|
||||
<div class="o2-switch-node"></div>
|
||||
<div class="z-switch" :class="['is-' + switchState]" @click="toggleState">
|
||||
<div class="z-switch-node"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* o2-switch
|
||||
* z-switch
|
||||
* @module components/switch
|
||||
* @desc 开关
|
||||
* @param {boolean} [checked=false] - 开关状态
|
||||
@ -15,10 +15,10 @@
|
||||
* @param {callback} [onChange] - 开关状态改变回调函数。
|
||||
*
|
||||
* @example
|
||||
* <o2-switch checked="true" disabled="false"></o2-switch>
|
||||
* <z-switch checked="true" disabled="false"></z-switch>
|
||||
*/
|
||||
export default {
|
||||
name: 'o2-switch',
|
||||
name: 'z-switch',
|
||||
props: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "./common/var.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component-namespace z {
|
||||
@component button {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component-namespace z {
|
||||
@component cell-group {
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component-namespace z {
|
||||
@component dialog-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
@ -53,11 +53,11 @@
|
||||
}
|
||||
|
||||
.is-twobtn {
|
||||
.o2-dialog-btn {
|
||||
.z-dialog-btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.o2-dialog-cancel {
|
||||
.z-dialog-cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component-namespace z {
|
||||
@component field {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@when textarea {
|
||||
.o2-field-control {
|
||||
.z-field-control {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@when nolabel {
|
||||
.o2-cell-title {
|
||||
.z-cell-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.o2-cell-value {
|
||||
.z-cell-value {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.o2-cell-title,
|
||||
.o2-cell-value {
|
||||
.z-cell-title,
|
||||
.z-cell-value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.o2-cell-title {
|
||||
.z-cell-title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.o2-cell-value {
|
||||
.z-cell-value {
|
||||
width: 100%;
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
}
|
||||
|
||||
@component-namespace o2 {
|
||||
@component-namespace z {
|
||||
@component popup {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@component-namespace o2 {
|
||||
@component-namespace z {
|
||||
@component switch {
|
||||
height: 29px;
|
||||
width: 49px;
|
||||
|
||||
@ -7,6 +7,7 @@ import Icon from '../packages/icon/index.js';
|
||||
import CellGroup from '../packages/cell-group/index.js';
|
||||
import Popup from '../packages/popup/index.js';
|
||||
import Dialog from '../packages/dialog/index.js';
|
||||
import Picker from '../packages/picker/index.js';
|
||||
// zanui
|
||||
import '../packages/zanui/src/index.pcss';
|
||||
|
||||
@ -21,7 +22,7 @@ const install = function(Vue) {
|
||||
Vue.component(Icon.name, Icon);
|
||||
Vue.component(CellGroup.name, CellGroup);
|
||||
Vue.component(Popup.name, Popup);
|
||||
// Vue.component(Dialog.name, Dialog);
|
||||
Vue.component(Picker.name, Picker);
|
||||
};
|
||||
|
||||
// auto install
|
||||
@ -40,5 +41,6 @@ module.exports = {
|
||||
Icon,
|
||||
CellGroup,
|
||||
Popup,
|
||||
Dialog
|
||||
Dialog,
|
||||
Picker
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user