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

Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

Browse Source
This commit is contained in:
pangxie1991 2017-02-28 21:08:56 +08:00
commit edb63cac01
79 changed files with 12034 additions and 11179 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); install(window.Vue);
} }
export default { module.exports = {
install, install,
version: '{{version}}', version: '{{version}}',
{{list}} {{list}}

4
build/release.sh
View File

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

2
docs/ExamplesApp.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="examples-container"> <div class="examples-container">
<router-link class="page-back" v-if="visible" :to="'/'"> <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-link>
<router-view></router-view> <router-view></router-view>
</div> </div>

7228
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

18
docs/build/1.js vendored
View File

@ -5,13 +5,13 @@ webpackJsonp([1],{
/* styles */ /* styles */
__webpack_require__(249) __webpack_require__(253)
var Component = __webpack_require__(0)( var Component = __webpack_require__(0)(
/* script */ /* script */
__webpack_require__(175), __webpack_require__(175),
/* template */ /* template */
__webpack_require__(226), __webpack_require__(229),
/* scopeId */ /* scopeId */
null, null,
/* cssModules */ /* cssModules */
@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", {
value: true value: true
}); });
var _navConfig = __webpack_require__(22); var _navConfig = __webpack_require__(7);
var _navConfig2 = _interopRequireDefault(_navConfig); var _navConfig2 = _interopRequireDefault(_navConfig);
@ -95,10 +95,10 @@ exports.default = {
/***/ }), /***/ }),
/***/ 191: /***/ 192:
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(14)(); exports = module.exports = __webpack_require__(4)();
// imports // imports
@ -110,7 +110,7 @@ exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px
/***/ }), /***/ }),
/***/ 226: /***/ 229:
/***/ (function(module, exports) { /***/ (function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; 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: /***/ 253:
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag // style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles // load the styles
var content = __webpack_require__(191); var content = __webpack_require__(192);
if(typeof content === 'string') content = [[module.i, content, '']]; if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals; if(content.locals) module.exports = content.locals;
// add the styles to the DOM // 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 // Hot Module Replacement
if(false) { if(false) {
// When the styles change, update the <style> tags // 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

11858
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

2995
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

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

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

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

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

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

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

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

@ -31,9 +31,9 @@ export default {
### 基础用法 ### 基础用法
```html ```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> <script>
import { Dialog } from 'src/index'; import { Dialog } from 'src/index';

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

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

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

@ -5,28 +5,28 @@
### 基础用法 ### 基础用法
```html ```html
<z-panel title="标题" desc="标题描述" status="状态"> <zan-panel title="标题" desc="标题描述" status="状态">
<z-card <zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2" desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg"> thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title"> <div class="zan-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4> <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span> <span class="zan-card__price">¥ 2.00</span>
</div> </div>
<div class="z-card__row" slot="desc"> <div class="zan-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4> <h4 class="zan-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span> <span class="zan-card__num">x 2</span>
</div> </div>
<div class="z-card__footer" slot="footer"> <div class="zan-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button> <zan-button size="mini">按钮一</zan-button>
<z-button size="mini">按钮二</z-button> <zan-button size="mini">按钮二</zan-button>
</div> </div>
</z-card> </zan-card>
<div class="z-panel-sum"> <div class="zan-panel-sum">
合计：<span>¥ 1999.90</span> 合计：<span>¥ 1999.90</span>
</div> </div>
</z-panel> </zan-panel>
``` ```
### 高级用法 ### 高级用法
@ -34,32 +34,32 @@
使用具名`slot`自定义内容。 使用具名`slot`自定义内容。
```html ```html
<z-panel title="标题" desc="标题描述" status="状态"> <zan-panel title="标题" desc="标题描述" status="状态">
<z-card <zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2" desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg"> thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title"> <div class="zan-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4> <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span> <span class="zan-card__price">¥ 2.00</span>
</div> </div>
<div class="z-card__row" slot="desc"> <div class="zan-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4> <h4 class="zan-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span> <span class="zan-card__num">x 2</span>
</div> </div>
<div class="z-card__footer" slot="footer"> <div class="zan-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button> <zan-button size="mini">按钮一</zan-button>
<z-button size="mini">按钮二</z-button> <zan-button size="mini">按钮二</zan-button>
</div> </div>
</z-card> </zan-card>
<div class="z-panel-sum"> <div class="zan-panel-sum">
合计：<span>¥ 1999.90</span> 合计：<span>¥ 1999.90</span>
</div> </div>
<div class="z-panel-buttons" slot="footer"> <div class="zan-panel-buttons" slot="footer">
<z-button size="small">按钮一</z-button> <zan-button size="small">按钮一</zan-button>
<z-button size="small" type="danger">按钮二</z-button> <zan-button size="small" type="danger">按钮二</zan-button>
</div> </div>
</z-panel> </zan-panel>
``` ```
### API ### API

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

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

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

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

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

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

58
docs/examples/button.vue
View File

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

26
docs/examples/card.vue
View File

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

44
docs/examples/cell.vue
View File

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

10
docs/examples/dialog.vue
View File

@ -2,12 +2,12 @@
<div class="page-dialog"> <div class="page-dialog">
<h1 class="page-title">Dialog</h1> <h1 class="page-title">Dialog</h1>
<div class="z-button-1"> <div class="zan-button-1">
<z-button @click="handleAlertClick">点击我打开alert提示框</z-button> <zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
</div> </div>
<div class="z-button-1"> <div class="zan-button-1">
<z-button @click="handleConfirmClick">点击我打开confirm提示框</z-button> <zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@ export default {
@b dialog { @b dialog {
padding: 0 15px; padding: 0 15px;
.z-button-1 { .zan-button-1 {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }

22
docs/examples/field.vue
View File

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

68
docs/examples/panel.vue
View File

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

2
docs/examples/picker.vue
View File

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

44
docs/examples/popup.vue
View File

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

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

@ -0,0 +1,53 @@
<template>
<div class="page-radio">
<h1 class="page-title">Radio</h1>
<div class="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">与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>
.demo-wrapper {
padding: 0 15px;
.zan-radio {
margin: 10px 0;
}
}
</style>

6
docs/examples/switch.vue
View File

@ -5,15 +5,15 @@
<h2 class="page-sub-title">基础用法</h2> <h2 class="page-sub-title">基础用法</h2>
<div class="page-switch"> <div class="page-switch">
<div class="page-switch__wrapper"> <div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch> <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="page-switch__text">{{switchStateText}}</div> <div class="page-switch__text">{{switchStateText}}</div>
</div> </div>
<div class="page-switch__wrapper"> <div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch> <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="page-switch__text">ON, DISABLED</div> <div class="page-switch__text">ON, DISABLED</div>
</div> </div>
<div class="page-switch__wrapper"> <div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch> <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div> <div class="page-switch__text">OFF, DISABLED</div>
</div> </div>
</div> </div>

4
docs/examples/waterfall.vue
View File

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

4
docs/index.js
View File

@ -5,11 +5,7 @@ import navConfig from './nav.config.json';
import routes from './router.config'; import routes from './router.config';
import SideNav from './components/side-nav'; import SideNav from './components/side-nav';
import Mobile from './components/mobile'; import Mobile from './components/mobile';
import ZanUI from '../src/index';
import '../packages/zanui-css/src/index.css';
Vue.use(ZanUI);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.component('side-nav', SideNav); Vue.component('side-nav', SideNav);
Vue.component('mobile', Mobile); Vue.component('mobile', Mobile);

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@youzan/zanui-vue", "name": "@youzan/zanui-vue",
"version": "0.0.4", "version": "0.0.7",
"description": "有赞vue wap组件库", "description": "有赞vue wap组件库",
"main": "lib/zanui.js", "main": "lib/zanui.js",
"style": "lib/zanui-css/index.css", "style": "lib/zanui-css/index.css",

2
packages/button/package.json
View File

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

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

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

2
packages/card/package.json
View File

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

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

@ -1,13 +1,13 @@
<template> <template>
<div class="z-card"> <div class="zan-card">
<img :src="thumb" alt="" class="z-card__img"> <img :src="thumb" alt="" class="zan-card__img">
<div class="z-card__content" :class="{'is-center': !this.$slots.footer}"> <div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
<div class="z-card__info"> <div class="zan-card__info">
<slot name="title"> <slot name="title">
<h4 v-text="title" class="z-card__title"></h4> <h4 v-text="title" class="zan-card__title"></h4>
</slot> </slot>
<slot name="desc"> <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>
<slot name="tags"></slot> <slot name="tags"></slot>
</div> </div>
@ -18,7 +18,7 @@
<script> <script>
export default { export default {
name: 'z-card', name: 'zan-card',
props: { props: {
thumb: { thumb: {
type: String, 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", "version": "0.0.1",
"description": "cell component", "description": "cell component",
"main": "./index.js", "main": "./index.js",

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

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

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

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

2
packages/dialog/package.json
View File

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

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

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

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

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

4
packages/icon/package.json
View File

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

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

@ -1,10 +1,10 @@
<template> <template>
<i :class="'zenui-icon-' + name"></i> <i class="zanui-icon" :class="'zan-icon-' + name"></i>
</template> </template>
<script> <script>
export default { export default {
name: 'z-icon', name: 'zan-icon',
props: { props: {
name: String 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", "version": "0.0.1",
"description": "loading component", "description": "loading component",
"main": "./lib/index.js", "main": "./lib/index.js",

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

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

2
packages/panel/package.json
View File

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

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

@ -1,16 +1,16 @@
<template> <template>
<div class="z-panel"> <div class="zan-panel">
<div class="z-panel__header"> <div class="zan-panel__header">
<slot name="header"> <slot name="header">
<h4 class="z-panel__title" v-text="title"></h4> <h4 class="zan-panel__title" v-text="title"></h4>
<span class="z-panel__desc" v-if="desc" v-text="desc"></span> <span class="zan-panel__desc" v-if="desc" v-text="desc"></span>
<span class="z-panel__status" v-if="status" v-text="status"></span> <span class="zan-panel__status" v-if="status" v-text="status"></span>
</slot> </slot>
</div> </div>
<div class="z-panel__content"> <div class="zan-panel__content">
<slot></slot> <slot></slot>
</div> </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> <slot name="footer"></slot>
</div> </div>
</div> </div>
@ -18,7 +18,7 @@
<script> <script>
export default { export default {
name: 'z-panel', name: 'zan-panel',
props: { props: {
title: String, title: String,
desc: 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", "version": "0.0.1",
"description": "picker component", "description": "picker component",
"main": "./index.js", "main": "./index.js",

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

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

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

@ -1,10 +1,10 @@
<template> <template>
<div class="z-picker"> <div class="zan-picker">
<div class="z-picker__toolbar"> <div class="zan-picker__toolbar">
<slot> <slot>
</slot> </slot>
</div> </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 <picker-column
v-for="(item, index) in columns" v-for="(item, index) in columns"
v-model="values[index]" v-model="values[index]"
@ -14,7 +14,7 @@
:visible-item-count="visibleItemCount" :visible-item-count="visibleItemCount"
@change="columnValueChange"> @change="columnValueChange">
</picker-column> </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>
</div> </div>
</template> </template>
@ -25,7 +25,7 @@ import PickerColumn from './picker-column';
const DEFAULT_ITEM_HEIGHT = 44; const DEFAULT_ITEM_HEIGHT = 44;
export default { export default {
name: 'z-picker', name: 'zan-picker',
components: { components: {
PickerColumn PickerColumn
@ -89,7 +89,7 @@ export default {
* 获取对应索引的列的实例 * 获取对应索引的列的实例
*/ */
getColumn(index) { 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]; 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", "version": "0.0.1",
"description": "popup component", "description": "popup component",
"main": "./index.js", "main": "./index.js",

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

@ -1,6 +1,6 @@
<template> <template>
<transition :name="currentTransition"> <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> <slot></slot>
</div> </div>
</transition> </transition>
@ -10,7 +10,7 @@
import Popup from 'src/mixins/popup'; import Popup from 'src/mixins/popup';
export default { export default {
name: 'z-popup', name: 'zan-popup',
mixins: [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", "version": "0.0.1",
"description": "radio component", "description": "radio component",
"main": "./index.js", "main": "./index.js",

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

@ -1,15 +1,22 @@
<template> <template>
<div class="z-radio-group"> <div class="zan-radio-group">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'z-radio-group', name: 'zan-radio-group',
props: { props: {
value: [String, Number] value: {},
disabled: Boolean
},
watch: {
value(value) {
this.$emit('change', value);
}
} }
}; };
</script> </script>

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

@ -1,14 +1,23 @@
<template> <template>
<div <div
class="z-radio" class="zan-radio"
:class="{ :class="{
'is-disabled': disabled 'is-disabled': isDisabled
}"> }">
<span class="z-radio__input"> <span class="zan-radio__input">
<input type="radio" class="z-radio__control"> <input
<span class="z-radio__circle"></span> :value="name"
v-model="currentValue"
type="radio"
class="zan-radio__control"
:disabled="isDisabled">
<span class="zan-icon" :class="{
'zan-icon-checked': currentValue === name,
'zan-icon-check': currentValue !== name
}">
</span>
</span> </span>
<span class="z-radio__label"> <span class="zan-radio__label">
<slot></slot> <slot></slot>
</span> </span>
</div> </div>
@ -16,40 +25,55 @@
<script> <script>
export default { export default {
name: 'z-radio', name: 'zan-radio',
props: { props: {
disabled: Boolean, disabled: Boolean,
value: {}, value: {},
parentGroup: null name: [String, Number]
}, },
computed: { computed: {
isGroup() { isGroup() {
let parent = this.$parent; return !!this.findRadioGroup();
while (parent) {
if (parent.$options.name === 'z-radio-group') {
this.parentGroup = parent;
return true;
} else {
parent = parent.$parent;
}
}
return false;
}, },
model: { currentValue: {
get() { get() {
return this.isGroup ? this.parentGroup.value : this.value; return this.isGroup ? (this.parentGroup && this.parentGroup.value) : this.value;
}, },
set(val) { set(val) {
if (this.isGroup) { if (this.isGroup) {
this.parentGroup && this.parentGroup.$emit('input', val);
} else { } else {
this.$emit('input', val); this.$emit('input', val);
} }
} }
},
isDisabled() {
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 === 'zan-radio-group') {
this.parentGroup = parent;
break;
} else {
parent = parent.$parent;
}
}
return this.parentGroup;
} }
} }
}; };

2
packages/switch/package.json
View File

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

6
packages/switch/src/switch.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="z-switch" :class="switchState" @click="toggleState"> <div class="zan-switch" :class="switchState" @click="toggleState">
<div class="z-switch__node" :class="switchState"></div> <div class="zan-switch__node" :class="switchState"></div>
</div> </div>
</template> </template>
@ -18,7 +18,7 @@
* <o2-switch checked="true" disabled="false"></o2-switch> * <o2-switch checked="true" disabled="false"></o2-switch>
*/ */
export default { export default {
name: 'o2-switch', name: 'zan-switch',
props: { props: {
checked: { checked: {
type: Boolean, type: Boolean,

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

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

2
packages/zanui-css/src/button.css
View File

@ -1,6 +1,6 @@
@import "./common/var.css"; @import "./common/var.css";
@component-namespace z { @component-namespace zan {
@b button { @b button {
position: relative; position: relative;
padding: 0; padding: 0;

6
packages/zanui-css/src/button_group.css
View File

@ -5,16 +5,16 @@
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
} }
.z-button { .zan-button {
width: 100%; width: 100%;
} }
} }
@component-namespace z { @component-namespace zan {
@b button-group { @b button-group {
font-size: 0; font-size: 0;
> .z-button { > .zan-button {
margin-right: 10px; margin-right: 10px;
&::last-child { &::last-child {
margin-right: 0; margin-right: 0;

6
packages/zanui-css/src/card.css
View File

@ -1,6 +1,6 @@
@import "./mixins/ellipsis.css"; @import "./mixins/ellipsis.css";
@component-namespace z { @component-namespace zan {
@b card { @b card {
padding: 5px 15px; padding: 5px 15px;
background: #FAFAFA; background: #FAFAFA;
@ -27,7 +27,7 @@
display: table; display: table;
height: 90px; height: 90px;
.z-card__info { .zan-card__info {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
@ -80,7 +80,7 @@
right: 15px; right: 15px;
bottom: 5px; bottom: 5px;
.z-button { .zan-button {
margin-left: 5px; margin-left: 5px;
} }
} }

14
packages/zanui-css/src/cell.css
View File

@ -1,7 +1,7 @@
@import "./common/var.css"; @import "./common/var.css";
@import "./mixins/border_retina.css"; @import "./mixins/border_retina.css";
@component-namespace z { @component-namespace zan {
@b cell-group { @b cell-group {
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
@ -19,7 +19,7 @@
box-sizing: border-box; box-sizing: border-box;
line-height: 22px; line-height: 22px;
background-color: $c-white; background-color: $c-white;
color: #333; color: $c-black;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
@ -42,7 +42,7 @@
display: block; display: block;
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
color: #666; color: $c-gray-darker;
} }
@e value { @e value {
@ -52,14 +52,18 @@
@when link { @when link {
margin-right: 20px; margin-right: 20px;
} }
@when alone {
float: left;
}
} }
.zui-icon-arrow { .zan-icon-arrow {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; right: 10px;
transform: translateY(-50%); transform: translateY(-50%);
color: #999; color: $c-gray-dark;
font-size: 12px; font-size: 12px;
} }
} }

2
packages/zanui-css/src/common/var.css
View File

@ -33,7 +33,7 @@ $button-disabled-border-color: #cacaca;
:root{ :root{
/* z-index /* zan-index
-------------------------- */ -------------------------- */
--index-normal: 1; --index-normal: 1;
--index-top: 1000; --index-top: 1000;

6
packages/zanui-css/src/dialog.css
View File

@ -1,6 +1,6 @@
@import "./mixins/border_retina.css"; @import "./mixins/border_retina.css";
@component-namespace z { @component-namespace zan {
@b dialog-wrapper { @b dialog-wrapper {
position: absolute; position: absolute;
} }
@ -52,11 +52,11 @@
overflow: hidden; overflow: hidden;
@when twobtn { @when twobtn {
.z-dialog__btn { .zan-dialog__btn {
width: 50%; width: 50%;
} }
.z-dialog__cancel { .zan-dialog__cancel {
&::after { &::after {
@mixin border-retina (right); @mixin border-retina (right);
} }

16
packages/zanui-css/src/field.css
View File

@ -1,42 +1,42 @@
@import "./common/var.css"; @import "./common/var.css";
@import "./mixins/border_retina.css"; @import "./mixins/border_retina.css";
@component-namespace z { @component-namespace zan {
@b field { @b field {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@when textarea { @when textarea {
.z-field__control { .zan-field__control {
min-height: 60px; min-height: 60px;
} }
} }
@when nolabel { @when nolabel {
.z-cell__title { .zan-cell__title {
display: none; display: none;
} }
.z-cell__value { .zan-cell__value {
width: 100%; width: 100%;
padding-left: 0; padding-left: 0;
} }
} }
.z-cell__title, .zan-cell__title,
.z-cell__value { .zan-cell__value {
float: none; float: none;
box-sizing: border-box; box-sizing: border-box;
} }
.z-cell__title { .zan-cell__title {
width: 90px; width: 90px;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 0; left: 0;
} }
.z-cell__value { .zan-cell__value {
width: 100%; width: 100%;
padding-left: 90px; padding-left: 90px;
} }

40
packages/zanui-css/src/icon.css
View File

@ -9,10 +9,10 @@
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype') url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
} }
.zui-icon { .zan-icon {
display: inline-block; display: inline-block;
} }
.zui-icon::before { .zan-icon::before {
font-family: "zuiicon" !important; font-family: "zuiicon" !important;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -39,7 +39,7 @@
/* Font smoothing. That was taken from TWBS */ /* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -mozan-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */ /* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
@ -47,20 +47,20 @@
/* DO NOT EDIT! Generated by fount */ /* DO NOT EDIT! Generated by fount */
.zui-icon-album:before { content: '\e800'; } /* '' */ .zan-icon-album:before { content: '\e800'; } /* '' */
.zui-icon-arrow:before { content: '\e801'; } /* '' */ .zan-icon-arrow:before { content: '\e801'; } /* '' */
.zui-icon-camera:before { content: '\e802'; } /* '' */ .zan-icon-camera:before { content: '\e802'; } /* '' */
.zui-icon-certificate:before { content: '\e803'; } /* '' */ .zan-icon-certificate:before { content: '\e803'; } /* '' */
.zui-icon-check:before { content: '\e804'; } /* '' */ .zan-icon-check:before { content: '\e804'; } /* '' */
.zui-icon-checked:before { content: '\e805'; } /* '' */ .zan-icon-checked:before { content: '\e805'; } /* '' */
.zui-icon-close:before { content: '\e806'; } /* '' */ .zan-icon-close:before { content: '\e806'; } /* '' */
.zui-icon-gift:before { content: '\e807'; } /* '' */ .zan-icon-gift:before { content: '\e807'; } /* '' */
.zui-icon-home:before { content: '\e808'; } /* '' */ .zan-icon-home:before { content: '\e808'; } /* '' */
.zui-icon-location:before { content: '\e809'; } /* '' */ .zan-icon-location:before { content: '\e809'; } /* '' */
.zui-icon-message:before { content: '\e80a'; } /* '' */ .zan-icon-message:before { content: '\e80a'; } /* '' */
.zui-icon-send:before { content: '\e80b'; } /* '' */ .zan-icon-send:before { content: '\e80b'; } /* '' */
.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */ .zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
.zui-icon-sign:before { content: '\e80d'; } /* '' */ .zan-icon-sign:before { content: '\e80d'; } /* '' */
.zui-icon-store:before { content: '\e80e'; } /* '' */ .zan-icon-store:before { content: '\e80e'; } /* '' */
.zui-icon-topay:before { content: '\e80f'; } /* '' */ .zan-icon-topay:before { content: '\e80f'; } /* '' */
.zui-icon-tosend:before { content: '\e810'; } /* '' */ .zan-icon-tosend:before { content: '\e810'; } /* '' */

2
packages/zanui-css/src/loading.css
View File

@ -19,7 +19,7 @@
} }
} }
@component-namespace z { @component-namespace zan {
@b loading { @b loading {
height: 30px; height: 30px;
width: 30px; width: 30px;

2
packages/zanui-css/src/panel.css
View File

@ -1,4 +1,4 @@
@component-namespace z { @component-namespace zan {
@b panel { @b panel {
background: #fff; background: #fff;
border-top: 1px solid #E5E5E5; border-top: 1px solid #E5E5E5;

20
packages/zanui-css/src/picker.css
View File

@ -1,4 +1,4 @@
@component-namespace z { @component-namespace zan {
@b picker { @b picker {
overflow: hidden; overflow: hidden;
@ -11,26 +11,26 @@
overflow: hidden; overflow: hidden;
@m 1 { @m 1 {
.z-picker-column { .zan-picker-column {
width: 100%; width: 100%;
} }
} }
@m 2 { @m 2 {
.z-picker-column { .zan-picker-column {
width: 50%; width: 50%;
} }
} }
@m 3 { @m 3 {
.z-picker-column { .zan-picker-column {
width: 33.333%; width: 33.333%;
} }
} }
} }
} }
.z-picker-center-highlight { .zan-picker-center-highlight {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
left: 0; left: 0;
@ -40,26 +40,26 @@
pointer-events: none; pointer-events: none;
} }
.z-picker-center-highlight:before, .zan-picker-center-highlight:before,
.z-picker-center-highlight:after { .zan-picker-center-highlight:after {
content: ''; content: '';
position: absolute; position: absolute;
height: 1px; height: 1px;
width: 100%; width: 100%;
background-color: #eaeaea; background-color: #eaeaea;
display: block; display: block;
z-index: 15; zan-index: 15;
transform: scaleY(0.5); transform: scaleY(0.5);
} }
.z-picker-center-highlight:before { .zan-picker-center-highlight:before {
left: 0; left: 0;
top: 0; top: 0;
bottom: auto; bottom: auto;
right: auto; right: auto;
} }
.z-picker-center-highlight:after { .zan-picker-center-highlight:after {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: auto; right: auto;

2
packages/zanui-css/src/popup.css
View File

@ -1,4 +1,4 @@
@component-namespace z { @component-namespace zan {
@b modal { @b modal {
position: fixed; position: fixed;
width: 100%; width: 100%;

43
packages/zanui-css/src/radio.css
View File

@ -1,5 +1,44 @@
@component-namespace z { @import "./common/var.css";
@b radio {
@component-namespace zan {
@b radio {
@when disabled {
.zan-icon {
color: #d1dbe5;
}
}
@e input {
position: relative;
height: 22px;
margin-right: 15px;
}
@e control {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
opacity: 0;
margin: 0;
}
@e label {
line-height: 22px;
}
.zan-icon {
font-size: 22px;
line-height: 1;
}
.zan-icon-checked {
color: $c-green;
}
.zan-icon-check {
color: $c-gray-dark;
}
} }
} }

2
packages/zanui-css/src/steps.css
View File

@ -1,4 +1,4 @@
@component-namespace z { @component-namespace zan {
@b steps { @b steps {
color: red; color: red;
} }

2
packages/zanui-css/src/switch.css
View File

@ -1,4 +1,4 @@
@component-namespace z { @component-namespace zan {
@component switch { @component switch {
height: 29px; height: 29px;
width: 49px; width: 49px;

4
src/index.js
View File

@ -41,9 +41,9 @@ if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue); install(window.Vue);
} }
export default { module.exports = {
install, install,
version: '0.0.4', version: '0.0.7',
Button, Button,
Switch, Switch,
Field, Field,

5
src/mixins/popup/index.js
View File

@ -85,7 +85,6 @@ export default {
const dom = getDOM(this.$el); const dom = getDOM(this.$el);
const props = merge({}, this, options); const props = merge({}, this, options);
const overlay = props.overlay;
const zIndex = props.zIndex; const zIndex = props.zIndex;
// 如果属性中传入了`zIndex`，则覆盖`PopupManager`中对应的`zIndex` // 如果属性中传入了`zIndex`，则覆盖`PopupManager`中对应的`zIndex`
@ -94,7 +93,7 @@ export default {
} }
// 如果显示遮罩层 // 如果显示遮罩层
if (overlay) { if (this.overlay) {
if (this.closing) { if (this.closing) {
PopupManager.closeModal(this._popupId); PopupManager.closeModal(this._popupId);
this.closing = false; this.closing = false;
@ -102,7 +101,7 @@ export default {
PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom); PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom);
// 如果滚动时需要锁定 // 如果滚动时需要锁定
if (props.lockOnScroll) { if (this.lockOnScroll) {
// 将原来的`bodyOverflow`存起来 // 将原来的`bodyOverflow`存起来
if (!this.bodyOverflow) { if (!this.bodyOverflow) {
this.bodyOverflow = document.body.style.overflow; this.bodyOverflow = document.body.style.overflow;

2
src/mixins/popup/popup-manager.js
View File

@ -79,7 +79,7 @@ const PopupManager = {
const modalDom = getModal(); const modalDom = getModal();
addClass(modalDom, 'z-modal'); addClass(modalDom, 'zan-modal');
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) { if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
dom.parentNode.appendChild(modalDom); dom.parentNode.appendChild(modalDom);