mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen
This commit is contained in:
jiangruowei
commit
0d3a0f1a88
@ -1,3 +1,4 @@
|
|||||||
lib/
|
lib/
|
||||||
dist/
|
dist/
|
||||||
node_modules/
|
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 ISNTALL_COMPONENT_TEMPLATE = ' Vue.component({{name}}.name, {{name}});';
|
||||||
var MAIN_TEMPLATE = `{{include}}
|
var MAIN_TEMPLATE = `{{include}}
|
||||||
// zanui
|
// zanui
|
||||||
import '../packages/zanui/src/index.pcss';
|
import '../packages/zanui-css/src/index.pcss';
|
||||||
|
|
||||||
const install = function(Vue) {
|
const install = function(Vue) {
|
||||||
if (install.installed) return;
|
if (install.installed) return;
|
||||||
@ -51,7 +51,7 @@ ComponentNames.forEach(name => {
|
|||||||
'Lazyload',
|
'Lazyload',
|
||||||
|
|
||||||
// services
|
// services
|
||||||
'MessageBox',
|
'Dialog',
|
||||||
'Toast',
|
'Toast',
|
||||||
'Indicator'
|
'Indicator'
|
||||||
].indexOf(componentName) === -1) {
|
].indexOf(componentName) === -1) {
|
||||||
|
|||||||
@ -4,8 +4,8 @@
|
|||||||
var config = {
|
var config = {
|
||||||
|
|
||||||
"bem": {
|
"bem": {
|
||||||
"shortcuts": {"component": "c", "modifier": "m", "descendent": "d"},
|
"shortcuts": {"component": "b", "modifier": "m", "descendent": "e"},
|
||||||
"separators": {"descendent": "-", "modifier": "--"}
|
"separators": {"descendent": "__", "modifier": "--"}
|
||||||
}/*,
|
}/*,
|
||||||
"autoprefixer": {"browsers": ["ie > 8", "last 2 versions"]},
|
"autoprefixer": {"browsers": ["ie > 8", "last 2 versions"]},
|
||||||
"rem": {"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,
|
postcss: getPoastcssPlugin,
|
||||||
babel: {
|
babel: {
|
||||||
presets: ['es2015'],
|
presets: ['es2015'],
|
||||||
plugins: ['transform-runtime']
|
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||||
},
|
},
|
||||||
eslint: {
|
eslint: {
|
||||||
formatter: require('eslint-friendly-formatter')
|
formatter: require('eslint-friendly-formatter')
|
||||||
|
|||||||
@ -5,5 +5,9 @@
|
|||||||
"radio": "./packages/radio/index.js",
|
"radio": "./packages/radio/index.js",
|
||||||
"cell": "./packages/cell/index.js",
|
"cell": "./packages/cell/index.js",
|
||||||
"icon": "./packages/icon/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"
|
||||||
}
|
}
|
||||||
|
|||||||
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"
|
staticClass: "page-title"
|
||||||
}, [_vm._v("Button")]), _vm._v(" "), _c('div', {
|
}, [_vm._v("Button")]), _vm._v(" "), _c('div', {
|
||||||
staticClass: "page-button-group"
|
staticClass: "page-button-group"
|
||||||
}, [_c('o2-button', {
|
}, [_c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"size": "large"
|
"size": "large"
|
||||||
}
|
}
|
||||||
}, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
|
}, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"size": "large",
|
"size": "large",
|
||||||
"type": "primary"
|
"type": "primary"
|
||||||
}
|
}
|
||||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"size": "large",
|
"size": "large",
|
||||||
"type": "danger"
|
"type": "danger"
|
||||||
}
|
}
|
||||||
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
||||||
staticClass: "page-button-group"
|
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: {
|
attrs: {
|
||||||
"type": "primary"
|
"type": "primary"
|
||||||
}
|
}
|
||||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"type": "danger"
|
"type": "danger"
|
||||||
}
|
}
|
||||||
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
||||||
staticClass: "page-button-group"
|
staticClass: "page-button-group"
|
||||||
}, [_c('o2-button', {
|
}, [_c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"size": "small"
|
"size": "small"
|
||||||
}
|
}
|
||||||
}, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
|
}, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"size": "small",
|
"size": "small",
|
||||||
"type": "primary"
|
"type": "primary"
|
||||||
}
|
}
|
||||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"size": "small",
|
"size": "small",
|
||||||
"type": "danger"
|
"type": "danger"
|
||||||
}
|
}
|
||||||
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
}, [_vm._v("danger")])], 1), _vm._v(" "), _c('div', {
|
||||||
staticClass: "page-button-group"
|
staticClass: "page-button-group"
|
||||||
}, [_c('o2-button', {
|
}, [_c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"disabled": "",
|
"disabled": "",
|
||||||
"size": "large"
|
"size": "large"
|
||||||
}
|
}
|
||||||
}, [_vm._v("default")]), _vm._v(" "), _c('o2-button', {
|
}, [_vm._v("default")]), _vm._v(" "), _c('z-button', {
|
||||||
attrs: {
|
attrs: {
|
||||||
"disabled": "",
|
"disabled": "",
|
||||||
"size": "large",
|
"size": "large",
|
||||||
"type": "primary"
|
"type": "primary"
|
||||||
}
|
}
|
||||||
}, [_vm._v("primary")]), _vm._v(" "), _c('o2-button', {
|
}, [_vm._v("primary")]), _vm._v(" "), _c('z-button', {
|
||||||
staticClass: "aaa",
|
staticClass: "aaa",
|
||||||
attrs: {
|
attrs: {
|
||||||
"disabled": "",
|
"disabled": "",
|
||||||
@ -491,7 +491,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -499,11 +499,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -515,11 +515,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -531,7 +531,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
@ -547,15 +547,15 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("type")]), _vm._v("="), _c('span', {
|
}, [_vm._v("type")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -563,11 +563,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("type")]), _vm._v("="), _c('span', {
|
}, [_vm._v("type")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -575,7 +575,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
@ -591,7 +591,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -599,11 +599,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -615,11 +615,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
}, [_vm._v("size")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -631,7 +631,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
@ -647,7 +647,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
@ -657,11 +657,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
@ -675,11 +675,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-button")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-button")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("disabled")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
@ -697,7 +697,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
@ -763,13 +763,13 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "page-switch"
|
staticClass: "page-switch"
|
||||||
}, [_c('span', {
|
}, [_c('span', {
|
||||||
staticClass: "page-switch-text"
|
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",
|
staticClass: "page-switch-sample",
|
||||||
attrs: {
|
attrs: {
|
||||||
"checked": _vm.switchState,
|
"checked": _vm.switchState,
|
||||||
"onchange": _vm.updateState
|
"onchange": _vm.updateState
|
||||||
}
|
}
|
||||||
}), _vm._v(" "), _c('o2-switch', {
|
}), _vm._v(" "), _c('z-switch', {
|
||||||
staticClass: "page-switch-sample",
|
staticClass: "page-switch-sample",
|
||||||
attrs: {
|
attrs: {
|
||||||
"checked": false,
|
"checked": false,
|
||||||
@ -804,7 +804,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-switch")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-switch")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("class")]), _vm._v("="), _c('span', {
|
}, [_vm._v("class")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -820,11 +820,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("<"), _c('span', {
|
}, [_vm._v("<"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
staticClass: "hljs-name"
|
||||||
}, [_vm._v("o2-switch")]), _vm._v(" "), _c('span', {
|
}, [_vm._v("z-switch")]), _vm._v(" "), _c('span', {
|
||||||
staticClass: "hljs-attr"
|
staticClass: "hljs-attr"
|
||||||
}, [_vm._v("class")]), _vm._v("="), _c('span', {
|
}, [_vm._v("class")]), _vm._v("="), _c('span', {
|
||||||
staticClass: "hljs-string"
|
staticClass: "hljs-string"
|
||||||
@ -840,7 +840,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
|
|||||||
staticClass: "hljs-tag"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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"
|
staticClass: "hljs-tag"
|
||||||
}, [_vm._v("</"), _c('span', {
|
}, [_vm._v("</"), _c('span', {
|
||||||
staticClass: "hljs-name"
|
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
@ -1,14 +1,8 @@
|
|||||||
<style lang="css">
|
<style lang="css">
|
||||||
@component-namespace page {
|
@component-namespace z {
|
||||||
@component button {
|
@component button-group {
|
||||||
padding: 0 15px 15px;
|
.z-button-1-1 {
|
||||||
|
|
||||||
@descendent group {
|
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
& > * {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -16,34 +10,67 @@
|
|||||||
|
|
||||||
## Button组件
|
## Button组件
|
||||||
|
|
||||||
### 基础用法
|
### 按钮功能
|
||||||
|
|
||||||
:::demo 样例代码
|
:::demo 只接受primary, default, danger三种类型，默认default
|
||||||
```html
|
```html
|
||||||
<div class="page-button">
|
<div class="z-button-group">
|
||||||
<h1 class="page-title">Button</h1>
|
<div class="z-button-1-1">
|
||||||
<div class="page-button-group">
|
<z-button>default</z-button>
|
||||||
<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>
|
</div>
|
||||||
|
<div class="z-button-1-1">
|
||||||
<div class="page-button-group">
|
<z-button type="primary">primary</z-button>
|
||||||
<o2-button>default</o2-button>
|
|
||||||
<o2-button type="primary">primary</o2-button>
|
|
||||||
<o2-button type="danger">danger</o2-button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="z-button-1-1">
|
||||||
<div class="page-button-group">
|
<z-button type="danger">danger</z-button>
|
||||||
<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>
|
</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>
|
:::demo
|
||||||
<o2-button disabled size="large" type="danger" class="aaa">danger</o2-button>
|
```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>
|
||||||
</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,10 +22,10 @@ export default {
|
|||||||
|
|
||||||
:::demo 样例代码
|
:::demo 样例代码
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-cell title="单元格1" value="单元格1内容"></o2-cell>
|
<z-cell title="单元格1" value="单元格1内容"></z-cell>
|
||||||
<o2-cell title="单元格2" value="单元格2内容"></o2-cell>
|
<z-cell title="单元格2" value="单元格2内容"></z-cell>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -33,10 +33,10 @@ export default {
|
|||||||
|
|
||||||
:::demo 传入`label`属性，属性值为描述信息的值。
|
:::demo 传入`label`属性，属性值为描述信息的值。
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></o2-cell>
|
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
|
||||||
<o2-cell title="单元格2" label="描述信息"></o2-cell>
|
<z-cell title="单元格2" label="描述信息"></z-cell>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -44,10 +44,10 @@ export default {
|
|||||||
|
|
||||||
:::demo 传入`icon`属性
|
:::demo 传入`icon`属性
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-cell title="起码运动馆" icon="home"></o2-cell>
|
<z-cell title="起码运动馆" icon="home"></z-cell>
|
||||||
<o2-cell title="线下门店" icon="location"></o2-cell>
|
<z-cell title="线下门店" icon="location"></z-cell>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -55,10 +55,10 @@ export default {
|
|||||||
|
|
||||||
:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></o2-cell>
|
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
|
||||||
<o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
|
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -68,15 +68,15 @@ export default {
|
|||||||
|
|
||||||
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||||
<template slot="title">
|
<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">
|
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||||
</template>
|
</template>
|
||||||
</o2-cell>
|
</z-cell>
|
||||||
<o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
|
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
46
docs/examples/dialog.md
Normal file
46
docs/examples/dialog.md
Normal file
@ -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 | '' | |
|
||||||
@ -22,11 +22,11 @@ export default {
|
|||||||
|
|
||||||
:::demo 根据`type`属性显示不同的输入框。
|
:::demo 根据`type`属性显示不同的输入框。
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-field type="text" label="用户名：" placeholder="请输入用户名"></o2-field>
|
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
|
||||||
<o2-field type="password" label="密码：" placeholder="请输入密码"></o2-field>
|
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
|
||||||
<o2-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></o2-field>
|
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -34,9 +34,9 @@ export default {
|
|||||||
|
|
||||||
:::demo 不传入`label`属性即可。
|
:::demo 不传入`label`属性即可。
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-field type="text" placeholder="请输入用户名"></o2-field>
|
<z-field type="text" placeholder="请输入用户名"></z-field>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -44,9 +44,9 @@ export default {
|
|||||||
|
|
||||||
:::demo 监听组件的`change`事件。
|
:::demo 监听组件的`change`事件。
|
||||||
```html
|
```html
|
||||||
<o2-cell-group>
|
<z-cell-group>
|
||||||
<o2-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></o2-field>
|
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
|
||||||
</o2-cell-group>
|
</z-cell-group>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
74
docs/examples/picker.md
Normal file
74
docs/examples/picker.md
Normal file
@ -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`为一个数组，设置所有列中被选中的值 |
|
||||||
84
docs/examples/popup.md
Normal file
84
docs/examples/popup.md
Normal file
@ -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
|
:::demo
|
||||||
```html
|
```html
|
||||||
<o2-radio v-model="radio"></o2-radio>
|
<z-radio v-model="radio"></z-radio>
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -77,8 +77,12 @@
|
|||||||
"title": "Lazyload"
|
"title": "Lazyload"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/pop",
|
"path": "/popup",
|
||||||
"title": "Pop"
|
"title": "Popup"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/dialog",
|
||||||
|
"title": "Dialog"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/swipe",
|
"path": "/swipe",
|
||||||
|
|||||||
@ -40,9 +40,10 @@
|
|||||||
"babel-cli": "^6.14.0",
|
"babel-cli": "^6.14.0",
|
||||||
"babel-core": "^6.17.0",
|
"babel-core": "^6.17.0",
|
||||||
"babel-eslint": "^6.1.2",
|
"babel-eslint": "^6.1.2",
|
||||||
|
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
||||||
"babel-loader": "^6.2.5",
|
"babel-loader": "^6.2.5",
|
||||||
"babel-plugin-module-resolver": "^2.2.0",
|
"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-runtime": "^6.15.0",
|
||||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||||
"babel-preset-es2015": "^6.16.0",
|
"babel-preset-es2015": "^6.16.0",
|
||||||
@ -97,7 +98,6 @@
|
|||||||
"rimraf": "^2.5.4",
|
"rimraf": "^2.5.4",
|
||||||
"run-sequence": "^1.2.2",
|
"run-sequence": "^1.2.2",
|
||||||
"saladcss-bem": "^0.0.1",
|
"saladcss-bem": "^0.0.1",
|
||||||
"sass-loader": "^3.2.3",
|
|
||||||
"style-loader": "^0.13.1",
|
"style-loader": "^0.13.1",
|
||||||
"theaterjs": "^3.0.0",
|
"theaterjs": "^3.0.0",
|
||||||
"transliteration": "^1.1.11",
|
"transliteration": "^1.1.11",
|
||||||
@ -118,4 +118,4 @@
|
|||||||
"webpack-node-externals": "^1.5.4",
|
"webpack-node-externals": "^1.5.4",
|
||||||
"webpack-vendor-chunk-plugin": "^1.0.0"
|
"webpack-vendor-chunk-plugin": "^1.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@youzan/o2-button",
|
"name": "@youzan/z-button",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "button component",
|
"description": "button component",
|
||||||
"main": "./lib/index.js",
|
"main": "./lib/index.js",
|
||||||
|
|||||||
71
packages/button/src/button.js
Normal file
71
packages/button/src/button.js
Normal file
@ -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>
|
<template>
|
||||||
<div class="o2-cell-group">
|
<div class="z-cell-group">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'o2-cell-group'
|
name: 'z-cell-group'
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<a class="o2-cell" :href="url" @click="handleClick">
|
<a class="z-cell" :href="url" @click="handleClick">
|
||||||
<div class="o2-cell-title">
|
<div class="z-cell-title">
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
||||||
</slot>
|
</slot>
|
||||||
<slot name="title">
|
<slot name="title">
|
||||||
<span class="o2-cell-text" v-text="title"></span>
|
<span class="z-cell-text" v-text="title"></span>
|
||||||
<span class="o2-cell-label" v-if="label" v-text="label"></span>
|
<span class="z-cell-label" v-if="label" v-text="label"></span>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="o2-cell-value" :class="{ 'is-link' : isLink }">
|
<div class="z-cell-value" :class="{ 'is-link' : isLink }">
|
||||||
<slot>
|
<slot>
|
||||||
<span v-text="value"></span>
|
<span v-text="value"></span>
|
||||||
</slot>
|
</slot>
|
||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'o2-cell',
|
name: 'z-cell',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
icon: String,
|
icon: String,
|
||||||
|
|||||||
8
packages/dialog/CHANGELOG.md
Normal file
8
packages/dialog/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/dialog/README.md
Normal file
26
packages/dialog/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/dialog/index.js
Normal file
3
packages/dialog/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import Dialog from './src/dialog.js';
|
||||||
|
|
||||||
|
export default Dialog;
|
||||||
10
packages/dialog/package.json
Normal file
10
packages/dialog/package.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "<%= name %>",
|
||||||
|
"version": "<%= version %>",
|
||||||
|
"description": "<%= description %>",
|
||||||
|
"main": "./lib/index.js",
|
||||||
|
"author": "<%= author %>",
|
||||||
|
"license": "<%= license %>",
|
||||||
|
"devDependencies": {},
|
||||||
|
"dependencies": {}
|
||||||
|
}
|
||||||
98
packages/dialog/src/dialog.js
Normal file
98
packages/dialog/src/dialog.js
Normal file
@ -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;
|
||||||
85
packages/dialog/src/dialog.vue
Normal file
85
packages/dialog/src/dialog.vue
Normal file
@ -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>
|
<template>
|
||||||
<o2-cell
|
<z-cell
|
||||||
class="o2-field"
|
class="z-field"
|
||||||
:title="label"
|
:title="label"
|
||||||
:class="{
|
:class="{
|
||||||
'is-textarea': type === 'textarea',
|
'is-textarea': type === 'textarea',
|
||||||
@ -8,7 +8,7 @@
|
|||||||
}">
|
}">
|
||||||
<textarea
|
<textarea
|
||||||
v-if="type === 'textarea'"
|
v-if="type === 'textarea'"
|
||||||
class="o2-field-control"
|
class="z-field-control"
|
||||||
v-model="currentValue"
|
v-model="currentValue"
|
||||||
@change="$emit('change', currentValue)"
|
@change="$emit('change', currentValue)"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
@ -18,7 +18,7 @@
|
|||||||
</textarea>
|
</textarea>
|
||||||
<input
|
<input
|
||||||
v-else
|
v-else
|
||||||
class="o2-field-control"
|
class="z-field-control"
|
||||||
:value="currentValue"
|
:value="currentValue"
|
||||||
@change="$emit('change', currentValue)"
|
@change="$emit('change', currentValue)"
|
||||||
@input="handleInput"
|
@input="handleInput"
|
||||||
@ -27,17 +27,17 @@
|
|||||||
:maxlength="maxlength"
|
:maxlength="maxlength"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:readonly="readonly">
|
:readonly="readonly">
|
||||||
</o2-cell>
|
</z-cell>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import O2Cell from 'packages/cell';
|
import zCell from 'packages/cell';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'o2-field',
|
name: 'z-field',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
O2Cell
|
zCell
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "o2-icon",
|
"name": "z-icon",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "o2-icon",
|
"description": "z-icon",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"author": "zhangmin <zhangmin@youzan.com>",
|
"author": "zhangmin <zhangmin@youzan.com>",
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'o2-icon',
|
name: 'z-icon',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
name: String
|
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": {}
|
||||||
|
}
|
||||||
51
packages/picker/src/draggable.js
Normal file
51
packages/picker/src/draggable.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
};
|
||||||
239
packages/picker/src/picker-column.vue
Normal file
239
packages/picker/src/picker-column.vue
Normal file
@ -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>
|
||||||
150
packages/picker/src/picker.vue
Normal file
150
packages/picker/src/picker.vue
Normal file
@ -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>
|
||||||
8
packages/popup/CHANGELOG.md
Normal file
8
packages/popup/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/popup/README.md
Normal file
26
packages/popup/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/popup/index.js
Normal file
3
packages/popup/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import Popup from './src/popup';
|
||||||
|
|
||||||
|
export default Popup;
|
||||||
10
packages/popup/package.json
Normal file
10
packages/popup/package.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "<%= name %>",
|
||||||
|
"version": "<%= version %>",
|
||||||
|
"description": "<%= description %>",
|
||||||
|
"main": "./lib/index.js",
|
||||||
|
"author": "<%= author %>",
|
||||||
|
"license": "<%= license %>",
|
||||||
|
"devDependencies": {},
|
||||||
|
"dependencies": {}
|
||||||
|
}
|
||||||
71
packages/popup/src/popup.vue
Normal file
71
packages/popup/src/popup.vue
Normal file
@ -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>
|
||||||
8
packages/radio-group/CHANGELOG.md
Normal file
8
packages/radio-group/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/radio-group/README.md
Normal file
26
packages/radio-group/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/radio-group/index.js
Normal file
3
packages/radio-group/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import RadioGroup from '../cell/src/radio-group';
|
||||||
|
|
||||||
|
export default RadioGroup;
|
||||||
10
packages/radio-group/package.json
Normal file
10
packages/radio-group/package.json
Normal file
@ -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>
|
<template>
|
||||||
<div class="o2-radio-group">
|
<div class="z-radio-group">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,20 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<o2-cell
|
<z-cell
|
||||||
class="o2-radio"
|
class="z-radio"
|
||||||
:class="{
|
:class="{
|
||||||
'is-disabled': disabled
|
'is-disabled': disabled
|
||||||
}">
|
}">
|
||||||
</o2-cell>
|
<span class="z-radio__label">
|
||||||
|
<slot></slot>
|
||||||
|
</span>
|
||||||
|
</z-cell>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import O2Cell from 'packages/cell';
|
import zCell from 'packages/cell';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'o2-radio',
|
name: 'z-radio',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
O2Cell
|
zCell
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@youzan/o2-switch",
|
"name": "@youzan/z-switch",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "switch component",
|
"description": "switch component",
|
||||||
"main": "./lib/index.js",
|
"main": "./lib/index.js",
|
||||||
|
|||||||
@ -1,10 +1,12 @@
|
|||||||
@import "./common/var.pcss";
|
@import "./common/var.pcss";
|
||||||
|
|
||||||
@component-namespace o2 {
|
@component-namespace z {
|
||||||
@component button {
|
@b button {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
padding: 0;
|
||||||
|
display: inline-block;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
|
line-height: 43px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 0;
|
border: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -25,40 +27,58 @@
|
|||||||
opacity: .3;
|
opacity: .3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@modifier default {
|
@m default {
|
||||||
color: $button-default-color;
|
color: $button-default-color;
|
||||||
background-color: $button-default-background-color;
|
background-color: $button-default-background-color;
|
||||||
|
border: 1px solid $button-default-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@modifier primary {
|
@m primary {
|
||||||
color: $button-primary-color;
|
color: $button-primary-color;
|
||||||
background-color: $button-primary-background-color;
|
background-color: $button-primary-background-color;
|
||||||
|
border: 1px solid $button-primary-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@modifier danger {
|
@m danger {
|
||||||
color: $button-danger-color;
|
color: $button-danger-color;
|
||||||
background-color: $button-danger-background-color;
|
background-color: $button-danger-background-color;
|
||||||
|
border: 1px solid $button-danger-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@modifier large {
|
@m large {
|
||||||
display: block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 48px;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@modifier normal {
|
@m normal {
|
||||||
display: inline-block;
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@modifier small {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
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 {
|
@when disabled {
|
||||||
opacity: .6;
|
color: $button-disabled-color;
|
||||||
|
background-color: $button-disabled-background-color;
|
||||||
|
border: 1px solid $button-disabled-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@when block {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
29
packages/zanui-css/src/button_group.pcss
Normal file
29
packages/zanui-css/src/button_group.pcss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
@define-mixin button-wrap {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 10px;
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.z-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@component-namespace z {
|
||||||
|
@b button-group {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
@b button-1-1 {
|
||||||
|
@mixin button-wrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@b button-2-1 {
|
||||||
|
@mixin button-wrap;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
@b button-3-1 {
|
||||||
|
@mixin button-wrap;
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
@import "./common/var.pcss";
|
@import "./common/var.pcss";
|
||||||
@import "./mixins/border_retina.pcss";
|
@import "./mixins/border_retina.pcss";
|
||||||
|
|
||||||
@component-namespace o2 {
|
@component-namespace z {
|
||||||
@component cell-group {
|
@component cell-group {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -17,12 +17,19 @@ $c-blue: #38f;
|
|||||||
$c-background: #f8f8f8;
|
$c-background: #f8f8f8;
|
||||||
|
|
||||||
/* 按钮颜色 */
|
/* 按钮颜色 */
|
||||||
$button-default-color: $c-white;
|
$button-primary-color: $c-white;
|
||||||
$button-default-background-color: $c-green-wx;
|
$button-primary-background-color: $c-green-wx;
|
||||||
$button-primary-color: $c-black;
|
$button-primary-border-color: #0a0;
|
||||||
$button-primary-background-color: $c-white;
|
$button-default-color: $c-black;
|
||||||
|
$button-default-background-color: $c-white;
|
||||||
|
$button-default-border-color: #bbb;
|
||||||
$button-danger-color: $c-white;
|
$button-danger-color: $c-white;
|
||||||
$button-danger-background-color: #f44;
|
$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{
|
:root{
|
||||||
|
|
||||||
95
packages/zanui-css/src/dialog.pcss
Normal file
95
packages/zanui-css/src/dialog.pcss
Normal file
@ -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 "./common/var.pcss";
|
||||||
@import "./mixins/border_retina.pcss";
|
@import "./mixins/border_retina.pcss";
|
||||||
|
|
||||||
@component-namespace o2 {
|
@component-namespace z {
|
||||||
@component field {
|
@component field {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@when textarea {
|
@when textarea {
|
||||||
.o2-field-control {
|
.z-field-control {
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@when nolabel {
|
@when nolabel {
|
||||||
.o2-cell-title {
|
.z-cell-title {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o2-cell-value {
|
.z-cell-value {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.o2-cell-title,
|
.z-cell-title,
|
||||||
.o2-cell-value {
|
.z-cell-value {
|
||||||
float: none;
|
float: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o2-cell-title {
|
.z-cell-title {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.o2-cell-value {
|
.z-cell-value {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 90px;
|
padding-left: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@descendent control {
|
.z-field-control {
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
@ -2,7 +2,11 @@
|
|||||||
css组件库入口，组装成css组件库
|
css组件库入口，组装成css组件库
|
||||||
*/
|
*/
|
||||||
@import './button.pcss';
|
@import './button.pcss';
|
||||||
|
@import './button_group.pcss';
|
||||||
@import './cell.pcss';
|
@import './cell.pcss';
|
||||||
|
@import './dialog.pcss';
|
||||||
@import './field.pcss';
|
@import './field.pcss';
|
||||||
@import './icon.pcss';
|
@import './icon.pcss';
|
||||||
|
@import './popup.pcss';
|
||||||
|
@import './picker.pcss';
|
||||||
@import './switch.pcss';
|
@import './switch.pcss';
|
||||||
110
packages/zanui-css/src/picker.pcss
Normal file
110
packages/zanui-css/src/picker.pcss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
75
packages/zanui-css/src/popup.pcss
Normal file
75
packages/zanui-css/src/popup.pcss
Normal file
@ -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 {
|
@component switch {
|
||||||
height: 29px;
|
height: 29px;
|
||||||
width: 49px;
|
width: 49px;
|
||||||
12
src/index.js
12
src/index.js
@ -5,8 +5,11 @@ import Radio from '../packages/radio/index.js';
|
|||||||
import Cell from '../packages/cell/index.js';
|
import Cell from '../packages/cell/index.js';
|
||||||
import Icon from '../packages/icon/index.js';
|
import Icon from '../packages/icon/index.js';
|
||||||
import CellGroup from '../packages/cell-group/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
|
// zanui
|
||||||
import '../packages/zanui/src/index.pcss';
|
import '../packages/zanui-css/src/index.pcss';
|
||||||
|
|
||||||
const install = function(Vue) {
|
const install = function(Vue) {
|
||||||
if (install.installed) return;
|
if (install.installed) return;
|
||||||
@ -18,6 +21,8 @@ const install = function(Vue) {
|
|||||||
Vue.component(Cell.name, Cell);
|
Vue.component(Cell.name, Cell);
|
||||||
Vue.component(Icon.name, Icon);
|
Vue.component(Icon.name, Icon);
|
||||||
Vue.component(CellGroup.name, CellGroup);
|
Vue.component(CellGroup.name, CellGroup);
|
||||||
|
Vue.component(Popup.name, Popup);
|
||||||
|
Vue.component(Picker.name, Picker);
|
||||||
};
|
};
|
||||||
|
|
||||||
// auto install
|
// auto install
|
||||||
@ -34,5 +39,8 @@ module.exports = {
|
|||||||
Radio,
|
Radio,
|
||||||
Cell,
|
Cell,
|
||||||
Icon,
|
Icon,
|
||||||
CellGroup
|
CellGroup,
|
||||||
|
Popup,
|
||||||
|
Dialog,
|
||||||
|
Picker
|
||||||
};
|
};
|
||||||
|
|||||||
195
src/mixins/popup/index.js
Normal file
195
src/mixins/popup/index.js
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
};
|
||||||
136
src/mixins/popup/popup-manager.js
Normal file
136
src/mixins/popup/popup-manager.js
Normal file
@ -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;
|
||||||
57
src/utils/dom.js
Normal file
57
src/utils/dom.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
};
|
||||||
15
src/utils/merge.js
Normal file
15
src/utils/merge.js
Normal file
@ -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;
|
||||||
|
};
|
||||||
100
src/utils/transition.js
Normal file
100
src/utils/transition.js
Normal file
@ -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;
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user