Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen
This commit is contained in:
jiangruowei
@@ -1,3 +1,4 @@
|
||||
lib/
|
||||
dist/
|
||||
node_modules/
|
||||
build/**/*.js
|
||||
|
||||
@@ -9,7 +9,7 @@ var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\'
|
||||
var ISNTALL_COMPONENT_TEMPLATE = ' Vue.component({{name}}.name, {{name}});';
|
||||
var MAIN_TEMPLATE = `{{include}}
|
||||
// zanui
|
||||
import '../packages/zanui/src/index.pcss';
|
||||
import '../packages/zanui-css/src/index.pcss';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
@@ -51,7 +51,7 @@ ComponentNames.forEach(name => {
|
||||
'Lazyload',
|
||||
|
||||
// services
|
||||
'MessageBox',
|
||||
'Dialog',
|
||||
'Toast',
|
||||
'Indicator'
|
||||
].indexOf(componentName) === -1) {
|
||||
|
||||
@@ -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')
|
||||
|
||||
+5
-1
@@ -5,5 +5,9 @@
|
||||
"radio": "./packages/radio/index.js",
|
||||
"cell": "./packages/cell/index.js",
|
||||
"icon": "./packages/icon/index.js",
|
||||
"cell-group": "./packages/cell-group/index.js"
|
||||
"cell-group": "./packages/cell-group/index.js",
|
||||
"popup": "./packages/popup/index.js",
|
||||
"dialog": "./packages/dialog/index.js",
|
||||
"picker": "./packages/picker/index.js",
|
||||
"radio-group": "./packages/radio-group/index.js"
|
||||
}
|
||||
|
||||
Vendored
+41
-41
@@ -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"
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+354
-354
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+64
-32
@@ -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">
|
||||
<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>
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1-1">
|
||||
<z-button>default</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>
|
||||
<div class="z-button-1-1">
|
||||
<z-button type="primary">primary</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>
|
||||
<div class="z-button-1-1">
|
||||
<z-button type="danger">danger</z-button>
|
||||
</div>
|
||||
</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>
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1-1">
|
||||
<z-button disabled>diabled</z-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
:::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 | | |
|
||||
|
||||
|
||||
+22
-22
@@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
Dialog.alert({
|
||||
title: 'alert标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
|
||||
handleConfirmClick() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Dialog组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-button @click="handleAlertClick">alert</z-button>
|
||||
|
||||
<z-button @click="handleConfirmClick">confirm</z-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | String | '' | |
|
||||
| message | 内容 | String | '' | |
|
||||
+11
-11
@@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker组件
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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`为一个数组，设置所有列中被选中的值 |
|
||||
@@ -0,0 +1,84 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.z-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.z-popup-2 {
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-4 {
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Popup组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
|
||||
xxxx
|
||||
</z-popup>
|
||||
|
||||
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
|
||||
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</z-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>
|
||||
|
||||
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
|
||||
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
|
||||
一些内容
|
||||
</z-popup>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | Boolean | '' | |
|
||||
@@ -14,7 +14,7 @@ export default {
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<o2-radio v-model="radio"></o2-radio>
|
||||
<z-radio v-model="radio"></z-radio>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -77,8 +77,12 @@
|
||||
"title": "Lazyload"
|
||||
},
|
||||
{
|
||||
"path": "/pop",
|
||||
"title": "Pop"
|
||||
"path": "/popup",
|
||||
"title": "Popup"
|
||||
},
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog"
|
||||
},
|
||||
{
|
||||
"path": "/swipe",
|
||||
|
||||
+3
-3
@@ -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",
|
||||
@@ -97,7 +98,6 @@
|
||||
"rimraf": "^2.5.4",
|
||||
"run-sequence": "^1.2.2",
|
||||
"saladcss-bem": "^0.0.1",
|
||||
"sass-loader": "^3.2.3",
|
||||
"style-loader": "^0.13.1",
|
||||
"theaterjs": "^3.0.0",
|
||||
"transliteration": "^1.1.11",
|
||||
@@ -118,4 +118,4 @@
|
||||
"webpack-node-externals": "^1.5.4",
|
||||
"webpack-vendor-chunk-plugin": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/o2-button",
|
||||
"name": "@youzan/z-button",
|
||||
"version": "0.0.1",
|
||||
"description": "button component",
|
||||
"main": "./lib/index.js",
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* @module components/button
|
||||
* @desc 按钮
|
||||
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
|
||||
* @param {boolean} [disabled=false] - 禁用
|
||||
* @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
|
||||
* @param {string} [native-type] - 原生 type 属性
|
||||
* @param {slot} - 显示文本
|
||||
*
|
||||
* @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',
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
block: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
nativeType: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator(value) {
|
||||
return allowedType.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
validator(value) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
:type="nativeType"
|
||||
:class="[
|
||||
'o2-button',
|
||||
'o2-button--' + type,
|
||||
'o2-button--' + size,
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading
|
||||
}
|
||||
]"
|
||||
:disabled="disabled"
|
||||
@click="handleClick"
|
||||
>
|
||||
<i v-if="loading" class="o2-icon-loading"></i>
|
||||
<span class="o2-button-text"><slot></slot></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* o2-header
|
||||
* @module components/button
|
||||
* @desc 按钮
|
||||
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
|
||||
* @param {boolean} [disabled=false] - 禁用
|
||||
* @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
|
||||
* @param {string} [native-type] - 原生 type 属性
|
||||
* @param {slot} - 显示文本
|
||||
*
|
||||
* @example
|
||||
* <o2-button size="large" type="primary">按钮</o2-button>
|
||||
*/
|
||||
export default {
|
||||
name: 'o2-button',
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.$emit('click', e);
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
nativeType: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator(value) {
|
||||
return [
|
||||
'default',
|
||||
'danger',
|
||||
'primary'
|
||||
].indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
validator(value) {
|
||||
return [
|
||||
'mini',
|
||||
'small',
|
||||
'normal',
|
||||
'large'
|
||||
].indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -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,
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Dialog from './src/dialog.js';
|
||||
|
||||
export default Dialog;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import Vue from 'vue';
|
||||
import Dialog from './dialog.vue';
|
||||
import merge from 'src/utils/merge';
|
||||
|
||||
const DialogConstructor = Vue.extend(Dialog);
|
||||
|
||||
let currentDialog;
|
||||
let instance;
|
||||
let dialogQueue = [];
|
||||
|
||||
const defaultCallback = action => {
|
||||
if (currentDialog) {
|
||||
let callback = currentDialog.callback;
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback(action);
|
||||
}
|
||||
|
||||
if (currentDialog.resolve && action === 'confirm') {
|
||||
currentDialog.resolve(action);
|
||||
} else if (currentDialog.reject && action === 'cancel') {
|
||||
currentDialog.reject(action);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initInstance = () => {
|
||||
instance = new DialogConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
|
||||
instance.callback = defaultCallback;
|
||||
};
|
||||
|
||||
const showNextDialog = () => {
|
||||
if (!instance) {
|
||||
initInstance();
|
||||
}
|
||||
|
||||
if (!instance.value && dialogQueue.length > 0) {
|
||||
currentDialog = dialogQueue.shift();
|
||||
|
||||
let options = currentDialog.options;
|
||||
|
||||
for (let prop in options) {
|
||||
if (options.hasOwnProperty(prop)) {
|
||||
instance[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
|
||||
if (options.callback === undefined) {
|
||||
instance.callback = defaultCallback;
|
||||
}
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
|
||||
Vue.nextTick(() => {
|
||||
instance.value = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var DialogBox = options => {
|
||||
return new Promise((resolve, reject) => { // eslint-disable-line
|
||||
dialogQueue.push({
|
||||
options: merge({}, options),
|
||||
callback: options.callback,
|
||||
resolve: resolve,
|
||||
reject: reject
|
||||
});
|
||||
|
||||
showNextDialog();
|
||||
});
|
||||
};
|
||||
|
||||
DialogBox.alert = function(options) {
|
||||
return DialogBox(merge({
|
||||
type: 'alert',
|
||||
closeOnClickOverlay: false,
|
||||
showCancelButton: false
|
||||
}, options));
|
||||
};
|
||||
|
||||
DialogBox.confirm = function(options) {
|
||||
return DialogBox(merge({
|
||||
type: 'confirm',
|
||||
closeOnClickOverlay: true,
|
||||
showCancelButton: true
|
||||
}, options));
|
||||
};
|
||||
|
||||
DialogBox.close = function() {
|
||||
instance.value = false;
|
||||
dialogQueue = [];
|
||||
currentDialog = null;
|
||||
};
|
||||
|
||||
export default DialogBox;
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<transition name="dialog-bounce">
|
||||
<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="z-dialog-content" v-if="message">
|
||||
<div class="z-dialog-message" v-html="message"></div>
|
||||
</div>
|
||||
<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>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'packages/popup';
|
||||
|
||||
const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确认';
|
||||
|
||||
export default {
|
||||
name: 'z-dialog',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
},
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
message: '',
|
||||
type: '',
|
||||
showConfirmButton: true,
|
||||
showCancelButton: false,
|
||||
confirmButtonText: CONFIRM_TEXT,
|
||||
cancelButtonText: CANCEL_TEXT,
|
||||
callback: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleAction(action) {
|
||||
this.value = false;
|
||||
this.callback && this.callback(action);
|
||||
},
|
||||
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.value = false;
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
document.body.style.paddingRight = this.bodyPaddingRight;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
this.bodyPaddingRight = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -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
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Picker from './src/picker';
|
||||
|
||||
export default Picker;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
let isDragging = false;
|
||||
|
||||
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
|
||||
|
||||
export default function(element, options) {
|
||||
const moveFn = function(event) {
|
||||
if (options.drag) {
|
||||
options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
};
|
||||
|
||||
const endFn = function(event) {
|
||||
if (!supportTouch) {
|
||||
document.removeEventListener('mousemove', moveFn);
|
||||
document.removeEventListener('mouseup', endFn);
|
||||
}
|
||||
document.onselectstart = null;
|
||||
document.ondragstart = null;
|
||||
|
||||
isDragging = false;
|
||||
|
||||
if (options.end) {
|
||||
options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
};
|
||||
|
||||
element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
|
||||
if (isDragging) return;
|
||||
document.onselectstart = function() { return false; };
|
||||
document.ondragstart = function() { return false; };
|
||||
|
||||
if (!supportTouch) {
|
||||
document.addEventListener('mousemove', moveFn);
|
||||
document.addEventListener('mouseup', endFn);
|
||||
}
|
||||
isDragging = true;
|
||||
|
||||
if (options.start) {
|
||||
event.preventDefault();
|
||||
options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
});
|
||||
|
||||
if (supportTouch) {
|
||||
element.addEventListener('touchmove', moveFn);
|
||||
element.addEventListener('touchend', endFn);
|
||||
element.addEventListener('touchcancel', endFn);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="z-picker-column" :class="classNames">
|
||||
<div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
||||
<div
|
||||
v-for="item in currentValues"
|
||||
class="z-picker-column__item"
|
||||
:class="{ 'z-picker-column__item--selected': item === currentValue }"
|
||||
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
|
||||
{{item}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import translateUtil from 'src/utils/transition';
|
||||
import draggable from './draggable';
|
||||
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'z-picker-column',
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 每一列可见备选元素的个数
|
||||
*/
|
||||
visibileColumnCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
/**
|
||||
* 该列所有的可选值
|
||||
*/
|
||||
values: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 每列添加额外的`className`
|
||||
*/
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 行高
|
||||
*/
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: DEFAULT_ITEM_HEIGHT
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value,
|
||||
currentValues: this.values,
|
||||
isDragging: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
values(val) {
|
||||
this.currentValues = val;
|
||||
},
|
||||
|
||||
currentValues(val) {
|
||||
if (this.valueIndex === -1) {
|
||||
this.currentValue = (val || [])[0];
|
||||
}
|
||||
},
|
||||
|
||||
currentValue(val) {
|
||||
this.doOnValueChange();
|
||||
|
||||
this.$emit('change', this);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* picker可见备选元素总高度
|
||||
*/
|
||||
visibleContentHeight() {
|
||||
return this.itemHeight * this.visibileColumnCount;
|
||||
},
|
||||
|
||||
/**
|
||||
* 当前选中值在`values`中的索引
|
||||
*/
|
||||
valueIndex() {
|
||||
return this.currentValues.indexOf(this.currentValue);
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算picker的拖动范围
|
||||
*/
|
||||
dragRange() {
|
||||
var values = this.currentValues;
|
||||
var visibileColumnCount = this.visibileColumnCount;
|
||||
var itemHeight = this.itemHeight;
|
||||
|
||||
return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算`classNames`
|
||||
*/
|
||||
classNames() {
|
||||
return this.className.split(' ');
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initEvents();
|
||||
this.doOnValueChange();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 将当前`value`值转换成需要垂直方向需要`translate`的值
|
||||
*/
|
||||
value2Translate(value) {
|
||||
let values = this.currentValues;
|
||||
let valueIndex = values.indexOf(value);
|
||||
let offset = Math.floor(this.visibileColumnCount / 2);
|
||||
let itemHeight = this.itemHeight;
|
||||
|
||||
if (valueIndex !== -1) {
|
||||
return (valueIndex - offset) * (-itemHeight);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据当前`translate`的值转换成当前选中的`value`
|
||||
*/
|
||||
translate2Value(translate) {
|
||||
let itemHeight = this.itemHeight;
|
||||
translate = Math.round(translate / itemHeight) * itemHeight;
|
||||
|
||||
let index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
|
||||
|
||||
return this.currentValues[index];
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化拖动事件
|
||||
*/
|
||||
initEvents() {
|
||||
var el = this.$refs.wrapper;
|
||||
var dragState = {};
|
||||
|
||||
var velocityTranslate, prevTranslate, pickerItems;
|
||||
|
||||
draggable(el, {
|
||||
start: (event) => {
|
||||
// 存储当前状态
|
||||
dragState = {
|
||||
range: this.dragRange,
|
||||
start: new Date(),
|
||||
startLeft: event.pageX,
|
||||
startTop: event.pageY,
|
||||
startTranslateTop: translateUtil.getElementTranslate(el).top
|
||||
};
|
||||
pickerItems = el.querySelectorAll('.z-picker-item');
|
||||
},
|
||||
|
||||
drag: (event) => {
|
||||
this.isDragging = true;
|
||||
|
||||
dragState.left = event.pageX;
|
||||
dragState.top = event.pageY;
|
||||
|
||||
let deltaY = dragState.top - dragState.startTop;
|
||||
let translate = dragState.startTranslateTop + deltaY;
|
||||
|
||||
translateUtil.translateElement(el, null, translate);
|
||||
|
||||
velocityTranslate = translate - prevTranslate || translate;
|
||||
|
||||
prevTranslate = translate;
|
||||
},
|
||||
|
||||
end: () => {
|
||||
if (this.isDragging) {
|
||||
this.isDragging = false;
|
||||
|
||||
var momentumRatio = 7;
|
||||
var currentTranslate = translateUtil.getElementTranslate(el).top;
|
||||
var duration = new Date() - dragState.start;
|
||||
|
||||
var momentumTranslate;
|
||||
if (duration < 300) {
|
||||
momentumTranslate = currentTranslate + velocityTranslate * momentumRatio;
|
||||
}
|
||||
|
||||
var dragRange = dragState.range;
|
||||
|
||||
this.$nextTick(() => {
|
||||
var translate;
|
||||
var itemHeight = this.itemHeight;
|
||||
|
||||
if (momentumTranslate) {
|
||||
translate = Math.round(momentumTranslate / itemHeight) * itemHeight;
|
||||
} else {
|
||||
translate = Math.round(currentTranslate / itemHeight) * itemHeight;
|
||||
}
|
||||
|
||||
translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);
|
||||
|
||||
translateUtil.translateElement(el, null, translate);
|
||||
|
||||
this.currentValue = this.translate2Value(translate);
|
||||
});
|
||||
}
|
||||
|
||||
dragState = {};
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* `value`改变时调用
|
||||
*/
|
||||
doOnValueChange() {
|
||||
let value = this.currentValue;
|
||||
let wrapper = this.$refs.wrapper;
|
||||
|
||||
this.$emit('input', this.currentValue);
|
||||
|
||||
translateUtil.translateElement(wrapper, null, this.value2Translate(value));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="z-picker">
|
||||
<div class="z-picker__toolbar">
|
||||
<slot>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="z-picker__columns" :class="['z-picker__columns--' + columns.length]">
|
||||
<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 class="z-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||
</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.values[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);
|
||||
console.log(column)
|
||||
return column && column.values[column.valueIndex];
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置对应列中选中的值
|
||||
*/
|
||||
setColumnValue(index, value) {
|
||||
let column = this.getColumn(index);
|
||||
if (column) {
|
||||
column.currentValue = value;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应列中所有的备选值
|
||||
*/
|
||||
getColumnValues(index) {
|
||||
let column = this.getColumn(index);
|
||||
return column && column.currentValues;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置对应列中所有的备选值
|
||||
*/
|
||||
setColumnValues(index, values) {
|
||||
let column = this.getColumn(index);
|
||||
if (column) {
|
||||
column.currentValues = values;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取所有列中被选中的值，返回一个数组
|
||||
*/
|
||||
getValues() {
|
||||
return this.values;
|
||||
},
|
||||
|
||||
/**
|
||||
* `values`为一个数组，设置所有列中被选中的值
|
||||
*/
|
||||
setValues(values) {
|
||||
values.forEach((value, index) => {
|
||||
this.setColumnValue(index, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Popup from './src/popup';
|
||||
|
||||
export default Popup;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'z-popup',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
lockOnScroll: {
|
||||
default: false
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'popup-slide'
|
||||
},
|
||||
|
||||
position: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: false,
|
||||
currentTransition: this.transition
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentValue(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
if (this.transition !== 'popup-fade') {
|
||||
this.currentTransition = `popup-slide-${this.position}`;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
this.currentValue = true;
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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)
|
||||
@@ -0,0 +1,3 @@
|
||||
import RadioGroup from '../cell/src/radio-group';
|
||||
|
||||
export default RadioGroup;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="o2-radio-group">
|
||||
<div class="z-radio-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,20 +1,23 @@
|
||||
<template>
|
||||
<o2-cell
|
||||
class="o2-radio"
|
||||
<z-cell
|
||||
class="z-radio"
|
||||
:class="{
|
||||
'is-disabled': disabled
|
||||
}">
|
||||
</o2-cell>
|
||||
<span class="z-radio__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</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,10 +1,12 @@
|
||||
@import "./common/var.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component button {
|
||||
@component-namespace z {
|
||||
@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,40 +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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
@@ -17,12 +17,19 @@ $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;
|
||||
|
||||
$button-disabled-color: $c-gray-dark;
|
||||
$button-disabled-background-color: $c-gray-light;
|
||||
$button-disabled-border-color: #cacaca;
|
||||
|
||||
:root{
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace z {
|
||||
@component dialog-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@component dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background-color: #fff;
|
||||
width: 85%;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: .2s;
|
||||
|
||||
@descendent header {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
@descendent content {
|
||||
padding: 15px 20px;
|
||||
min-height: 36px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@descendent title {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent message {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@descendent footer {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.is-twobtn {
|
||||
.z-dialog-btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.z-dialog-cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@descendent btn {
|
||||
line-height: 40px;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@descendent cancel {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent confirm {
|
||||
color: #00C000;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-bounce-enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.7);
|
||||
}
|
||||
.dialog-bounce-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
||||
}
|
||||
@@ -1,47 +1,47 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
@descendent control {
|
||||
.z-field-control {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
@@ -2,7 +2,11 @@
|
||||
css组件库入口，组装成css组件库
|
||||
*/
|
||||
@import './button.pcss';
|
||||
@import './button_group.pcss';
|
||||
@import './cell.pcss';
|
||||
@import './dialog.pcss';
|
||||
@import './field.pcss';
|
||||
@import './icon.pcss';
|
||||
@import './popup.pcss';
|
||||
@import './picker.pcss';
|
||||
@import './switch.pcss';
|
||||
@@ -0,0 +1,110 @@
|
||||
@component-namespace z {
|
||||
@b picker {
|
||||
overflow: hidden;
|
||||
|
||||
@e toolbar {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@e columns {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@m 1 {
|
||||
.z-picker-column {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 2 {
|
||||
.z-picker-column {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 3 {
|
||||
.z-picker-column {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.z-picker-center-highlight {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.z-picker-center-highlight:before,
|
||||
.z-picker-center-highlight:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eaeaea;
|
||||
display: block;
|
||||
z-index: 15;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.z-picker-center-highlight:before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.z-picker-center-highlight:after {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
@b picker-column {
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
@e item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #707274;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition-duration: .3s;
|
||||
backface-visibility: hidden;
|
||||
|
||||
@m selected {
|
||||
color: #000;
|
||||
transform: translate3d(0, 0, 0) rotateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker-column-wrapper {
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease-out;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.picker-column-wrapper.dragging,
|
||||
.picker-column-wrapper.dragging .picker-item {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.v-modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
}
|
||||
|
||||
@component-namespace z {
|
||||
@component popup {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
|
||||
@modifier top {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
@modifier bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-slide-top-enter,
|
||||
.popup-slide-top-leave-active {
|
||||
transform: translate3d(-50%, -100%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-right-enter,
|
||||
.popup-slide-right-leave-active {
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-bottom-enter,
|
||||
.popup-slide-bottom-leave-active {
|
||||
transform: translate3d(-50%, 100%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-left-enter, .popup-slide-left-leave-active {
|
||||
transform: translate3d(-100%, -50%, 0);
|
||||
}
|
||||
|
||||
.popup-fade-enter, .popup-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@component-namespace o2 {
|
||||
@component-namespace z {
|
||||
@component switch {
|
||||
height: 29px;
|
||||
width: 49px;
|
||||
+10
-2
@@ -5,8 +5,11 @@ import Radio from '../packages/radio/index.js';
|
||||
import Cell from '../packages/cell/index.js';
|
||||
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';
|
||||
import '../packages/zanui-css/src/index.pcss';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
@@ -18,6 +21,8 @@ const install = function(Vue) {
|
||||
Vue.component(Cell.name, Cell);
|
||||
Vue.component(Icon.name, Icon);
|
||||
Vue.component(CellGroup.name, CellGroup);
|
||||
Vue.component(Popup.name, Popup);
|
||||
Vue.component(Picker.name, Picker);
|
||||
};
|
||||
|
||||
// auto install
|
||||
@@ -34,5 +39,8 @@ module.exports = {
|
||||
Radio,
|
||||
Cell,
|
||||
Icon,
|
||||
CellGroup
|
||||
CellGroup,
|
||||
Popup,
|
||||
Dialog,
|
||||
Picker
|
||||
};
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
import Vue from 'vue';
|
||||
import merge from 'src/utils/merge';
|
||||
import PopupManager from './popup-manager';
|
||||
|
||||
let idSeed = 1;
|
||||
|
||||
const getDOM = function(dom) {
|
||||
if (dom.nodeType === 3) {
|
||||
dom = dom.nextElementSibling || dom.nextSibling;
|
||||
getDOM(dom);
|
||||
}
|
||||
return dom;
|
||||
};
|
||||
|
||||
let scrollBarWidth;
|
||||
const getScrollBarWidth = () => {
|
||||
if (scrollBarWidth !== undefined) return scrollBarWidth;
|
||||
|
||||
const outer = document.createElement('div');
|
||||
outer.style.visibility = 'hidden';
|
||||
outer.style.width = '100px';
|
||||
outer.style.position = 'absolute';
|
||||
outer.style.top = '-9999px';
|
||||
document.body.appendChild(outer);
|
||||
|
||||
const widthNoScroll = outer.offsetWidth;
|
||||
outer.style.overflow = 'scroll';
|
||||
|
||||
const inner = document.createElement('div');
|
||||
inner.style.width = '100%';
|
||||
outer.appendChild(inner);
|
||||
|
||||
const widthWithScroll = inner.offsetWidth;
|
||||
outer.parentNode.removeChild(outer);
|
||||
|
||||
return widthNoScroll - widthWithScroll;
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
/**
|
||||
* popup当前显示状态
|
||||
*/
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 是否显示遮罩层
|
||||
*/
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 点击遮罩层是否关闭popup
|
||||
*/
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: [String, Number],
|
||||
/**
|
||||
* popup滚动时是否body内容也滚动
|
||||
* 默认为不滚动
|
||||
*/
|
||||
lockOnScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
if (this.opening) return;
|
||||
this.open();
|
||||
} else {
|
||||
if (this.closing) return;
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this._popupId = 'popup-' + idSeed++;
|
||||
PopupManager.register(this._popupId, this);
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
opening: false,
|
||||
opened: false,
|
||||
closing: false,
|
||||
bodyOverflow: null,
|
||||
bodyPaddingRight: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 显示popup
|
||||
*/
|
||||
open(options) {
|
||||
if (this.opened) return;
|
||||
|
||||
this.opening = true;
|
||||
|
||||
this.$emit('input', true);
|
||||
|
||||
const dom = getDOM(this.$el);
|
||||
const props = merge({}, this, options);
|
||||
const overlay = props.overlay;
|
||||
const zIndex = props.zIndex;
|
||||
|
||||
// 如果属性中传入了`zIndex`，则覆盖`PopupManager`中对应的`zIndex`
|
||||
if (zIndex) {
|
||||
PopupManager.zIndex = zIndex;
|
||||
}
|
||||
|
||||
// 如果显示遮罩层
|
||||
if (overlay) {
|
||||
if (this.closing) {
|
||||
PopupManager.closeModal(this._popupId);
|
||||
this.closing = false;
|
||||
}
|
||||
PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom);
|
||||
|
||||
// 如果滚动时需要锁定
|
||||
if (props.lockOnScroll) {
|
||||
// 将原来的`bodyOverflow`和`bodyPaddingRight`存起来
|
||||
if (!this.bodyOverflow) {
|
||||
this.bodyPaddingRight = document.body.style.paddingRight;
|
||||
this.bodyOverflow = document.body.style.overflow;
|
||||
}
|
||||
|
||||
scrollBarWidth = getScrollBarWidth();
|
||||
|
||||
// 页面是否`overflow`
|
||||
let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
|
||||
if (scrollBarWidth > 0 && bodyHasOverflow) {
|
||||
document.body.style.paddingRight = scrollBarWidth + 'px';
|
||||
}
|
||||
document.body.style.overlay = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
dom.style.zIndex = PopupManager.nextZIndex();
|
||||
this.opened = true;
|
||||
this.opening = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭popup
|
||||
*/
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.$emit('input', false);
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
document.body.style.paddingRight = this.bodyPaddingRight;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
this.bodyPaddingRight = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
},
|
||||
|
||||
doAfterClose() {
|
||||
this.closing = false;
|
||||
PopupManager.closeModal(this._popupId);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
PopupManager.deregister(this._popupId);
|
||||
PopupManager.closeModal(this._popupId);
|
||||
|
||||
if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
document.body.style.paddingRight = this.bodyPaddingRight;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
this.bodyPaddingRight = null;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,136 @@
|
||||
import { addClass, removeClass } from 'src/utils/dom';
|
||||
|
||||
let hasModal = false;
|
||||
|
||||
const getModal = function() {
|
||||
let modalDom = PopupManager.modalDom;
|
||||
if (modalDom) {
|
||||
hasModal = true;
|
||||
} else {
|
||||
hasModal = false;
|
||||
modalDom = document.createElement('div');
|
||||
PopupManager.modalDom = modalDom;
|
||||
|
||||
modalDom.addEventListener('touchmove', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
modalDom.addEventListener('click', function() {
|
||||
PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
|
||||
});
|
||||
}
|
||||
|
||||
return modalDom;
|
||||
};
|
||||
|
||||
const instances = {};
|
||||
|
||||
const PopupManager = {
|
||||
zIndex: 2000,
|
||||
|
||||
modalStack: [],
|
||||
|
||||
nextZIndex() {
|
||||
return this.zIndex++;
|
||||
},
|
||||
|
||||
getInstance(id) {
|
||||
return instances[id];
|
||||
},
|
||||
|
||||
register(id, instance) {
|
||||
if (id && instance) {
|
||||
instances[id] = instance;
|
||||
}
|
||||
},
|
||||
|
||||
deregister(id) {
|
||||
if (id) {
|
||||
instances[id] = null;
|
||||
delete instances[id];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup`
|
||||
*/
|
||||
handleOverlayClick() {
|
||||
const topModal = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||||
if (!topModal) return;
|
||||
|
||||
const instance = PopupManager.getInstance(topModal.id);
|
||||
if (instance && instance.closeOnClickOverlay) {
|
||||
instance.close();
|
||||
}
|
||||
},
|
||||
|
||||
openModal(id, zIndex, dom) {
|
||||
if (!id || zIndex === undefined) return;
|
||||
|
||||
const modalStack = this.modalStack;
|
||||
|
||||
for (let i = 0, j = modalStack.length; i < j; i++) {
|
||||
const item = modalStack[i];
|
||||
if (item.id === id) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const modalDom = getModal();
|
||||
|
||||
addClass(modalDom, 'v-modal');
|
||||
setTimeout(() => {
|
||||
removeClass(modalDom, 'v-modal-enter');
|
||||
}, 200);
|
||||
|
||||
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
||||
dom.parentNode.appendChild(modalDom);
|
||||
} else {
|
||||
document.body.appendChild(modalDom);
|
||||
}
|
||||
|
||||
if (zIndex) {
|
||||
modalDom.style.zIndex = zIndex;
|
||||
}
|
||||
modalDom.style.display = '';
|
||||
|
||||
this.modalStack.push({ id: id, zIndex: zIndex });
|
||||
},
|
||||
|
||||
closeModal(id) {
|
||||
const modalStack = this.modalStack;
|
||||
const modalDom = getModal();
|
||||
|
||||
if (modalStack.length > 0) {
|
||||
const topItem = modalStack[modalStack.length - 1];
|
||||
if (topItem.id === id) {
|
||||
modalStack.pop();
|
||||
if (modalStack.length > 0) {
|
||||
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
||||
}
|
||||
} else {
|
||||
for (let i = modalStack.length - 1; i >= 0; i--) {
|
||||
if (modalStack[i].id === id) {
|
||||
modalStack.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (modalStack.length === 0) {
|
||||
setTimeout(() => {
|
||||
if (modalStack.length === 0) {
|
||||
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
||||
|
||||
modalDom.style.display = 'none';
|
||||
this.modalDom = undefined;
|
||||
}
|
||||
removeClass(modalDom, 'v-modal-leave');
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default PopupManager;
|
||||
@@ -0,0 +1,57 @@
|
||||
const trim = function(string) {
|
||||
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||||
};
|
||||
|
||||
export function hasClass(el, cls) {
|
||||
if (!el || !cls) return false;
|
||||
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
|
||||
if (el.classList) {
|
||||
return el.classList.contains(cls);
|
||||
} else {
|
||||
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||||
}
|
||||
};
|
||||
|
||||
export function addClass(el, cls) {
|
||||
if (!el) return;
|
||||
var curClass = el.className;
|
||||
var classes = (cls || '').split(' ');
|
||||
|
||||
for (var i = 0, j = classes.length; i < j; i++) {
|
||||
var clsName = classes[i];
|
||||
if (!clsName) continue;
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.add(clsName);
|
||||
} else {
|
||||
if (!hasClass(el, clsName)) {
|
||||
curClass += ' ' + clsName;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = curClass;
|
||||
}
|
||||
};
|
||||
|
||||
export function removeClass(el, cls) {
|
||||
if (!el || !cls) return;
|
||||
var classes = cls.split(' ');
|
||||
var curClass = ' ' + el.className + ' ';
|
||||
|
||||
for (var i = 0, j = classes.length; i < j; i++) {
|
||||
var clsName = classes[i];
|
||||
if (!clsName) continue;
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.remove(clsName);
|
||||
} else {
|
||||
if (hasClass(el, clsName)) {
|
||||
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = trim(curClass);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
export default function(target, ...sources) {
|
||||
for (let i = 0; i < sources.length; i++) {
|
||||
let source = sources[i] || {};
|
||||
for (let prop in source) {
|
||||
if (source.hasOwnProperty(prop)) {
|
||||
let value = source[prop];
|
||||
if (value !== undefined) {
|
||||
target[prop] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
@@ -0,0 +1,100 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
var exportObj = {};
|
||||
|
||||
if (!Vue.prototype.$isServer) {
|
||||
var docStyle = document.documentElement.style;
|
||||
var engine;
|
||||
var translate3d = false;
|
||||
|
||||
if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
|
||||
engine = 'presto';
|
||||
} else if ('MozAppearance' in docStyle) {
|
||||
engine = 'gecko';
|
||||
} else if ('WebkitAppearance' in docStyle) {
|
||||
engine = 'webkit';
|
||||
} else if (typeof navigator.cpuClass === 'string') {
|
||||
engine = 'trident';
|
||||
}
|
||||
|
||||
var cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine];
|
||||
|
||||
var vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine];
|
||||
|
||||
var helperElem = document.createElement('div');
|
||||
var perspectiveProperty = vendorPrefix + 'Perspective';
|
||||
var transformProperty = vendorPrefix + 'Transform';
|
||||
var transformStyleName = cssPrefix + 'transform';
|
||||
var transitionProperty = vendorPrefix + 'Transition';
|
||||
var transitionStyleName = cssPrefix + 'transition';
|
||||
var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
|
||||
|
||||
if (helperElem.style[perspectiveProperty] !== undefined) {
|
||||
translate3d = true;
|
||||
}
|
||||
|
||||
var getTranslate = function(element) {
|
||||
var result = {left: 0, top: 0};
|
||||
if (element === null || element.style === null) return result;
|
||||
|
||||
var transform = element.style[transformProperty];
|
||||
var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
|
||||
if (matches) {
|
||||
result.left = +matches[1];
|
||||
result.top = +matches[3];
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
var translateElement = function(element, x, y) {
|
||||
if (x === null && y === null) return;
|
||||
|
||||
if (element === null || element === undefined || element.style === null) return;
|
||||
|
||||
if (!element.style[transformProperty] && x === 0 && y === 0) return;
|
||||
|
||||
if (x === null || y === null) {
|
||||
var translate = getTranslate(element);
|
||||
if (x === null) {
|
||||
x = translate.left;
|
||||
}
|
||||
if (y === null) {
|
||||
y = translate.top;
|
||||
}
|
||||
}
|
||||
|
||||
cancelTranslateElement(element);
|
||||
|
||||
if (translate3d) {
|
||||
element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
|
||||
} else {
|
||||
element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ')';
|
||||
}
|
||||
};
|
||||
|
||||
var cancelTranslateElement = function(element) {
|
||||
if (element === null || element.style === null) return;
|
||||
|
||||
var transformValue = element.style[transformProperty];
|
||||
|
||||
if (transformValue) {
|
||||
transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
|
||||
element.style[transformProperty] = transformValue;
|
||||
}
|
||||
};
|
||||
|
||||
exportObj = {
|
||||
transformProperty: transformProperty,
|
||||
transformStyleName: transformStyleName,
|
||||
transitionProperty: transitionProperty,
|
||||
transitionStyleName: transitionStyleName,
|
||||
transitionEndProperty: transitionEndProperty,
|
||||
getElementTranslate: getTranslate,
|
||||
translateElement: translateElement,
|
||||
cancelTranslateElement: cancelTranslateElement
|
||||
};
|
||||
};
|
||||
|
||||
export default exportObj;
|
||||
|
||||
Reference in New Issue
Block a user