blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into hotfix/switch_loading_fix

Browse Source
This commit is contained in:
jiangruowei 2017-03-01 17:04:54 +08:00
commit ec168a9b9c
120 changed files with 50427 additions and 11015 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@ if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
module.exports = {
install,
version: '{{version}}',
{{list}}

4
build/release.sh
View File

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

8
components.json
View File

@ -14,5 +14,11 @@
"loading": "./packages/loading/index.js",
"panel": "./packages/panel/index.js",
"card": "./packages/card/index.js",
"steps": "./packages/steps/index.js"
"steps": "./packages/steps/index.js",
"tag": "./packages/tag/index.js",
"checkbox": "./packages/checkbox/index.js",
"checkbox-group": "./packages/checkbox-group/index.js",
"badge-group": "./packages/badge-group/index.js",
"badge": "./packages/badge/index.js",
"search": "./packages/search/index.js"
}

2
docs/ExamplesApp.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="examples-container">
<router-link class="page-back" v-if="visible" :to="'/'">
<i class="zui-icon zui-icon-arrow"></i>
<i class="zan-icon zan-icon-arrow"></i>
</router-link>
<router-view></router-view>
</div>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

7203
docs/build/0.js vendored
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

24
docs/build/1.js vendored
View File

@ -1,17 +1,17 @@
webpackJsonp([1],{
/***/ 165:
/***/ 169:
/***/ (function(module, exports, __webpack_require__) {
/* styles */
__webpack_require__(249)
__webpack_require__(263)
var Component = __webpack_require__(0)(
/* script */
__webpack_require__(175),
__webpack_require__(179),
/* template */
__webpack_require__(226),
__webpack_require__(237),
/* scopeId */
null,
/* cssModules */
@ -23,7 +23,7 @@ module.exports = Component.exports
/***/ }),
/***/ 175:
/***/ 179:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
var _navConfig = __webpack_require__(22);
var _navConfig = __webpack_require__(7);
var _navConfig2 = _interopRequireDefault(_navConfig);
@ -95,10 +95,10 @@ exports.default = {
/***/ }),
/***/ 191:
/***/ 197:
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(14)();
exports = module.exports = __webpack_require__(4)();
// imports
@ -110,7 +110,7 @@ exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px
/***/ }),
/***/ 226:
/***/ 237:
/***/ (function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@ -168,17 +168,17 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
/***/ }),
/***/ 249:
/***/ 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__(191);
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__(43)("1517d9c0", content, true);
var update = __webpack_require__(14)("1517d9c0", content, true);
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

11870
docs/build/zanui-docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/build/zanui-docs.js.map vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

3152
docs/build/zanui-examples.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/build/zanui-examples.js.map vendored
View File

File diff suppressed because one or more lines are too long

27
docs/examples-docs/badge.md Normal file
View File

@ -0,0 +1,27 @@
## Badge 组件
### 基础用法
```html
<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>
```
### z-badge-group API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | |
### z-badge API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| mark | badge的唯一key值 | string | '' | required |
| title | badge的文案标题 | string | '' | required |
| info | 当前badge的提示消息数量 | string | '' | |
| url | 跳转链接 | string | 全连接直接跳转或者hash | |

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

@ -5,15 +5,15 @@
只接受primary, default, danger三种类型，默认default。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button>default</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button>default</zan-button>
</div>
<div class="z-button-1">
<z-button type="primary">primary</z-button>
<div class="zan-button-1">
<zan-button type="primary">primary</zan-button>
</div>
<div class="z-button-1">
<z-button type="danger">danger</z-button>
<div class="zan-button-1">
<zan-button type="danger">danger</zan-button>
</div>
</div>
```
@ -21,9 +21,9 @@
### 禁用状态
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button disabled>diabled</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button disabled>diabled</zan-button>
</div>
</div>
```
@ -33,20 +33,20 @@
只接受large, normal, small, mini四种尺寸，默认normal。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button size="large">large</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button size="large">large</zan-button>
</div>
</div>
<div class="z-button-group" :style="{ width: '50%' }">
<div class="z-button-3">
<z-button type="primary">normal</z-button>
<div class="zan-button-group" :style="{ width: '50%' }">
<div class="zan-button-3">
<zan-button type="primary">normal</zan-button>
</div>
<div class="z-button-3">
<z-button size="small">small</z-button>
<div class="zan-button-3">
<zan-button size="small">small</zan-button>
</div>
<div class="z-button-3">
<z-button size="mini">mini</z-button>
<div class="zan-button-3">
<zan-button size="mini">mini</zan-button>
</div>
</div>
@ -57,9 +57,9 @@
按钮默认是button标签，可以使用tag属性修改为一个a标签。
```html
<div class="z-button-group">
<div class="z-button-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</div>
</div>
```
@ -69,10 +69,10 @@
一组按钮。
```html
<div class="z-button-group">
<z-button type="primary" size="small">确认付款</z-button>
<z-button size="small">确认收货</z-button>
<z-button size="small">取消订单</z-button>
<div class="zan-button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
```

26
docs/examples-docs/card.md
View File

@ -5,11 +5,11 @@
当没有底部按钮时，右侧内容会居中显示。
```html
<z-card
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</z-card>
</zan-card>
```
@ -18,23 +18,23 @@
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
```html
<z-card
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
<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="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</z-card>
</zan-card>
```
### API

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

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

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

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

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

@ -31,9 +31,9 @@ export default {
### 基础用法
```html
<z-button @click="handleAlertClick">alert</z-button>
<zan-button @click="handleAlertClick">alert</zan-button>
<z-button @click="handleConfirmClick">confirm</z-button>
<zan-button @click="handleConfirmClick">confirm</zan-button>
<script>
import { Dialog } from 'src/index';

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

@ -7,11 +7,11 @@
根据`type`属性显示不同的输入框。
```html
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
```
### 无label的输入框
@ -19,9 +19,9 @@
不传入`label`属性即可。
```html
<z-cell-group>
<z-field type="text" placeholder="请输入用户名"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
```
### 监听change事件
@ -29,9 +29,9 @@
监听组件的`change`事件。
```html
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
```
### API

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

@ -5,28 +5,28 @@
### 基础用法
```html
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
<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="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
<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="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</z-card>
<div class="z-panel-sum">
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</z-panel>
</zan-panel>
```
### 高级用法
@ -34,32 +34,32 @@
使用具名`slot`自定义内容。
```html
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
<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="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
<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="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</z-card>
<div class="z-panel-sum">
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="z-panel-buttons" slot="footer">
<z-button size="small">按钮一</z-button>
<z-button size="small" type="danger">按钮二</z-button>
<div class="zan-panel-buttons" slot="footer">
<zan-button size="small">按钮一</zan-button>
<zan-button size="small" type="danger">按钮二</zan-button>
</div>
</z-panel>
</zan-panel>
```
### API

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

@ -5,7 +5,7 @@
### 基础用法
```html
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
```
### API

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

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

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

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

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

@ -0,0 +1,28 @@
## Search 组件
### 基础用法
```html
<zan-search
placeholder="商品名称"
@search="goSearch"
>
</zan-search>
```
```javascript
export default {
methods: {
goSearch(value) {
alert(value)
}
}
};
```
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| placeholder | input的placeholder文案 | string | | |

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

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

18
docs/examples/badge.vue Normal file
View File

@ -0,0 +1,18 @@
<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>

58
docs/examples/button.vue
View File

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

26
docs/examples/card.vue
View File

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

44
docs/examples/cell.vue
View File

@ -3,39 +3,39 @@
<h1 class="page-title">Cell</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-cell-group>
<z-cell title="单元格1" value="单元格1内容"></z-cell>
<z-cell title="单元格2" value="单元格2内容"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">标题带描述信息</h2>
<z-cell-group>
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
<z-cell title="单元格2" label="描述信息"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">带图标</h2>
<z-cell-group>
<z-cell title="起码运动馆" icon="home"></z-cell>
<z-cell title="线下门店" icon="location"></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">可点击的链接</h2>
<z-cell-group>
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
<zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
<h2 class="page-sub-title">高级用法</h2>
<z-cell-group>
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
<template slot="title">
<span class="z-cell-text">起码运动馆</span>
<span class="zan-cell-text">起码运动馆</span>
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
</template>
</z-cell>
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
</z-cell-group>
</zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
</div>
</template>

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

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

13
docs/examples/dialog.vue
View File

@ -2,20 +2,19 @@
<div class="page-dialog">
<h1 class="page-title">Dialog</h1>
<div class="z-button-1">
<z-button @click="handleAlertClick">点击我打开alert提示框</z-button>
<div class="zan-button-1">
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
</div>
<div class="z-button-1">
<z-button @click="handleConfirmClick">点击我打开confirm提示框</z-button>
<div class="zan-button-1">
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
</div>
</div>
</template>
<script>
import ZanUI from 'src/index';
let { Dialog } = ZanUI;
import { Dialog } from 'src/index';
export default {
methods: {
@ -47,7 +46,7 @@ export default {
@b dialog {
padding: 0 15px;
.z-button-1 {
.zan-button-1 {
margin-bottom: 10px;
}
}

22
docs/examples/field.vue
View File

@ -3,21 +3,21 @@
<h1 class="page-title">Field</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
<h2 class="page-sub-title">无label的输入框</h2>
<z-cell-group>
<z-field type="text" placeholder="请输入用户名"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
<h2 class="page-sub-title">监听change事件</h2>
<z-cell-group>
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-cell-group>
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
</div>
</template>

68
docs/examples/panel.vue
View File

@ -3,61 +3,61 @@
<h1 class="page-title">Panel</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
<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="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
<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="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</z-card>
<div class="z-panel-sum">
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</z-panel>
</zan-panel>
<h2 class="page-sub-title">高级用法</h2>
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
<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="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
<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="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</z-card>
<div class="z-panel-sum">
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="z-panel-buttons" slot="footer">
<z-button size="small">按钮一</z-button>
<z-button size="small" type="danger">按钮二</z-button>
<div class="zan-panel-buttons" slot="footer">
<zan-button size="small">按钮一</zan-button>
<zan-button size="small" type="danger">按钮二</zan-button>
</div>
</z-panel>
</zan-panel>
</div>
</template>
<style>
.z-panel-sum {
.zan-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
@ -70,10 +70,10 @@
}
}
.z-panel-buttons {
.zan-panel-buttons {
text-align: right;
.z-button {
.zan-button {
margin-left: 5px;
}
}

2
docs/examples/picker.vue
View File

@ -3,7 +3,7 @@
<h1 class="page-title">Picker</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
</div>
</template>

44
docs/examples/popup.vue
View File

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

50
docs/examples/radio.vue
View File

@ -2,19 +2,36 @@
<div class="page-radio">
<h1 class="page-title">Radio</h1>
<h2 class="page-sub-title">基础用法</h2>
<z-radio name="1" v-model="radio1">单选框1</z-radio>
<z-radio name="2" v-model="radio1">单选框2</z-radio>
<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>
<z-radio name="1" v-model="radio2" disabled>未选中禁用</z-radio>
<z-radio name="2" v-model="radio2" disabled>选中且禁用</z-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>
<z-radio-group v-model="radio3">
<z-radio name="1">单选框1</z-radio>
<z-radio name="2">单选框2</z-radio>
</z-radio-group>
<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>
@ -24,14 +41,19 @@ export default {
return {
radio1: '1',
radio2: '2',
radio3: '1'
}
radio3: '1',
radio4: '1'
};
}
};
</script>
<style>
.page-radio {
.radio-demo-wrapper {
padding: 0 15px;
.zan-radio {
margin: 10px 0;
}
}
</style>

23
docs/examples/search.vue Normal file
View File

@ -0,0 +1,23 @@
<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>

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

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

4
docs/examples/waterfall.vue
View File

@ -10,8 +10,8 @@
waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400"
>
<div v-for="item in list" class="z-cell" style="text-align: center;">{{ item }}</div>
<!-- <z-loading v-if="loading" style="text-align: center;"></z-loading> -->
<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>

4
docs/nav.config.json
View File

@ -34,6 +34,10 @@
"path": "/steps",
"title": "Steps"
},
{
"path": "/tag",
"title": "Tag"
},
{
"path": "/badge",
"title": "Badge"

7
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@youzan/zanui-vue",
"version": "0.0.4",
"version": "0.0.7",
"description": "有赞vue wap组件库",
"main": "lib/zanui.js",
"style": "lib/zanui-css/index.css",
@ -11,7 +11,7 @@
],
"scripts": {
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
"dev": "npm run bootstrap && npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
"dev": "npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
"build:file": "node build/bin/build-entry.js",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
@ -39,6 +39,7 @@
"vue": "^2.1.8"
},
"devDependencies": {
"autoprefixer": "^6.7.5",
"babel-cli": "^6.14.0",
"babel-core": "^6.17.0",
"babel-eslint": "^6.1.2",
@ -50,6 +51,7 @@
"babel-plugin-transform-vue-jsx": "^3.3.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.0",
"cheerio": "^0.22.0",
"copy-webpack-plugin": "^4.0.1",
"cp-cli": "^1.0.2",
"cross-env": "^3.1.3",
@ -68,6 +70,7 @@
"gulp": "^3.9.1",
"gulp-cssmin": "^0.1.7",
"gulp-postcss": "^6.1.1",
"gulp-util": "^3.0.8",
"highlight.js": "^9.8.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",

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

@ -0,0 +1,3 @@
import BadgeGroup from '../badge/src/badge-group';
export default BadgeGroup;

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

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

26
packages/badge/README.md Normal file
View File

@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/badge/index.js Normal file
View File

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

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

@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}

25
packages/badge/src/badge-group.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="zan-badge-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-badge-group',
props: {
// 当前激活 tab 面板的 key
activeKey: {
type: [Number, String],
default: 0
}
},
data() {
return {
computedActiveKey: this.activeKey
};
}
};
</script>

40
packages/badge/src/badge.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<a class="zan-badge" :class="classNames" :href="url" @click="handleClick">
<div class="zan-badge__active"></div>
<div v-if="info" class="zan-badge__info">{{info}}</div>
{{title}}
</a>
</template>
<script>
export default {
name: 'zan-badge',
props: {
mark: {
type: [Number, String],
required: true
},
title: {
type: String,
required: true
},
url: {
type: String
},
info: {
type: String
}
},
methods: {
handleClick() {
this.$parent.computedActiveKey = this.mark;
}
},
computed: {
classNames() {
return {
'is-select': this.mark === this.$parent.computedActiveKey
};
}
}
};
</script>

2
packages/button/package.json
View File

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

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

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

2
packages/card/package.json
View File

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

14
packages/card/src/card.vue
View File

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

2
packages/cell/package.json
View File

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

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

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

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

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

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

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

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

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

26
packages/checkbox/README.md Normal file
View File

@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

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

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

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

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

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

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

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

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

2
packages/dialog/package.json
View File

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

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

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

2
packages/field/package.json
View File

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

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

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

4
packages/icon/package.json
View File

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

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

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

2
packages/loading/package.json
View File

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

2
packages/panel/package.json
View File

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

16
packages/panel/src/panel.vue
View File

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

2
packages/picker/package.json
View File

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

12
packages/picker/src/picker-column.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="z-picker-column" :class="classNames">
<div class="z-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
<div class="zan-picker-column" :class="classNames">
<div class="zan-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
<div
v-for="item in currentValues"
class="z-picker-column__item"
:class="{ 'z-picker-column__item--selected': item === currentValue }"
class="zan-picker-column__item"
:class="{ 'zan-picker-column__item--selected': item === currentValue }"
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
{{item}}
</div>
@ -19,7 +19,7 @@ import draggable from './draggable';
const DEFAULT_ITEM_HEIGHT = 44;
export default {
name: 'z-picker-column',
name: 'zan-picker-column',
props: {
/**
@ -168,7 +168,7 @@ export default {
startTop: event.pageY,
startTranslateTop: translateUtil.getElementTranslate(el).top
};
pickerItems = el.querySelectorAll('.z-picker-item'); // eslint-disable-line
pickerItems = el.querySelectorAll('.zan-picker-item'); // eslint-disable-line
},
drag: (event) => {

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

@ -1,10 +1,10 @@
<template>
<div class="z-picker">
<div class="z-picker__toolbar">
<div class="zan-picker">
<div class="zan-picker__toolbar">
<slot>
</slot>
</div>
<div class="z-picker__columns" :class="['z-picker__columns--' + columns.length]">
<div class="zan-picker__columns" :class="['zan-picker__columns--' + columns.length]">
<picker-column
v-for="(item, index) in columns"
v-model="values[index]"
@ -14,7 +14,7 @@
:visible-item-count="visibleItemCount"
@change="columnValueChange">
</picker-column>
<div class="z-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
<div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
</div>
</div>
</template>
@ -25,7 +25,7 @@ import PickerColumn from './picker-column';
const DEFAULT_ITEM_HEIGHT = 44;
export default {
name: 'z-picker',
name: 'zan-picker',
components: {
PickerColumn
@ -89,7 +89,7 @@ export default {
* 获取对应索引的列的实例
*/
getColumn(index) {
let children = this.$children.filter(child => child.$options.name === 'z-picker-column');
let children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
return children[index];
},

2
packages/popup/package.json
View File

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

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

@ -1,6 +1,6 @@
<template>
<transition :name="currentTransition">
<div v-show="currentValue" class="z-popup" :class="[position ? 'z-popup--' + position : '']">
<div v-show="currentValue" class="zan-popup" :class="[position ? 'zan-popup--' + position : '']">
<slot></slot>
</div>
</transition>
@ -10,7 +10,7 @@
import Popup from 'src/mixins/popup';
export default {
name: 'z-popup',
name: 'zan-popup',
mixins: [Popup],

2
packages/radio/package.json
View File

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

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

@ -1,12 +1,12 @@
<template>
<div class="z-radio-group">
<div class="zan-radio-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'z-radio-group',
name: 'zan-radio-group',
props: {
value: {},

46
packages/radio/src/radio.vue
View File

@ -1,31 +1,35 @@
<template>
<div
class="z-radio"
class="zan-radio"
:class="{
'is-disabled': isDisabled
}">
<span class="z-radio__input">
<span class="zan-radio__input">
<input
:value="name"
v-model="currentValue"
type="radio"
class="z-radio__control"
class="zan-radio__control"
:disabled="isDisabled">
<span class="zui-icon" :class="{
'zui-icon-checked': currentValue === name,
'zui-icon-check': currentValue !== name
<span class="zan-icon" :class="{
'zan-icon-checked': currentValue === name,
'zan-icon-check': currentValue !== name
}">
</span>
</span>
<span class="z-radio__label">
<span class="zan-radio__label">
<slot></slot>
</span>
</div>
</template>
<script>
import findParent from 'src/mixins/findParent';
export default {
name: 'z-radio',
name: 'zan-radio',
mixins: [findParent],
props: {
disabled: Boolean,
@ -35,16 +39,16 @@ export default {
computed: {
isGroup() {
return !!this.findRadioGroup()
return !!this.findParentByComponentName('zan-radio-group');
},
currentValue: {
get() {
return this.isGroup ? this.parentGroup.value : this.value;
return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
},
set(val) {
if (this.isGroup) {
if (this.isGroup && this.parentGroup) {
this.parentGroup.$emit('input', val);
} else {
this.$emit('input', val);
@ -53,28 +57,10 @@ export default {
},
isDisabled() {
return this.isGroup
return this.isGroup && this.parentGroup
? this.parentGroup.disabled || this.disabled
: this.disabled;
}
},
methods: {
findRadioGroup() {
if (this.parentGroup) return;
let parent = this.$parent;
while (parent) {
if (parent.$options.name === 'z-radio-group') {
this.parentGroup = parent;
break;
} else {
parent = parent.$parent;
}
}
return this.parentGroup;
}
}
};
</script>

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

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

26
packages/search/README.md Normal file
View File

@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/search/index.js Normal file
View File

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

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

@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}

55
packages/search/src/search.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="zan-search" :class="{ 'is-focus' : isFocus }">
<div class="zan-search__input-wrap">
<input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch">
<span class="zan-icon zan-icon-close" @click="handleClean"></span>
</div>
<div class="zan-search__cancel" :class="{ 'is-focus' : isFocus }" @click="handleBack">取消</div>
</div>
</template>
<script>
export default {
name: 'zan-search',
props: {
placeholder: {
type: String
}
},
data() {
return {
value: '',
focusStatus: false,
isFocus: false
};
},
directives: {
refocus: {
update: function(el, state) {
if (state.value) { el.focus(); }
}
}
},
methods: {
handleFocus() {
// 进入input焦点，出现close和取消
this.isFocus = true;
},
handleClean() {
// 点击close后清空vlaue后，再聚焦input框
this.value = '';
this.focusStatus = true;
},
handleBack() {
// 点击取消后，清空所有回复最初状态
this.value = '';
this.focusStatus = false;
this.isFocus = false;
},
handleSearch() {
// input输入回车后，发送回调
this.$emit('search', this.value);
}
}
};
</script>

2
packages/switch/package.json
View File

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

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

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

26
packages/tag/README.md Normal file
View File

@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/tag/index.js Normal file
View File

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

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

@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}

16
packages/tag/src/main.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<span class="zan-tag" :class="[type ? `zan-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
<slot></slot>
</span>
</template>
<script>
export default {
name: 'zan-tag',
props: {
type: String,
mark: Boolean,
plain: Boolean
}
};
</script>

2
packages/zanui-css/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@youzan/zanui-css",
"version": "0.0.4",
"version": "0.0.7",
"description": "zanui css.",
"main": "lib/index.css",
"style": "lib/index.css",

71
packages/zanui-css/src/badge.css Normal file
View File

@ -0,0 +1,71 @@
@import "./common/var.css";
@import "./mixins/border_retina.css";
@component-namespace zan {
@b badge-group {
position: relative;
width: 85px;
&::after {
@mixin border-retina (top);
}
}
@b badge {
display: block;
overflow: hidden;
position: relative;
padding: 20px 15px;
box-sizing: border-box;
line-height: 14px;
background-color: $c-background;
color: $c-gray-darker;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
@e active {
display: none;
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background-color: #FF4444;
}
@e info {
position: absolute;
top: 2px;
right: 2px;
font-size: 10px;
transform:scale(0.8);
text-align: center;
box-sizing: border-box;
padding: 0 6px;
min-width: 18px;
height: 18px;
line-height: 18px;
border-radius: 9px;
background-color: #FF4444;
color: $c-white;
}
@when select {
font-weight: bold;
color: $c-black;
background-color: $c-white;
.zan-badge__active {
display: block;
}
&::after {
@mixin border-retina (top);
@mixin border-retina (right);
@mixin border-retina (left);
}
}
&::after {
@mixin border-retina (bottom);
}
&:last-child {
&::after {
border-bottom: 0;
}
}
}
}

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