blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into dev/badge_search

Browse Source 
# Conflicts:
#	components.json
#	packages/zanui-css/src/index.css
#	src/index.js
This commit is contained in:
zhuxiang 2017-03-01 14:54:32 +08:00
commit 5b34ea74ec
152 changed files with 76771 additions and 19323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.babelrc Normal file
View File

@ -0,0 +1,9 @@
{
"presets": [
"es2015"
],
"plugins": [
"transform-runtime",
"transform-vue-jsx"
]
}

2
.eslintrc.js
View File

@ -25,7 +25,7 @@ module.exports = {
'no-new': 0
},
"globals": {
"oxygen": true,
"zanui": true,
"location": true,
"Swiper": true,
"wysihtml5": true,

4
README.md
View File

@ -1,7 +1,7 @@
## 下载项目
```bash
git@gitlab.qima-inc.com:fe/oxygen.git
cd oxygen
git@gitlab.qima-inc.com:fe/zanui-vue.git
cd zanui-vue
```
## 安装组件依赖库

11
build/bin/build-entry.js
View File

@ -18,7 +18,7 @@ const install = function(Vue) {
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
};
}
module.exports = {
install,
@ -44,14 +44,13 @@ ComponentNames.forEach(name => {
}));
if ([
// directives
'InfiniteScroll',
// directives
'Lazyload',
'Waterfall',
// services
// services
'Dialog',
'Toast',
'Indicator'
'Toast'
].indexOf(componentName) === -1) {
installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
name: componentName,

7
build/release.sh
View File

@ -19,7 +19,7 @@ then
echo "Releasing zanui-css $VERSION ..."
cd packages/zanui-css
npm version $VERSION --message "[release] $VERSION"
npm publish
npm publish --registry=http://registry.npm.qima-inc.com
cd ../..
# commit
@ -30,9 +30,6 @@ then
# publish
git push origin master
git push origin refs/tags/v$VERSION
git checkout dev
git rebase master
git push origin dev
npm publish
npm publish --registry=http://registry.npm.qima-inc.com
fi

6
build/webpack.build.js
View File

@ -10,4 +10,10 @@ config.output = {
libraryTarget: 'umd'
};
config.externals = {
vue: 'Vue'
};
delete config.devtool;
module.exports = config;

10
build/webpack.build.min.js vendored
View File

@ -3,13 +3,15 @@ var webpack = require('webpack');
config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');
delete config.devtool;
config.plugins = [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
drop_console: true,
comments: false,
compress: {
drop_console: true,
warnings: false
}
})

39
build/webpack.config.js
View File

@ -28,8 +28,8 @@ module.exports = {
'zanui-examples': './docs/examples.js'
},
output: {
path: './docs/build',
publicPath: 'docs/build',
path: './docs/build/',
publicPath: 'docs/build/',
filename: '[name].js'
},
resolve: {
@ -53,7 +53,7 @@ module.exports = {
},
{
test: /\.js$/,
exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
exclude: /node_modules|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader'
},
{
@ -88,8 +88,12 @@ if (process.env.NODE_ENV === 'production') {
}),
new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
output: {comments: false},
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: false
}),
new webpack.LoaderOptionsPlugin({
@ -122,31 +126,6 @@ if (process.env.NODE_ENV === 'production') {
slugify: slugify,
permalink: true,
permalinkBefore: true
}],
[require('markdown-it-container'), 'demo', {
validate: function(params) {
return params.trim().match(/^demo\s*(.*)$/);
},
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
var description = (m && m.length > 1) ? m[1] : '';
var content = tokens[idx + 1].content;
var html = convert(striptags.strip(content, ['script', 'style']));
var script = striptags.fetch(content, 'script');
var style = striptags.fetch(content, 'style');
var descriptionHTML = description
? md.render(description)
: '';
return `<demo-block class="demo-box">
<div class="source" slot="source">${html}</div>
${descriptionHTML}
<div class="highlight" slot="highlight">`;
}
return '</div></demo-block>\n';
}
}]
],
preprocess: function(MarkdownIt, source) {

10
components.json
View File

@ -10,8 +10,12 @@
"dialog": "./packages/dialog/index.js",
"picker": "./packages/picker/index.js",
"radio-group": "./packages/radio-group/index.js",
"waterfall": "./packages/waterfall/index.js",
"loading": "./packages/loading/index.js",
"badge": "./packages/badge/index.js",
"badge-group": "./packages/badge-group/index.js",
"search": "./packages/search/index.js"
"panel": "./packages/panel/index.js",
"card": "./packages/card/index.js",
"steps": "./packages/steps/index.js",
"tag": "./packages/tag/index.js",
"checkbox": "./packages/checkbox/index.js",
"checkbox-group": "./packages/checkbox-group/index.js"
}

79
docs/ExamplesApp.vue
View File

@ -0,0 +1,79 @@
<template>
<div class="examples-container">
<router-link class="page-back" v-if="visible" :to="'/'">
<i class="zan-icon zan-icon-arrow"></i>
</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
computed: {
visible() {
return ['/'].indexOf(this.$route.path) < 0;
}
}
};
</script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
a {
color: #4078c0;
text-decoration: none;
}
.examples-container {
padding-bottom: 30px;
}
.page-back {
display: inline-block;
position: absolute;
top: 12px;
left: 10px;
width: 40px;
height: 40px;
text-align: center;
color: #333;
transform: rotate(180deg);
i {
font-size: 24px;
line-height: 40px;
}
}
.page-title {
font-size: 20px;
margin: 20px auto;
text-align: center;
display: block;
line-height: 1;
}
.page-sub-title {
font-size: 16px;
padding: 10px 0;
}
</style>

45
docs/ExamplesDocsApp.vue
View File

@ -1,9 +1,10 @@
<template>
<div class="page-container">
<div class="page-container clearfix">
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
<div class="page-content">
<router-view></router-view>
</div>
<mobile></mobile>
</div>
</template>
@ -24,9 +25,8 @@ export default {
@import './assets/docs.css';
.page-container {
width: 1140px;
padding: 0 30px;
margin: 0 auto;
height: 100%;
overflow: scroll;
h2 {
font-size: 28px;
@ -34,10 +34,12 @@ export default {
margin: 20px 0;
line-height: 40px;
}
h3 {
font-size: 22px;
margin: 23px 0;
}
h2, h3, h4, h5 {
font-weight: normal;
color: #1f2f3d;
@ -57,6 +59,7 @@ export default {
}
}
}
p {
font-size: 14px;
color: #5e6d82;
@ -65,8 +68,32 @@ export default {
}
.page-content {
width: 75%;
width: 52%;
box-sizing: border-box;
float: left;
padding: 0 15px;
overflow: auto;
height: inherit;
}
.mobile-wrapper {
float: left;
width: 30%;
height: 300px;
position: relative;
}
.mobile {
margin: 20px 20px 0;
height: 100%;
box-sizing: border-box;
width: 365px;
}
.demo-page {
width: 100%;
border: 5px solid #f5f5f5;
height: 580px;
}
.table {
@ -77,16 +104,16 @@ export default {
font-size: 14px;
margin-bottom: 45px;
th:first-child {
padding-left: 10px;
}
th {
text-align: left;
border-top: 1px solid #eaeefb;
border-bottom: 1px solid #eaeefb;
background-color: #eff2f7;
padding: 10px;
&:first-child {
padding-left: 10px;
}
}
td {

19
docs/assets/docs.css
View File

@ -18,11 +18,16 @@ time, mark, audio, video {
vertical-align: baseline;
}
html {
height: 100%;
}
body {
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
overflow: auto;
overflow: hidden;
font-weight: 400;
-webkit-font-smoothing: antialiased;
height: 100%;
}
a {
@ -53,4 +58,16 @@ ul {
-webkit-font-smoothing: auto;
}
.clearfix {
&::before {
display: table;
content: "";
}
&::after {
display: table;
content: "";
clear: both;
}
}

10952
docs/build/0.ce826a4b.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
docs/build/0.ce826a4b.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

11164
docs/build/0.js vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/build/0.js.map vendored
View File

File diff suppressed because one or more lines are too long

241
docs/build/1.1.js vendored
View File

@ -1,241 +0,0 @@
webpackJsonp([1],{
/***/ 22:
/***/ function(module, exports, __webpack_require__) {
var map = {
"./examples/sample.md": 23
};
function webpackContext(req) {
return __webpack_require__(webpackContextResolve(req));
};
function webpackContextResolve(req) {
return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
};
webpackContext.keys = function webpackContextKeys() {
return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = 22;
/***/ },
/***/ 23:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(24);
/***/ },
/***/ 24:
/***/ function(module, exports, __webpack_require__) {
var __vue_exports__, __vue_options__
var __vue_styles__ = {}
/* script */
__vue_exports__ = __webpack_require__(25)
/* template */
var __vue_template__ = __webpack_require__(26)
__vue_options__ = __vue_exports__ = __vue_exports__ || {}
if (
typeof __vue_exports__.default === "object" ||
typeof __vue_exports__.default === "function"
) {
if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
__vue_options__ = __vue_exports__ = __vue_exports__.default
}
if (typeof __vue_options__ === "function") {
__vue_options__ = __vue_options__.options
}
__vue_options__.__file = "/Users/fenglai/project/oxygen/node_modules/vue-markdown-loader/.cache/sample-1.vue"
__vue_options__.render = __vue_template__.render
__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-94b78d06", __vue_options__)
} else {
hotAPI.reload("data-v-94b78d06", __vue_options__)
}
})()}
if (__vue_options__.functional) {console.error("[vue-loader] sample-1.vue: functional components are not supported and should be defined in plain js files using render functions.")}
module.exports = __vue_exports__
/***/ },
/***/ 25:
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
exports.default = {
data: function data() {
return {
author: 'test'
};
}
};
/***/ },
/***/ 26:
/***/ function(module, exports, __webpack_require__) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('section', [_vm._m(0), _vm._v(" "), _vm._m(1), _vm._v(" "), _c('p', [_vm._v("基础的按钮用法。")]), _vm._v(" "), _c('demo-block', {
staticClass: "demo-box"
}, [_c('div', {
staticClass: "source",
slot: "source"
}, [_c('sample', {
attrs: {
"author": _vm.author
}
})], 1), _vm._v(" "), _c('p', [_vm._v("样例代码")]), _vm._v(" "), _c('div', {
staticClass: "highlight",
slot: "highlight"
}, [_c('pre', [_c('code', {
staticClass: "hljs language-html"
}, [_c('span', {
staticClass: "hljs-tag"
}, [_vm._v("<"), _c('span', {
staticClass: "hljs-name"
}, [_vm._v("sample")]), _vm._v(" "), _c('span', {
staticClass: "hljs-attr"
}, [_vm._v(":author")]), _vm._v("="), _c('span', {
staticClass: "hljs-string"
}, [_vm._v("\"author\"")]), _vm._v(">")]), _c('span', {
staticClass: "hljs-tag"
}, [_vm._v("</"), _c('span', {
staticClass: "hljs-name"
}, [_vm._v("sample")]), _vm._v(">")]), _vm._v("\n")])])])]), _vm._v(" "), _vm._m(2), _vm._v(" "), _vm._m(3)], 1)
},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('h2', {
attrs: {
"id": "sample-zu-jian"
}
}, [_c('a', {
staticClass: "header-anchor",
attrs: {
"href": "#sample-zu-jian",
"aria-hidden": "true"
}
}, [_vm._v("¶")]), _vm._v(" sample组件")])
},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('h3', {
attrs: {
"id": "ji-chu-yong-fa"
}
}, [_c('a', {
staticClass: "header-anchor",
attrs: {
"href": "#ji-chu-yong-fa",
"aria-hidden": "true"
}
}, [_vm._v("¶")]), _vm._v(" 基础用法")])
},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('h3', {
attrs: {
"id": "attributes"
}
}, [_c('a', {
staticClass: "header-anchor",
attrs: {
"href": "#attributes",
"aria-hidden": "true"
}
}, [_vm._v("¶")]), _vm._v(" Attributes")])
},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('table', {
staticClass: "table"
}, [_c('thead', [_c('tr', [_c('th', [_vm._v("参数")]), _vm._v(" "), _c('th', [_vm._v("说明")]), _vm._v(" "), _c('th', [_vm._v("类型")]), _vm._v(" "), _c('th', [_vm._v("可选值")]), _vm._v(" "), _c('th', [_vm._v("默认值")])])]), _vm._v(" "), _c('tbody', [_c('tr', [_c('td', [_vm._v("size")]), _vm._v(" "), _c('td', [_vm._v("尺寸")]), _vm._v(" "), _c('td', [_vm._v("string")]), _vm._v(" "), _c('td', [_vm._v("large")]), _vm._v(" "), _c('td', [_vm._v("—")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("type")]), _vm._v(" "), _c('td', [_vm._v("类型")]), _vm._v(" "), _c('td', [_vm._v("string")]), _vm._v(" "), _c('td', [_vm._v("primary,warning,text")]), _vm._v(" "), _c('td', [_vm._v("—")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("disabled")]), _vm._v(" "), _c('td', [_vm._v("禁用")]), _vm._v(" "), _c('td', [_vm._v("boolean")]), _vm._v(" "), _c('td', [_vm._v("true, false")]), _vm._v(" "), _c('td', [_vm._v("false")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("icon")]), _vm._v(" "), _c('td', [_vm._v("图标，已有的图标库中的图标名")]), _vm._v(" "), _c('td', [_vm._v("string")]), _vm._v(" "), _c('td', [_vm._v("—")]), _vm._v(" "), _c('td', [_vm._v("—")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("to")]), _vm._v(" "), _c('td', [_vm._v("路由跳转路径")]), _vm._v(" "), _c('td', [_vm._v("Object")]), _vm._v(" "), _c('td', [_vm._v("—")]), _vm._v(" "), _c('td', [_vm._v("—")])])])])
}]}
module.exports.render._withStripped = true
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-94b78d06", module.exports)
}
}
/***/ }
});
//# sourceMappingURL=1.1.js.map

1
docs/build/1.1.js.map vendored
View File

File diff suppressed because one or more lines are too long

199
docs/build/1.ce826a4b.js vendored Normal file
View File

@ -0,0 +1,199 @@
webpackJsonp([1],{
/***/ 169:
/***/ (function(module, exports, __webpack_require__) {
/* styles */
__webpack_require__(263)
var Component = __webpack_require__(0)(
/* script */
__webpack_require__(179),
/* template */
__webpack_require__(237),
/* scopeId */
null,
/* cssModules */
null
)
module.exports = Component.exports
/***/ }),
/***/ 179:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _navConfig = __webpack_require__(7);
var _navConfig2 = _interopRequireDefault(_navConfig);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
data: function data() {
return {
highlights: [],
navState: [],
data: _navConfig2.default['zh-CN'],
base: '/component'
};
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ }),
/***/ 197:
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)();
// imports
// module
exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
// exports
/***/ }),
/***/ 237:
/***/ (function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
staticClass: "side-nav"
}, [_c('ul', _vm._l((_vm.data), function(item) {
return _c('li', {
staticClass: "nav-item"
}, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
attrs: {
"active-class": "active",
"to": _vm.base + item.path,
"exact": ""
},
domProps: {
"textContent": _vm._s(item.title || item.name)
}
}), _vm._v(" "), (item.children) ? _c('ul', {
staticClass: "pure-menu-list sub-nav"
}, _vm._l((item.children), function(navItem) {
return _c('li', {
staticClass: "nav-item"
}, [_c('router-link', {
attrs: {
"active-class": "active",
"to": _vm.base + navItem.path
},
domProps: {
"textContent": _vm._s(navItem.title || navItem.name)
}
})], 1)
})) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
return _c('div', {
staticClass: "nav-group"
}, [_c('div', {
staticClass: "nav-group__title"
}, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
staticClass: "pure-menu-list"
}, [_vm._l((group.list), function(navItem) {
return [(!navItem.disabled) ? _c('li', {
staticClass: "nav-item"
}, [_c('router-link', {
attrs: {
"active-class": "active",
"to": _vm.base + navItem.path
},
domProps: {
"textContent": _vm._s(navItem.title)
}
})], 1) : _vm._e()]
})], 2)])
}) : _vm._e()], 2)
}))])
},staticRenderFns: []}
/***/ }),
/***/ 263:
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(197);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(14)("1517d9c0", content, true);
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ })
});
//# sourceMappingURL=1.ce826a4b.js.map

1
docs/build/1.ce826a4b.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

199
docs/build/1.js vendored Normal file
View File

@ -0,0 +1,199 @@
webpackJsonp([1],{
/***/ 169:
/***/ (function(module, exports, __webpack_require__) {
/* styles */
__webpack_require__(263)
var Component = __webpack_require__(0)(
/* script */
__webpack_require__(179),
/* template */
__webpack_require__(237),
/* scopeId */
null,
/* cssModules */
null
)
module.exports = Component.exports
/***/ }),
/***/ 179:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _navConfig = __webpack_require__(7);
var _navConfig2 = _interopRequireDefault(_navConfig);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
data: function data() {
return {
highlights: [],
navState: [],
data: _navConfig2.default['zh-CN'],
base: '/component'
};
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ }),
/***/ 197:
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)();
// imports
// module
exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
// exports
/***/ }),
/***/ 237:
/***/ (function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
staticClass: "side-nav"
}, [_c('ul', _vm._l((_vm.data), function(item) {
return _c('li', {
staticClass: "nav-item"
}, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
attrs: {
"active-class": "active",
"to": _vm.base + item.path,
"exact": ""
},
domProps: {
"textContent": _vm._s(item.title || item.name)
}
}), _vm._v(" "), (item.children) ? _c('ul', {
staticClass: "pure-menu-list sub-nav"
}, _vm._l((item.children), function(navItem) {
return _c('li', {
staticClass: "nav-item"
}, [_c('router-link', {
attrs: {
"active-class": "active",
"to": _vm.base + navItem.path
},
domProps: {
"textContent": _vm._s(navItem.title || navItem.name)
}
})], 1)
})) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
return _c('div', {
staticClass: "nav-group"
}, [_c('div', {
staticClass: "nav-group__title"
}, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
staticClass: "pure-menu-list"
}, [_vm._l((group.list), function(navItem) {
return [(!navItem.disabled) ? _c('li', {
staticClass: "nav-item"
}, [_c('router-link', {
attrs: {
"active-class": "active",
"to": _vm.base + navItem.path
},
domProps: {
"textContent": _vm._s(navItem.title)
}
})], 1) : _vm._e()]
})], 2)])
}) : _vm._e()], 2)
}))])
},staticRenderFns: []}
/***/ }),
/***/ 263:
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(197);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(14)("1517d9c0", content, true);
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ })
});
//# sourceMappingURL=1.js.map

1
docs/build/1.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

17760
docs/build/build-docs.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/build/build-docs.js.map vendored
View File

File diff suppressed because one or more lines are too long

10649
docs/build/zanui-docs.ce826a4b.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
docs/build/zanui-docs.ce826a4b.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

10649
docs/build/zanui-docs.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
docs/build/zanui-docs.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

15284
docs/build/zanui-examples.ce826a4b.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/build/zanui-examples.ce826a4b.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

15284
docs/build/zanui-examples.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/build/zanui-examples.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

196
docs/components/demo-block.vue
View File

@ -1,196 +0,0 @@
<template>
<div
class="demo-block"
:class="[blockClass, { 'hover': hovering }]"
@mouseenter="hovering = true"
@mouseleave="hovering = false">
<slot name="source"></slot>
<div class="meta">
<div class="description">
<slot></slot>
</div>
<slot name="highlight">
</slot>
</div>
<div class="demo-block-control" @click="isExpanded = !isExpanded">
<span v-show="hovering">{{ controlText }}</span>
</div>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
hovering: false,
isExpanded: false
};
},
computed: {
blockClass() {
return `demo-${this.$route.path.split('/').pop()}`;
},
controlText() {
return this.isExpanded ? '隐藏代码' : '显示代码';
},
codeArea() {
return this.$el.getElementsByClassName('meta')[0];
},
codeAreaHeight() {
if (this.$el.getElementsByClassName('description').length > 0) {
return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
}
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
}
},
watch: {
isExpanded(val) {
this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0';
}
},
mounted() {
this.$nextTick(() => {
let highlight = this.$el.getElementsByClassName('highlight')[0];
if (this.$el.getElementsByClassName('description').length === 0) {
highlight.style.width = '100%';
highlight.borderRight = 'none';
}
});
}
};
</script>
<style lang="css">
.demo-block {
border: solid 1px #eaeefb;
border-radius: 4px;
transition: .2s;
&.hover {
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
}
code {
font-family: Menlo, Monaco, Consolas, Courier, monospace;
}
p {
margin: 0;
}
.demo-button {
float: right;
}
.source {
padding: 24px;
}
.meta {
background-color: #f9fafc;
border-top: solid 1px #eaeefb;
clear: both;
overflow: hidden;
height: 0;
transition: height .2s;
}
.description {
padding: 18px 24px;
width: 40%;
box-sizing: border-box;
border-left: solid 1px #eaeefb;
float: right;
font-size: 14px;
line-height: 1.8;
color: #5e6d82;
word-break: break-word;
p {
margin: 0 0 12px;
}
code {
color: #5e6d82;
background-color: #e6effb;
margin: 0 4px;
transform: translateY(-2px);
display: inline-block;
padding: 1px 5px;
font-size: 12px;
border-radius: 3px;
}
}
.highlight {
width: 60%;
border-right: solid 1px #eaeefb;
pre {
margin: 0;
}
code.hljs {
margin: 0;
border: none;
max-height: none;
border-radius: 0;
&::before {
content: none;
}
}
}
.demo-block-control {
border-top: solid 1px #eaeefb;
height: 36px;
box-sizing: border-box;
background-color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-align: center;
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
transition: .2s;
position: relative;
i {
font-size: 12px;
line-height: 36px;
transition: .3s;
&.hovering {
transform: translateX(-40px);
}
}
span {
position: absolute;
transform: translateX(-30px);
font-size: 14px;
line-height: 36px;
transition: .3s;
display: inline-block;
}
&:hover {
color: #20a0ff;
background-color: #f9fafc;
}
& .text-slide-enter,
& .text-slide-leave-active {
opacity: 0;
transform: translateX(10px);
}
}
}
</style>

116
docs/components/demo-list.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<div class="side-nav">
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path">{{item.name}}</a>
<router-link
v-else
active-class="active"
:to="base + item.path"
exact
v-text="item.title || item.name">
</router-link>
<ul class="pure-menu-list sub-nav" v-if="item.children">
<li class="nav-item" v-for="navItem in item.children">
<router-link
active-class="active"
:to="base + navItem.path"
v-text="navItem.title || navItem.name">
</router-link>
</li>
</ul>
<template v-if="item.groups">
<div class="nav-group" v-for="group in item.groups">
<div class="nav-group__title">{{group.groupName}}</div>
<ul class="pure-menu-list">
<template v-for="navItem in group.list">
<li
class="nav-item"
v-if="!navItem.disabled">
<router-link
active-class="active"
:to="base + navItem.path"
v-text="navItem.title">
</router-link>
</li>
</template>
</ul>
</div>
</template>
</li>
</ul>
</div>
</template>
<script>
import navConfig from '../nav.config.json';
export default {
data() {
return {
highlights: [],
navState: [],
data: navConfig['zh-CN'],
base: '/component'
};
}
};
</script>
<style>
.side-nav {
width: 100%;
box-sizing: border-box;
padding: 40px 20px;
background: #f9fafb;
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
overflow: hidden;
}
.nav-item {
a {
font-size: 16px;
color: #5e6d82;
line-height: 40px;
height: 40px;
margin: 0;
padding: 0;
text-decoration: none;
display: block;
position: relative;
transition: all .3s;
&.active {
color: #20a0ff;
}
}
.nav-item {
a {
display: block;
height: 40px;
line-height: 40px;
font-size: 13px;
padding-left: 24px;
&:hover {
color: #20a0ff;
}
}
}
}
.nav-group__title {
font-size: 12px;
color: #99a9bf;
padding-left: 8px;
line-height: 26px;
margin-top: 10px;
}
}
</style>

7
docs/components/mobile.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div class="mobile-wrapper">
<div class="mobile">
<iframe class="demo-page" :src="'./examples.html#' + $route.path" frameborder="0"></iframe>
</div>
</div>
</template>

7
docs/components/side-nav.vue
View File

@ -62,10 +62,13 @@
<style lang="css">
.side-nav {
width: 25%;
width: 18%;
box-sizing: border-box;
padding-right: 30px;
padding: 40px 20px;
float: left;
background: #f9fafb;
height: inherit;
overflow: auto;
li {
list-style: none;

84
docs/examples-docs/button.md
View File

@ -1,92 +1,80 @@
<style lang="css">
@component-namespace z {
@component button-group {
.z-button-1 {
margin-bottom: 15px;
}
}
}
</style>
## Button组件
### 按钮功能
:::demo 只接受primary, default, danger三种类型，默认default
只接受primary, default, danger三种类型，默认default。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button>default</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button>default</zan-button>
</div>
<div class="z-button-1">
<z-button type="primary">primary</z-button>
<div class="zan-button-1">
<zan-button type="primary">primary</zan-button>
</div>
<div class="z-button-1">
<z-button type="danger">danger</z-button>
<div class="zan-button-1">
<zan-button type="danger">danger</zan-button>
</div>
</div>
```
:::
### 禁用状态
:::demo
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button disabled>diabled</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button disabled>diabled</zan-button>
</div>
</div>
```
:::
### 按钮尺寸
:::demo 只接受large, normal, small, mini四种尺寸，默认normal
只接受large, normal, small, mini四种尺寸，默认normal。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button size="large">large</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button size="large">large</zan-button>
</div>
</div>
<div class="z-button-group" :style="{ width: '50%' }">
<div class="z-button-3">
<z-button type="primary">normal</z-button>
<div class="zan-button-group" :style="{ width: '50%' }">
<div class="zan-button-3">
<zan-button type="primary">normal</zan-button>
</div>
<div class="z-button-3">
<z-button size="small">small</z-button>
<div class="zan-button-3">
<zan-button size="small">small</zan-button>
</div>
<div class="z-button-3">
<z-button size="mini">mini</z-button>
<div class="zan-button-3">
<zan-button size="mini">mini</zan-button>
</div>
</div>
```
:::
### 自定义按钮标签
:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
按钮默认是button标签，可以使用tag属性修改为一个a标签。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</div>
</div>
```
:::
### button group
:::demo 一组按钮
一组按钮。
```html
<div class="z-button-group">
<z-button type="primary" size="small">确认付款</z-button>
<z-button size="small">确认收货</z-button>
<z-button size="small">取消订单</z-button>
<div class="zan-button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
```
:::
### API

56
docs/examples-docs/card.md Normal file
View File

@ -0,0 +1,56 @@
## Card 图文组件
### 基础用法
当没有底部按钮时，右侧内容会居中显示。
```html
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>
```
### 高级用法
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
```html
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | string | '' | '' |
| title | 标题 | string | '' | '' |
| desc | 描述 | string | '' | '' |
### Slot
| name | 描述 |
|-----------|-----------|
| title | 自定义标题 |
| desc | 自定义描述 |
| tags | 自定义tags |
| footer | 自定义footer |

62
docs/examples-docs/cell.md
View File

@ -20,65 +20,61 @@ export default {
### 基础用法
:::demo 样例代码
```html
<z-cell-group>
<z-cell title="单元格1" value="单元格1内容"></z-cell>
<z-cell title="单元格2" value="单元格2内容"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
```
:::
### 标题带描述信息
:::demo 传入`label`属性，属性值为描述信息的值。
传入`label`属性，属性值为描述信息的值。
```html
<z-cell-group>
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
<z-cell title="单元格2" label="描述信息"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group>
```
:::
### 带图标
:::demo 传入`icon`属性
传入`icon`属性。
```html
<z-cell-group>
<z-cell title="起码运动馆" icon="home"></z-cell>
<z-cell title="线下门店" icon="location"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
```
:::
### 可点击的链接
:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
```html
<z-cell-group>
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
```
:::
### 高级用法
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
```html
<z-cell-group>
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="z-cell-text">起码运动馆</span>
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
```
:::
### API

132
docs/examples-docs/checkbox.md
View File

@ -1 +1,131 @@
## Checkbox组件
## Checkbox组件
### 基础用法
```html
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<script>
export default {
data() {
return {
checkbox1: true
};
}
};
</script>
```
### 禁用状态
```html
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
<script>
export default {
data() {
return {
checkbox2: true
};
}
};
</script>
```
### Checkbox组
```html
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
},
watch: {
result(val) {
console.log(val);
}
}
};
</script>
```
### 禁用Checkbox组
```html
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
}
};
</script>
```
### 与Cell组件一起使用
```html
<zan-checkbox-group v-model="result">
<zan-cell-group>
<zan-cell v-for="item in list">
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
</zan-cell>
</zan-cell-group>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
}
};
</script>
```
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
| name | 根据这个来判断radio是否选中 | Boolean | false | |
### CheckboxGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
### CheckboxGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |

34
docs/examples-docs/dialog.md
View File

@ -30,13 +30,39 @@ export default {
### 基础用法
:::demo
```html
<z-button @click="handleAlertClick">alert</z-button>
<zan-button @click="handleAlertClick">alert</zan-button>
<z-button @click="handleConfirmClick">confirm</z-button>
<zan-button @click="handleConfirmClick">confirm</zan-button>
<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>
```
:::
### API

50
docs/examples-docs/field.md
View File

@ -1,54 +1,38 @@
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
handleChange() {
console.log(this.name);
}
}
};
</script>
## Field组件
表单中`input`或`textarea`的输入框。
### 基础用法
:::demo 根据`type`属性显示不同的输入框。
根据`type`属性显示不同的输入框。
```html
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
```
:::
### 无label的输入框
:::demo 不传入`label`属性即可。
不传入`label`属性即可。
```html
<z-cell-group>
<z-field type="text" placeholder="请输入用户名"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
```
:::
### 监听change事件
:::demo 监听组件的`change`事件。
监听组件的`change`事件。
```html
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
```
:::
### API

80
docs/examples-docs/panel.md Normal file
View File

@ -0,0 +1,80 @@
## Panel 面板
面板只是一个容器，里面可以放入自定义的内容。
### 基础用法
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</zan-panel>
```
### 高级用法
使用具名`slot`自定义内容。
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="zan-panel-buttons" slot="footer">
<zan-button size="small">按钮一</zan-button>
<zan-button size="small" type="danger">按钮二</zan-button>
</div>
</zan-panel>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | string | '' | '' |
| desc | 描述 | string | '' | '' |
| status | 状态 | string | '' | '' |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义内容 |
| header | 自定义header |
| footer | 自定义footer |

35
docs/examples-docs/picker.md
View File

@ -1,45 +1,12 @@
<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>
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
```
:::
### API

88
docs/examples-docs/popup.md
View File

@ -1,3 +1,36 @@
## Popup组件
### 基础用法
```html
<div class="zan-button-1">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
xxxx
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
一些内容
</zan-popup>
<script>
export default {
data() {
@ -20,62 +53,7 @@ export default {
}
};
</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

89
docs/examples-docs/radio.md
View File

@ -12,14 +12,93 @@ export default {
### 基础用法
:::demo
```html
<z-radio v-model="radio"></z-radio>
```
:::
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
### API
<script>
export default {
data() {
return {
radio1: '1'
}
}
};
</script>
```
### 禁用状态
```html
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
<script>
export default {
data() {
return {
radio2: '2'
}
}
};
</script>
```
### radio组
```html
<zan-radio-group v-model="radio3">
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
<script>
export default {
data() {
return {
radio3: '1'
}
}
};
</script>
```
### 与Cell组件一起使用
```html
<zan-radio-group v-model="radio4">
<zan-cell-group>
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
</zan-cell-group>
</zan-radio-group>
<script>
export default {
data() {
return {
radio4: '1'
}
}
};
</script>
```
### Radio API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
| name | 根据这个来判断radio是否选中 | Boolean | false | |
### RadioGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
### RadioGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |

4
docs/examples-docs/steps.md Normal file
View File

@ -0,0 +1,4 @@
## Steps 步骤条

47
docs/examples-docs/switch.md
View File

@ -1,46 +1,7 @@
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? 'ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
<style lang="css">
@component-namespace page {
@component switch {
padding: 0 15px 15px;
@descendent wrapper {
margin: 30px;
width: 100px;
float: left;
text-align: center;
}
@descendent text {
margin: 20px 0;
}
}
}
</style>
## Switch组件
### 基础用法
:::demo 样例代码
```html
<div class="page-switch">
<div class="page-switch__wrapper">
@ -56,10 +17,8 @@ export default {
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>
```
```javascript
<script>
export default {
data() {
return {
@ -76,9 +35,9 @@ export default {
this.switchState = newState;
}
}
};
};
</script>
```
:::
### API

28
docs/examples-docs/tag.md Normal file
View File

@ -0,0 +1,28 @@
## Tag 组件
### 基础用法
```html
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
```
### 高级用法
```html
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="success">返现</zan-tag>
<zan-tag type="success" :plain="true">返现</zan-tag>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| plain | 是否是空心tag | boolean | false | '' |
| mark | 是否是标记 | boolean | false | '' |
| type | tag类型 | string | '' | 'primary', 'success', 'danger' |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义tag显示内容 |

72
docs/examples-docs/waterfall.md Normal file
View File

@ -0,0 +1,72 @@
## Waterfall 瀑布流
### 基础用法
```html
<div class="waterfall">
<div
v-waterfall-lower="loadMore"
v-waterfall-upper="loadMoreUpper"
waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400"
>
<div
class="waterfall-item"
v-for="item in list"
style="text-align: center;"
>
{{ item }}
</div>
<div v-if="loading" style="text-align: center;">
loading
</div>
</div>
</div>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4, 5],
loading: false,
finished: false
};
},
methods: {
loadMore() {
if (this.list.length >= 200) {
this.finished = true;
return;
}
this.loading = true;
setTimeout(() => {
let lastNumber = this.list[this.list.length - 1];
for (let i = 0; i < 5; i ++) {
lastNumber += 1;
this.list.push(lastNumber);
}
this.loading = false;
}, 2500);
},
loadMoreUpper() {
if (this.list[0] < 0) return;
this.list.unshift(-1);
}
},
computed: {
isWaterfallDisabled: function() {
return this.loading || this.finished;
}
}
};
</script>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| waterfall-disabled | 是否禁止瀑布流触发 | Boolean | false | |
| waterfall-offset | 触发瀑布流加载的阈值 | Number | 300 | |

48
docs/examples.js
View File

@ -0,0 +1,48 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './ExamplesApp';
import navConfig from './nav.config.json';
import routes from './router.config';
import ZanUI from '../src/index';
import 'packages/zanui-css/src/index.css';
Vue.use(ZanUI);
Vue.use(VueRouter);
let routesConfig = routes(navConfig, true);
routesConfig.push({
path: '/',
component: function(resolve) {
require(['./components/demo-list.vue'], resolve);
}
});
const router = new VueRouter({
mode: 'hash',
base: __dirname,
routes: routesConfig
});
let indexScrollTop = 0;
router.beforeEach((route, redirect, next) => {
if (route.path !== '/') {
indexScrollTop = document.body.scrollTop;
}
document.title = route.meta.title || document.title;
next();
});
router.afterEach(route => {
if (route.path !== '/') {
document.body.scrollTop = 0;
} else {
Vue.nextTick(() => {
document.body.scrollTop = indexScrollTop;
});
}
});
new Vue({ // eslint-disable-line
render: h => h(App),
router
}).$mount('#app-container');

72
docs/examples/button.vue
View File

@ -1,10 +1,72 @@
<template>
<div class="button-demos">
<div class="page-button">
<h1 class="page-title">Button</h1>
<h2 class="page-sub-title">按钮功能</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button>default</zan-button>
</div>
<div class="zan-button-1">
<zan-button type="primary">primary</zan-button>
</div>
<div class="zan-button-1">
<zan-button type="danger">danger</zan-button>
</div>
</div>
<h2 class="page-sub-title">禁用状态</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button disabled>diabled</zan-button>
</div>
</div>
<h2 class="page-sub-title">按钮尺寸</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button size="large">large</zan-button>
</div>
</div>
<div class="zan-button-group">
<div class="zan-button-3">
<zan-button type="primary">normal</zan-button>
</div>
<div class="zan-button-3">
<zan-button size="small">small</zan-button>
</div>
<div class="zan-button-3">
<zan-button size="mini">mini</zan-button>
</div>
</div>
<h2 class="page-sub-title">自定义按钮标签</h2>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</div>
</div>
<h2 class="page-sub-title">button group</h2>
<div class="zan-button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
</div>
</template>
<script>
export default {
<style>
@component-namespace page {
@b button {
padding: 0 20px;
}
}
@component-namespace zan {
@b button-group {
.zan-button-1 {
margin-bottom: 10px;
}
}
}
};
</script>
</style>

37
docs/examples/card.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<div class="page-card">
<h1 class="page-title">Card</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>
<h2 class="page-sub-title">高级用法</h2>
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
</div>
</template>
<style>
.page-sub-title {
padding: 15px;
}
</style>

62
docs/examples/cell.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="page-cell">
<h1 class="page-title">Cell</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">标题带描述信息</h2>
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">带图标</h2>
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">可点击的链接</h2>
<zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">高级用法</h2>
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('cell click');
}
}
};
</script>
<style>
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
.page-sub-title {
padding: 25px 15px;
}
</style>

66
docs/examples/checkbox.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div class="page-checkbox">
<h1 class="page-title">Checkbox</h1>
<div class="checkbox-demo-wrapper">
<h2 class="page-sub-title">基础用法</h2>
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<h2 class="page-sub-title">禁用状态</h2>
<zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
<h2 class="page-sub-title">Checkbox组</h2>
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<h2 class="page-sub-title">禁用Checkbox组</h2>
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<h2 class="page-sub-title">与Cell组件一起使用</h2>
</div>
<zan-checkbox-group v-model="result">
<zan-cell-group>
<zan-cell v-for="item in list">
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
</zan-cell>
</zan-cell-group>
</zan-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
checkbox1: true,
checkbox2: true,
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
},
watch: {
result(val) {
console.log(val);
}
}
};
</script>
<style>
.checkbox-demo-wrapper {
padding: 0 15px;
.zan-checkbox {
margin: 10px 0;
}
}
</style>

54
docs/examples/dialog.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="page-dialog">
<h1 class="page-title">Dialog</h1>
<div class="zan-button-1">
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
</div>
<div class="zan-button-1">
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
</div>
</div>
</template>
<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>
<style>
@component-namespace page {
@b dialog {
padding: 0 15px;
.zan-button-1 {
margin-bottom: 10px;
}
}
}
</style>

44
docs/examples/field.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="page-field">
<h1 class="page-title">Field</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
<h2 class="page-sub-title">无label的输入框</h2>
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
<h2 class="page-sub-title">监听change事件</h2>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
handleChange() {
console.log(this.name);
}
}
};
</script>
<style>
.page-sub-title {
padding: 20px 15px;
}
</style>

80
docs/examples/panel.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<div class="page-panel">
<h1 class="page-title">Panel</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</zan-panel>
<h2 class="page-sub-title">高级用法</h2>
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="zan-panel-buttons" slot="footer">
<zan-button size="small">按钮一</zan-button>
<zan-button size="small" type="danger">按钮二</zan-button>
</div>
</zan-panel>
</div>
</template>
<style>
.zan-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
.zan-panel-buttons {
text-align: right;
.zan-button {
margin-left: 5px;
}
}
</style>

39
docs/examples/picker.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div class="page-picker">
<h1 class="page-title">Picker</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
</div>
</template>
<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>

93
docs/examples/popup.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div class="page-popup">
<h1 class="page-title">Popup</h1>
<h2 class="page-sub-title">基础用法</h2>
<div class="zan-button-1">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
xxxx
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
</zan-popup>
<div class="zan-button-1">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
一些内容
</zan-popup>
</div>
</template>
<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>
.zan-popup-1 {
width: 100%;
height: 200px;
}
.zan-popup-2 {
width: 100%;
line-height: 44px;
background-color: rgba(0, 0, 0, 0.701961);
text-align: center;
color: #fff;
}
.zan-popup-3 {
width: 100%;
height: 100%;
background-color: #fff;
}
.zan-popup-4 {
width: 50%;
height: 200px;
background: #fff;
border-radius: 10px;
}
.page-popup .zan-button-1 {
margin-bottom: 10px;
}
.page-sub-title {
padding: 20px 15px;
}
</style>

59
docs/examples/radio.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div class="page-radio">
<h1 class="page-title">Radio</h1>
<div class="radio-demo-wrapper">
<h2 class="page-sub-title">基础用法</h2>
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
<h2 class="page-sub-title">禁用状态</h2>
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
<h2 class="page-sub-title">radio组</h2>
<zan-radio-group v-model="radio3">
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
<h2 class="page-sub-title">禁用radio组</h2>
<zan-radio-group v-model="radio3" disabled>
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
<h2 class="page-sub-title">与Cell组件一起使用</h2>
</div>
<zan-radio-group v-model="radio4">
<zan-cell-group>
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
</zan-cell-group>
</zan-radio-group>
</div>
</template>
<script>
export default {
data() {
return {
radio1: '1',
radio2: '2',
radio3: '1',
radio4: '1'
};
}
};
</script>
<style>
.radio-demo-wrapper {
padding: 0 15px;
.zan-radio {
margin: 10px 0;
}
}
</style>

59
docs/examples/switch.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div class="page-switch">
<h1 class="page-title">Switch</h1>
<h2 class="page-sub-title">基础用法</h2>
<div class="page-switch">
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? 'ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
<style>
@component-namespace page {
@component switch {
padding: 0 15px 15px;
@descendent wrapper {
width: 33.33%;
float: left;
text-align: center;
}
@descendent text {
margin: 20px 0;
}
}
}
</style>

52
docs/examples/tag.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<div class="page-cell">
<h1 class="page-title">Tag</h1>
<h2 class="page-sub-title">基础用法</h2>
<div>
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="danger">四字标签</zan-tag>
<zan-tag type="danger">一</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag :plain="true" type="danger">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag :plain="true" type="primary">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag :plain="true" type="success">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" :mark="true">返现</zan-tag>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {}
};
</script>
<style>
.page-sub-title {
padding: 25px 15px;
}
.tags-container {
padding: 5px 15px;
.zan-tag + .zan-tag {
margin-left: 10px;
}
}
</style>

64
docs/examples/waterfall.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<div class="page-card">
<h1 class="page-title">Waterfall</h1>
<h2 class="page-sub-title">基础用法</h2>
<div>
<div
v-waterfall-lower="loadMore"
v-waterfall-upper="loadMoreUpper"
waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400"
>
<div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
<!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
<div style="text-align: center;">loading</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4, 5],
loading: false,
finished: false
};
},
methods: {
loadMore() {
if (this.list.length >= 200) {
this.finished = true;
return;
}
this.loading = true;
setTimeout(() => {
let lastNumber = this.list[this.list.length - 1];
for (let i = 0; i < 5; i++) {
lastNumber += 1;
this.list.push(lastNumber);
}
this.loading = false;
}, 2500);
},
loadMoreUpper() {
if (this.list[0] < 0) return;
this.list.unshift(-1);
}
},
computed: {
isWaterfallDisabled: function() {
return this.loading || this.finished;
}
}
};
</script>
<style>
.page-sub-title {
padding: 15px;
}
</style>

18
docs/index.js
View File

@ -1,22 +1,25 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './ExamplesDocsApp';
import navConfig from './nav.config.json';
import routes from './router.config';
import demoBlock from './components/demo-block';
import SideNav from './components/side-nav';
import Oxygen from '../src/index';
import Mobile from './components/mobile';
import 'packages/zanui-css/src/index.css';
Vue.use(Oxygen);
Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);
Vue.component('side-nav', SideNav);
Vue.component('mobile', Mobile);
let routesConfig = routes(navConfig);
routesConfig.push({
path: '/',
redirect: '/component/button'
});
const router = new VueRouter({
mode: 'hash',
base: __dirname,
routes
routes: routesConfig
});
let indexScrollTop = 0;
@ -35,6 +38,7 @@ router.afterEach(route => {
Vue.nextTick(() => {
document.body.scrollTop = indexScrollTop;
});
}
});

14
docs/nav.config.json
View File

@ -1,7 +1,7 @@
{
"zh-CN": [
{
"name": "oxygen组件",
"name": "ZanUI组件",
"groups": [
{
"groupName": "CSS组件",
@ -14,14 +14,14 @@
"path": "/cell",
"title": "Cell"
},
{
"path": "/loading",
"title": "Loading"
},
{
"path": "/progress",
"title": "Progress"
},
{
"path": "/panel",
"title": "Panel"
},
{
"path": "/card",
"title": "Card"
@ -34,6 +34,10 @@
"path": "/steps",
"title": "Steps"
},
{
"path": "/tag",
"title": "Tag"
},
{
"path": "/badge",
"title": "Badge"

12
docs/router.config.js
View File

@ -1,6 +1,4 @@
import navConfig from './nav.config.json';
const registerRoute = (navConfig) => {
const registerRoute = (navConfig, isExample) => {
let route = [];
let navs = navConfig['zh-CN'];
navs.forEach(nav => {
@ -23,14 +21,14 @@ const registerRoute = (navConfig) => {
route.push({
path: '/component' + page.path,
component: function(resolve) {
require([`./examples-docs${page.path}.md`], resolve);
require([isExample ? `./examples${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
}
});
}
// console.log(route);
return route;
};
let route = registerRoute(navConfig);
export default route;
export default registerRoute;

4
examples.html
View File

@ -2,8 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Oxygen</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>ZanUI</title>
</head>
<body>

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Oxygen</title>
<title>ZanUI</title>
</head>
<body>

13
package.json
View File

@ -1,9 +1,9 @@
{
"name": "@youzan/oxygen",
"version": "0.0.1",
"name": "@youzan/zanui-vue",
"version": "0.0.7",
"description": "有赞vue wap组件库",
"main": "lib/zanui.js",
"style": "lib/zanui-css.css",
"style": "lib/zanui-css/index.css",
"files": [
"lib",
"src",
@ -13,16 +13,17 @@
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
"dev": "npm run bootstrap && npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
"build:file": "node build/bin/build-entry.js",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
"build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:zanui-css",
"build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:utils && npm run build:zanui-css",
"builddocs": "webpack --progress --hide-modules --config build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
"clean": "rimraf lib && rimraf packages/*/lib",
"lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet"
},
"repository": {
"type": "git",
"url": "git@gitlab.qima-inc.com:fe/oxygen.git"
"url": "git@gitlab.qima-inc.com:fe/zanui-vue.git"
},
"keywords": [
"youzan",

2
packages/button/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@youzan/z-button",
"name": "@youzan/zan-button",
"version": "0.0.1",
"description": "button component",
"main": "./index.js",

27
packages/button/src/button.js
View File

@ -8,14 +8,14 @@
* @param {slot} - 显示文本
*
* @example
* <z-button size="large" type="primary">按钮</z-button>
* <zan-button size="large" type="primary">按钮</zan-button>
*/
const allowedSize = ['mini', 'small', 'normal', 'large'];
const allowedType = ['default', 'danger', 'primary'];
export default {
name: 'z-button',
name: 'zan-button',
props: {
disabled: Boolean,
@ -52,6 +52,27 @@ export default {
let { type, nativeType, size, disabled, loading, block } = this;
let Tag = this.tag;
return (
<Tag
type={nativeType}
disabled={disabled}
class={[
'zan-button',
'zan-button--' + type,
'zan-button--' + size,
{
'is-disabled': disabled,
'is-loading': loading,
'is-block': block
}
]}
onClick={this.handleClick}
>
{
loading ? <i class="zan-icon-loading"></i> : null
}
<span class="zan-button-text">{this.$slots.default}</span>
</Tag>
);
}
};

8
packages/card/CHANGELOG.md Normal file
View File

@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/card/README.md Normal file
View 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/card/index.js Normal file
View File

@ -0,0 +1,3 @@
import Card from './src/card';
export default Card;

10
packages/card/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "@youzan/zan-card",
"version": "0.0.1",
"description": "card component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

31
packages/card/src/card.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="zan-card">
<img :src="thumb" alt="" class="zan-card__img">
<div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
<div class="zan-card__info">
<slot name="title">
<h4 v-text="title" class="zan-card__title"></h4>
</slot>
<slot name="desc">
<p v-if="desc" v-text="desc" class="zan-card__title"></p>
</slot>
<slot name="tags"></slot>
</div>
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'zan-card',
props: {
thumb: {
type: String,
required: true
},
title: String,
desc: String
}
};
</script>

2
packages/cell/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@youzan/z-cell",
"name": "@youzan/zan-cell",
"version": "0.0.1",
"description": "cell component",
"main": "./index.js",

4
packages/cell/src/cell-group.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="z-cell-group">
<div class="zan-cell-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'z-cell-group'
name: 'zan-cell-group'
};
</script>

21
packages/cell/src/cell.vue
View File

@ -1,31 +1,34 @@
<template>
<a class="z-cell" :href="url" @click="handleClick">
<div class="z-cell__title">
<a class="zan-cell" :href="url" @click="handleClick">
<div class="zan-cell__title">
<slot name="icon">
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
</slot>
<slot name="title">
<span class="z-cell__text" v-text="title"></span>
<span class="z-cell__label" v-if="label" v-text="label"></span>
<span class="zan-cell__text" v-text="title"></span>
<span class="zan-cell__label" v-if="label" v-text="label"></span>
</slot>
</div>
<div class="z-cell__value" :class="{ 'is-link' : isLink }">
<div class="zan-cell__value" :class="{
'is-link': isLink,
'is-alone': !title && !label
}">
<slot>
<span v-text="value"></span>
</slot>
</div>
<i class="zui-icon zui-icon-arrow" v-if="isLink"></i>
<i class="zan-icon zan-icon-arrow" v-if="isLink"></i>
</a>
</template>
<script>
export default {
name: 'z-cell',
name: 'zan-cell',
props: {
icon: String,
title: String,
value: String,
value: [String, Number],
url: String,
label: String,
isLink: Boolean

3
packages/checkbox-group/index.js Normal file
View File

@ -0,0 +1,3 @@
import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
export default CheckboxGroup;

8
packages/checkbox/CHANGELOG.md Normal file
View File

@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/checkbox/README.md Normal file
View 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/checkbox/index.js Normal file
View File

@ -0,0 +1,3 @@
import Checkbox from './src/checkbox';
export default Checkbox;

10
packages/checkbox/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "@youzan/zan-checkbox",
"version": "0.0.1",
"description": "checkbox component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

22
packages/checkbox/src/checkbox-group.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="zan-checkbox-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-checkbox-group',
props: {
value: {},
disabled: Boolean
},
watch: {
value(val) {
this.$emit('change', val);
}
}
};
</script>

97
packages/checkbox/src/checkbox.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div
class="zan-checkbox"
:class="{
'is-disabled': isDisabled
}">
<span class="zan-checkbox__input">
<input
v-model="currentValue"
type="checkbox"
class="zan-checkbox__control"
:disabled="isDisabled">
<span class="zan-icon" :class="{
'zan-icon-checked': isChecked,
'zan-icon-check': !isChecked
}">
</span>
</span>
<span class="zan-checkbox__label">
<slot></slot>
</span>
</div>
</template>
<script>
import findParent from 'src/mixins/findParent';
export default {
name: 'zan-checkbox',
mixins: [findParent],
props: {
disabled: Boolean,
value: {},
name: [String, Number]
},
computed: {
/**
* `checkbox`是否在`zan-checkbox-group`中
*/
isGroup() {
return !!this.findParentByComponentName('zan-checkbox-group');
},
/**
* `checkbox`当前值
*/
currentValue: {
get() {
return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
},
set(val) {
if (this.isGroup && this.parentGroup) {
let parentValue = this.parentGroup.value.slice();
if (val) {
if (parentValue.indexOf(this.name) === -1) {
parentValue.push(this.name);
this.parentGroup.$emit('input', parentValue);
}
} else {
let index = parentValue.indexOf(this.name);
if (index !== -1) {
parentValue.splice(index, 1);
this.parentGroup.$emit('input', parentValue);
}
}
} else {
this.$emit('input', val);
}
}
},
/**
* `checkbox`是否被选中
*/
isChecked() {
if ({}.toString.call(this.currentValue) === '[object Boolean]') {
return this.currentValue;
} else if (Array.isArray(this.currentValue)) {
return this.currentValue.indexOf(this.name) > -1;
}
},
/**
* `checkbox`是否被禁用
*/
isDisabled() {
return this.isGroup && this.parentGroup
? this.parentGroup.disabled || this.disabled
: this.disabled;
}
}
};
</script>

2
packages/dialog/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@youzan/z-dialog",
"name": "@youzan/zan-dialog",
"version": "0.0.1",
"description": "dialog component",
"main": "./index.js",

20
packages/dialog/src/dialog.vue
View File

@ -1,16 +1,16 @@
<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 class="zan-dialog-wrapper">
<div class="zan-dialog" v-show="value">
<div class="zan-dialog__header" v-if="title">
<div class="zan-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 class="zan-dialog__content" v-if="message">
<div class="zan-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 class="zan-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
<button class="zan-dialog__btn zan-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
<button class="zan-dialog__btn zan-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
</div>
</div>
</div>
@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
const CONFIRM_TEXT = '确认';
export default {
name: 'z-dialog',
name: 'zan-dialog',
mixins: [Popup],

2
packages/field/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@youzan/z-field",
"name": "@youzan/zan-field",
"version": "0.0.1",
"description": "form field component",
"main": "./index.js",

12
packages/field/src/field.vue
View File

@ -1,6 +1,6 @@
<template>
<z-cell
class="z-field"
<zan-cell
class="zan-field"
:title="label"
:class="{
'is-textarea': type === 'textarea',
@ -8,7 +8,7 @@
}">
<textarea
v-if="type === 'textarea'"
class="z-field__control"
class="zan-field__control"
v-model="currentValue"
@change="$emit('change', currentValue)"
:placeholder="placeholder"
@ -18,7 +18,7 @@
</textarea>
<input
v-else
class="z-field__control"
class="zan-field__control"
:value="currentValue"
@change="$emit('change', currentValue)"
@input="handleInput"
@ -27,14 +27,14 @@
:maxlength="maxlength"
:disabled="disabled"
:readonly="readonly">
</z-cell>
</zan-cell>
</template>
<script>
import zCell from 'packages/cell';
export default {
name: 'z-field',
name: 'zan-field',
components: {
zCell

4
packages/icon/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@youzan/z-icon",
"name": "@youzan/zan-icon",
"version": "0.0.1",
"description": "z-icon",
"description": "zan-icon",
"main": "index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"devDependencies": {},

4
packages/icon/src/icon.vue
View File

@ -1,10 +1,10 @@
<template>
<i :class="'zenui-icon-' + name"></i>
<i class="zanui-icon" :class="'zan-icon-' + name"></i>
</template>
<script>
export default {
name: 'z-icon',
name: 'zan-icon',
props: {
name: String

2
packages/loading/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@youzan/z-loading",
"name": "@youzan/zan-loading",
"version": "0.0.1",
"description": "loading component",
"main": "./lib/index.js",

4
packages/loading/src/loading.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="z-loading"></div>
<div class="zan-loading"></div>
</template>
<script>
export default {
name: 'z-loading'
name: 'zan-loading'
};
</script>

8
packages/panel/CHANGELOG.md Normal file
View File

@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/panel/README.md Normal file
View 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/panel/index.js Normal file
View File

@ -0,0 +1,3 @@
import Panel from './src/panel';
export default Panel;

10
packages/panel/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "@youzan/zan-panel",
"version": "0.0.1",
"description": "panel component",
"main": "./index.js",
"author": "zhangmin <zhangmin@youzan.com>",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

28
packages/panel/src/panel.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="zan-panel">
<div class="zan-panel__header">
<slot name="header">
<h4 class="zan-panel__title" v-text="title"></h4>
<span class="zan-panel__desc" v-if="desc" v-text="desc"></span>
<span class="zan-panel__status" v-if="status" v-text="status"></span>
</slot>
</div>
<div class="zan-panel__content">
<slot></slot>
</div>
<div class="zan-panel__footer" v-if="this.$slots.footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'zan-panel',
props: {
title: String,
desc: String,
status: String
}
};
</script>

Some files were not shown because too many files have changed in this diff Show More