done
This commit is contained in:
zhuxiang
@@ -64,7 +64,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
.demo-title {
|
||||
font-size: 20px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
@@ -72,8 +72,8 @@ export default {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
.demo-sub-title {
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<mobile></mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -59,37 +58,22 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
margin-left: 320px;
|
||||
padding: 0 20px;
|
||||
|
||||
section > p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
margin: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
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;
|
||||
|
||||
Vendored
-10952
File diff suppressed because it is too large
Load Diff
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+7
-13128
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
-199
@@ -1,199 +0,0 @@
|
||||
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
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-199
@@ -1,199 +1 @@
|
||||
webpackJsonp([1],{
|
||||
|
||||
/***/ 194:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
/* styles */
|
||||
__webpack_require__(307)
|
||||
|
||||
var Component = __webpack_require__(0)(
|
||||
/* script */
|
||||
__webpack_require__(204),
|
||||
/* template */
|
||||
__webpack_require__(274),
|
||||
/* scopeId */
|
||||
null,
|
||||
/* cssModules */
|
||||
null
|
||||
)
|
||||
|
||||
module.exports = Component.exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 204:
|
||||
/***/ (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'
|
||||
};
|
||||
}
|
||||
}; //
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 224:
|
||||
/***/ (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
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 274:
|
||||
/***/ (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: []}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 307:
|
||||
/***/ (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__(224);
|
||||
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
|
||||
webpackJsonp([1],{212:function(t,e,a){a(357);var i=a(0)(a(225),a(316),null,null);t.exports=i.exports},225:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(24),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},258:function(t,e,a){e=t.exports=a(15)(),e.push([t.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}",""])},316:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},357:function(t,e,a){var i=a(258);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(25)("1517d9c0",i,!0)}});
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
-10649
File diff suppressed because it is too large
Load Diff
-1
File diff suppressed because one or more lines are too long
Vendored
+6
-10649
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
-15284
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
Vendored
+6
-16056
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div
|
||||
class="demo-block"
|
||||
:class="blockClass">
|
||||
<slot name="examples"></slot>
|
||||
<slot name="highlight">
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
blockClass() {
|
||||
return `demo-${this.$route.path.split('/').pop()}`;
|
||||
},
|
||||
|
||||
codeAreaHeight() {
|
||||
return Math.max(this.$el.getElementsByClassName('examples')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$el.getElementsByClassName('highlight')[0].style.height = `${this.codeAreaHeight + 1}px`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block {
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
transition: .2s;
|
||||
overflow: hidden;
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
}
|
||||
|
||||
.examples {
|
||||
width: 375px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 0;
|
||||
min-height: 200px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-right: 375px;
|
||||
box-sizing: border-box;
|
||||
border-right: solid 1px #eaeefb;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
margin: 0;
|
||||
border: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="example-block">
|
||||
<h2 class="demo-sub-title" v-text="title"></h2>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div class="mobile-wrapper">
|
||||
<div class="mobile">
|
||||
<iframe class="demo-page" :src="'./examples.html#' + $route.path" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
width: 18%;
|
||||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 20px;
|
||||
float: left;
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block="">default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block="">primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block="">danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block="">diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="按钮尺寸">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block="">normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block="">small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block="">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="自定义按钮标签">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="loading按钮">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading="" block="">loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading="" block=""></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="button group">
|
||||
<div class="button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<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>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<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>
|
||||
|
||||
</example-block><example-block title="带图标">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="可点击的链接">
|
||||
<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>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<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>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,19 +1,14 @@
|
||||
<template>
|
||||
<div class="page-dialog">
|
||||
<h1 class="page-title">Dialog</h1>
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
|
||||
</div>
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
export default {
|
||||
@@ -39,16 +34,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b dialog {
|
||||
padding: 0 15px;
|
||||
|
||||
.zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
|
||||
<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>
|
||||
|
||||
</example-block><example-block title="无label的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="监听change事件">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,4 @@
|
||||
<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">渐变浅色spinner</h2>
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<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>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -1,13 +1,10 @@
|
||||
<template>
|
||||
<div class="page-picker">
|
||||
<h1 class="page-title">Picker</h1>
|
||||
<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
</div>
|
||||
</template>
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
@@ -36,4 +33,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="radio组">
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="只显示步骤条">
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="demo-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@e wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
|
||||
<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>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<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>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
@@ -10,6 +11,7 @@
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### z-badge-group API
|
||||
|
||||
|
||||
@@ -1,80 +1,123 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button组件
|
||||
|
||||
### 按钮功能
|
||||
|
||||
只接受primary, default, danger三种类型，默认default。
|
||||
|
||||
:::demo 按钮功能
|
||||
```html
|
||||
<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>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block>default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block>primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block>danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button disabled>diabled</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block>diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-button-group" :style="{ width: '50%' }">
|
||||
<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>
|
||||
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block>normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block>small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block>mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### loading按钮
|
||||
|
||||
表示loading状态
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading block>loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading block></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### button group
|
||||
|
||||
一组按钮。
|
||||
|
||||
:::demo button group
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -4,19 +4,21 @@
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo 基础用法
|
||||
```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`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
@@ -36,6 +38,7 @@
|
||||
</div>
|
||||
</zan-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -20,50 +20,59 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 标题带描述信息
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
:::demo 标题带描述信息
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带图标
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
:::demo 带图标
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可点击的链接
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
:::demo 可点击的链接
|
||||
```html
|
||||
<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`，`icon`和`title`的`slot`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
@@ -75,6 +84,7 @@ export default {
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -1,9 +1,49 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Checkbox组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -15,11 +55,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -31,13 +75,17 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox组
|
||||
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -60,13 +108,17 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用Checkbox组
|
||||
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -83,9 +135,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
@@ -110,6 +164,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox API
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
@@ -63,6 +64,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
@@ -13,26 +14,31 @@
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 无label的输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo 无label的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 监听change事件
|
||||
|
||||
监听组件的`change`事件。
|
||||
|
||||
:::demo 监听change事件
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
## ImagePreview 图片预览
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
## 安装
|
||||
|
||||
### ynpm安装
|
||||
|
||||
```shell
|
||||
npm i @youzan/zanui-vue -S
|
||||
```
|
||||
@@ -1,14 +1,45 @@
|
||||
l## Switch组件
|
||||
<style>
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<h1 class="page-title">Loading</h1>
|
||||
<h2 class="page-sub-title">Loading展示</h2>
|
||||
<div class="page-loading__example1">
|
||||
<zan-loading class="some-customized-class" style="padding-top: 50px; text-align: center;"></zan-loading>
|
||||
</div>
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
</div>
|
||||
</template>
|
||||
<h2 class="demo-sub-title">渐变浅色spinner</h2>
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
+37
-19
@@ -1,38 +1,55 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Panel 面板
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```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 class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
@@ -61,6 +78,7 @@
|
||||
</div>
|
||||
</zan-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -1,12 +1,45 @@
|
||||
<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
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -1,30 +1,54 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popup组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-button-1">
|
||||
<div class="zan-row">
|
||||
<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">
|
||||
<div class="zan-row">
|
||||
<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">
|
||||
<div class="zan-row">
|
||||
<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">
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
@@ -54,6 +78,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
## 快速上手
|
||||
|
||||
### 完整引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import ZanUI from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/index.css';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
```
|
||||
|
||||
### 按需引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { Button, Cell } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/button.css';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Cell.name, Cell);
|
||||
```
|
||||
+41
-10
@@ -1,8 +1,25 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1'
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -12,9 +29,12 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -26,12 +46,16 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -43,15 +67,19 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### radio组
|
||||
|
||||
:::demo 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>
|
||||
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@@ -62,9 +90,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
@@ -83,6 +113,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio API
|
||||
|
||||
|
||||
@@ -1,17 +1,4 @@
|
||||
## Search 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
```html
|
||||
<zan-search
|
||||
placeholder="商品名称"
|
||||
@search="goSearch"
|
||||
>
|
||||
</zan-search>
|
||||
```
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
@@ -19,7 +6,26 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Search 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -1,4 +1,93 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 只显示步骤条
|
||||
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Steps API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活的步骤，从0开始 | Number | '' | '' |
|
||||
| icon | 当前步骤的icon | string | '' | '' |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | string | '' | '' |
|
||||
| title | 当前步骤从标题 | string | '' | '' |
|
||||
| description | 当前步骤描述 | string | '' | '' |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
|
||||
@@ -1,33 +1,47 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@e wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## Switch组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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 class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="demo-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -50,6 +64,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -1,17 +1,52 @@
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag type="success" :plain="true">返现</zan-tag>
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="waterfall">
|
||||
<div
|
||||
@@ -62,6 +63,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="page-badge">
|
||||
<h1 class="page-title">Badge</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.page-badge {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b button {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@component-namespace zan {
|
||||
@b button-group {
|
||||
.zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
<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>
|
||||
@@ -1,62 +0,0 @@
|
||||
<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>
|
||||
@@ -1,66 +0,0 @@
|
||||
<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>
|
||||
@@ -1,44 +0,0 @@
|
||||
<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>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<h1 class="page-title">Loading</h1>
|
||||
<h2 class="page-sub-title">Loading展示</h2>
|
||||
<div class="page-loading__example1">
|
||||
<zan-loading class="some-customized-class" style="padding-top: 50px; text-align: center;"></zan-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,80 +0,0 @@
|
||||
<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>
|
||||
@@ -1,93 +0,0 @@
|
||||
<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>
|
||||
@@ -1,59 +0,0 @@
|
||||
<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>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="page-search">
|
||||
<h1 class="page-title">Search</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-search placeholder="商品名称" @search="goSearch">
|
||||
</zan-search>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.page-badge {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<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 class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, LOADING</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>
|
||||
@@ -1,52 +0,0 @@
|
||||
<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>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
+6
-3
@@ -4,11 +4,15 @@ import App from './ExamplesDocsApp';
|
||||
import navConfig from './nav.config.json';
|
||||
import routes from './router.config';
|
||||
import SideNav from './components/side-nav';
|
||||
import Mobile from './components/mobile';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import ZanUI from 'src/index.js';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('mobile', Mobile);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
|
||||
let routesConfig = routes(navConfig);
|
||||
routesConfig.push({
|
||||
@@ -38,7 +42,6 @@ router.afterEach(route => {
|
||||
Vue.nextTick(() => {
|
||||
document.body.scrollTop = indexScrollTop;
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+19
-2
@@ -1,5 +1,22 @@
|
||||
{
|
||||
"zh-CN": [
|
||||
{
|
||||
"name": "开发指南",
|
||||
"groups": [
|
||||
{
|
||||
"list": [
|
||||
{
|
||||
"path": "/install",
|
||||
"title": "安装"
|
||||
},
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"title": "快速上手"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "ZanUI组件",
|
||||
"groups": [
|
||||
@@ -113,8 +130,8 @@
|
||||
"title": "Waterfall"
|
||||
},
|
||||
{
|
||||
"path": "/img-preview",
|
||||
"title": "Img Preview"
|
||||
"path": "/image-preview",
|
||||
"title": "ImagePreview"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ const registerRoute = (navConfig, isExample) => {
|
||||
route.push({
|
||||
path: '/component' + page.path,
|
||||
component: function(resolve) {
|
||||
require([isExample ? `./examples${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
|
||||
require([isExample ? `./examples-dist${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user