Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue
This commit is contained in:
pangxie1991
@@ -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}}
|
||||||
|
|||||||
+2
-2
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Vendored
+6305
-923
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+9
-9
@@ -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
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+3542
-8316
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1522
-1473
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -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>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
+13
-13
@@ -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
|
||||||
|
|||||||
+22
-22
@@ -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
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|||||||
+11
-11
@@ -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
|
||||||
|
|||||||
+31
-31
@@ -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
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
|
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||||
```
|
```
|
||||||
|
|
||||||
### API
|
### API
|
||||||
|
|||||||
+17
-17
@@ -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 {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
|
|||||||
+29
-29
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+13
-13
@@ -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>
|
||||||
|
|
||||||
|
|||||||
+22
-22
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+11
-11
@@ -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>
|
||||||
|
|
||||||
|
|||||||
+34
-34
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
+22
-22
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
+1
-1
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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],
|
||||||
|
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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": {},
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
@@ -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];
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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],
|
||||||
|
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'; } /* '' */
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@component-namespace z {
|
@component-namespace zan {
|
||||||
@b loading {
|
@b loading {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
@component-namespace z {
|
@component-namespace zan {
|
||||||
@b modal {
|
@b modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
@component-namespace z {
|
@component-namespace zan {
|
||||||
@b steps {
|
@b steps {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
@component-namespace z {
|
@component-namespace zan {
|
||||||
@component switch {
|
@component switch {
|
||||||
height: 29px;
|
height: 29px;
|
||||||
width: 49px;
|
width: 49px;
|
||||||
|
|||||||
+2
-2
@@ -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,
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user