badge
+ lazyload
-
+
-
+
+
+
-
+
- + + +
-
+
-
+
+
+
loading
-
+
+
+
+
+
+
+```
+:::
+
+#### 带取消按钮的ActionSheet
+
+如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
+
+:::demo 带取消按钮的ActionSheet
+```html
+
+
+
+
-
-## ActionSheet 行动按钮
-
-### 基础用法
-
-:::demo 基础用法
-```html
-
-
```
:::
-### 带取消按钮的ActionSheet
+#### 带标题的ActionSheet
-:::demo 带取消按钮的ActionSheet
-```html
-
-
-```
-:::
-
-### 带标题的ActionSheet
+如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
:::demo 带标题的ActionSheet
```html
@@ -116,3 +229,4 @@ export default {
| subname | 二级标题 |
| className | 为对应列添加特殊的`class` |
| loading | 是否是`loading`状态 |
+| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index 9b572b20d..c0035bc63 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -1,7 +1,3 @@
-## Badge 徽章
-
-### 基础用法
-
+## Badge 徽章
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
+
+```js
+import Vue from 'vue';
+import { Badge, BadgeGroup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/badge.css';
+
+Vue.component(Badge.name, Badge);
+Vue.component(BadgeGroup.name, BadgeGroup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
+
+```js
+import { Badge, BadgeGroup } from '@youzan/zanui-vue';
+
+export default {
+ components: {
+ 'zan-badge': Badge,
+ 'zan-badge-group': BadgeGroup
+ }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下激活第一个`badge`。
+
:::demo 基础用法
```html
-
-
+
+```
+:::
+
+#### 选中某个badge
+
+如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
+
+:::demo 选中某个badge
+```html
+
+
```
:::
@@ -38,7 +89,6 @@
### z-badge API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
-| mark | badge的唯一key值 | `string` | `''` | `required` |
| title | badge的文案标题 | `string` | `''` | `required` |
-| info | 当前badge的提示消息数量 | `string` | `''` | |
-| url | 跳转链接 | `string` | 全连接直接跳转或者hash | |
+| info | 当前badge的提示消息 | `string` | `''` | |
+| url | 跳转链接 | `string` | 链接直接跳转或者hash | |
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 09cdb975f..624341f95 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -1,6 +1,38 @@
## Card 图文组件
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
+
+```js
+import Vue from 'vue';
+import { Card } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/card.css';
+
+Vue.component(Card.name, Card);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
+
+```js
+import { Card } from '@youzan/zanui-vue';
+
+export default {
+ components: {
+ 'zan-card': Card
+ }
+};
+```
+
+### 代码演示
+
+#### 基础用法
当没有底部按钮时，右侧内容会居中显示。
@@ -14,7 +46,7 @@
```
:::
-### 高级用法
+#### 高级用法
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index 24cf41720..9526fe72b 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -1,11 +1,3 @@
-
-
+```
+:::
+#### 消息确认
+
+用于确认消息，包含取消和确认按钮。
+
+:::demo 消息确认
+```html
+confirm
+
+
+
+## Lazyload 图片懒加载
+
+### 使用指南
+
+`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
+
+```js
+import Vue from 'vue';
+import { Lazyload } from '@youzan/zanui-vue';
+
+Vue.use(Lazyload, options);
+```
+
+### 代码演示
+
+#### 基础用法
+
+比如商品详情页很多图片的情况需要对图片进行懒加载，只需将`v-lazy`指令的值设置为你需要懒加载的图片。
+
+:::demo 基础用法
+```html
+
+
+
+
+```
+:::
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| loading | 加载时的图片 | `string` | | |
+| error | 错误时的图片 | `string` | | |
+| preload | 预加载高度的比例 | `string` | | |
+| attempt | 尝试次数 | `number` | `3` | |
+| listenEvents | 监听的事件 | `Array` | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` | |
+| adapter | 适配器 | `Object` | | |
+| filter | 图片url过滤 | `Object` | | |
+| lazyComponent | 是否能懒加载模块 | `boolean` | `false` | |
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index 5691d8fb8..f9ee38fff 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -1,49 +1,86 @@
## Loading 加载
-### 基础用法
+### 使用指南
-:::demo 基础用法
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
+
+```js
+import Vue from 'vue';
+import { Loading } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/loading.css';
+
+Vue.component(Loading.name, Loading);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
+
+```js
+import { Loading } from '@youzan/zanui-vue';
+
+export default {
+ components: {
+ 'zan-loading': Loading
+ }
+};
+```
+
+### 代码演示
+
+#### 渐变深色spinner
+
+:::demo 渐变深色spinner
```html
-
渐变深色spinner
-
-
- 渐变浅色spinner
-
-
- 单色spinner
-
-
- 单色spinner
-
-
+loading
+
+
+ 弹出actionsheet
+
+
+ 弹出带取消按钮的actionsheet
+
+
- 弹出actionsheet
-
-
- 弹出带取消按钮的actionsheet
-
--
+
-
+
+
+
-
+
- + + +
-
+
-
+
+
+
-
内容一
- 内容二
+ 内容二
内容三
内容四
内容五
+```
+:::
+
+#### 禁用tab
+
+在对应的`zan-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
+
+:::demo 禁用tab
+```html
+
+ 内容一
+ 内容二
+ 内容三
+ 内容四
+ 内容五
+
+
+
## Uploader 图片上传
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
+
+```js
+import Vue from 'vue';
+import { Uploader } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
+
+Vue.component(Uploader.name, Uploader);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
+
+```js
+import { Uploader } from '@youzan/zanui-vue';
+
+export default {
+ components: {
+ 'zan-uploader': Uploader
+ }
+};
+```
+
+### 代码演示
+
+#### 基础用法
:::demo 基础用法
```html
+ :after-read="logContent">
```
:::
-### 自定义上传图标
+
+#### 自定义上传图标
+
:::demo 自定义上传图标
```html
![]()
-
渐变深色spinner
-
-
- 渐变浅色spinner
-
-
- 单色spinner
-
-
- 单色spinner
-
-
+
+
```
:::
+#### 单色spinner
+
+:::demo
+```html
+{{ switchState2 ? ' ON' : 'OFF' }}
+
+
+
+```
+:::
+
+#### loading状态
+
+设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
+
+:::demo
+```html
+ON, LOADING
+
+OFF, LOADING
+
+
+```
+:::
+
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
-| checked | 开关状态 | `boolean` | `false` | `true`, `false` |
+| v-model | 开关状态 | `boolean` | `false` | `true`, `false` |
| loading | loading状态 | `boolean` | `false` | `true`, `false` |
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
+| onChange | 开关状态切换回调(默认则改变开关状态) | `function` | - | - |
diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
index d0424c8c8..5b9c2a7c5 100644
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -1,4 +1,3 @@
-
@@ -36,7 +51,43 @@ export default {
## Tab 标签
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
+
+```js
+import Vue from 'vue';
+import { Tab, Tabs } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/tab.css';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
+
+```js
+import { Tab, Tabs } from '@youzan/zanui-vue';
+
+export default {
+ components: {
+ 'zan-tab': Tab,
+ 'zan-tabs': Tabs
+ }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下是启用第一个`tab`。
:::demo 基础用法
```html
@@ -50,17 +101,36 @@ export default {
```
:::
-### 禁用用法
+#### active特定tab
-:::demo 禁用用法
+可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
+
+:::demo 基础用法
```html
-
+
@@ -45,7 +80,7 @@ export default {
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string` | `dataUrl` | `dataUrl`, `text` |
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean` | `false` | |
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
-| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function` | | |
+| after-read | 文件读完之后回调此函数，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function` | | |
### Slot
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index 7ba9035da..2155b2689 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -1,6 +1,34 @@
## Waterfall 瀑布流
-### 基础用法
+### 使用指南
+
+#### 全局注册
+
+`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
+
+```js
+import Vue from 'vue';
+import { Waterfall } from '@youzan/zanui-vue';
+
+Waterfall.install(Vue);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
+
+```js
+import { Waterfall } from '@youzan/zanui-vue';
+
+export default {
+ directives: {
+ WaterfallLower: Waterfall('lower'),
+ WaterfallUpper: Waterfall('upper')
+ }
+};
+```
+
+### 代码演示
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index 43f827f21..749f48819 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -1,5 +1,7 @@
-
+
{{info}}
{{title}}
@@ -9,11 +11,8 @@
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index 4725242e1..d42f10a6a 100644
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@@ -1,7 +1,7 @@
+
diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue
index b91ea033c..47b8f1cbb 100644
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@@ -68,7 +68,7 @@ export default {
if (this.lockOnScroll) {
setTimeout(() => {
- if (this.modal && this.bodyOverflow !== 'hidden') {
+ if (this.overlay && this.bodyOverflow !== 'hidden') {
document.body.style.overflow = this.bodyOverflow;
}
this.bodyOverflow = null;
diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index 21679c8e4..79b4c9107 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -3,9 +3,7 @@
- ![]()
+ ![]()
@@ -53,6 +51,22 @@ export default {
this.value = false;
},
+ handleLoad(event) {
+ const containerSize = this.$refs.previewContainer.getBoundingClientRect();
+ const ratio = containerSize.width / containerSize.height;
+ const target = event.currentTarget;
+ const targetRatio = target.width / target.height;
+
+ const centerClass = 'zan-image-preview__image--center';
+ const bigClass = 'zan-image-preview__image--big';
+
+ if (targetRatio > ratio) {
+ target.className += (' ' + centerClass);
+ } else {
+ target.className += (' ' + bigClass);
+ }
+ },
+
close() {
if (this.closing) return;
diff --git a/packages/lazyload/index.js b/packages/lazyload/index.js
index 6f6f48f56..3ce88f05a 100644
--- a/packages/lazyload/index.js
+++ b/packages/lazyload/index.js
@@ -1,79 +1,3 @@
-export default {
- install: function(Vue, options) {
- options = options || { fade: false, nohori: false };
- // scroll结束的时候触发scrollend事件
- var timer = null;
- var topValue = 0;
- var bodyEle = document.body;
- var scrollEnd = document.createEvent('HTMLEvents');
- scrollEnd.initEvent('scrollEnd', true, false);
- function enterFrame() {
- if (bodyEle.scrollTop === topValue) {
- window.cancelAnimationFrame(timer);
- window.dispatchEvent(scrollEnd);
- } else {
- topValue = bodyEle.scrollTop;
- }
- window.requestAnimationFrame(enterFrame);
- }
- document.addEventListener('scroll', function() {
- if (!timer) {
- timer = window.requestAnimationFrame(enterFrame);
- }
- }, true);
- // vue指令
- function update(value) {
- if (!value) {
- return;
- }
- var isFadeIn = this.modifiers.fade || options.fade;
- var isNoHori = this.modifiers.nohori || options.nohori;
- // 用css3来控制过渡效果
- if (isFadeIn) {
- this.el.style.opacity = 0;
- this.el.style.transition = 'opacity .3s';
- this.el.style.webkitTransition = 'opacity .3s';
- }
- var compute = function() {
- if (this.el === null) {
- return;
- }
- var rect = this.el.getBoundingClientRect();
- var vpWidth = document.head.parentNode.clientWidth;
- var vpHeight = document.head.parentNode.clientHeight;
- var loadImg = function() {
- this.el.src = value;
- this.el.addEventListener('load', onloadEnd);
- window.removeEventListener('scrollEnd', compute, true);
- window.removeEventListener('resize', compute, true);
- }.bind(this);
- if (this.el.src === value) return;
- if (isNoHori) {
- if (rect.bottom >= 0 && rect.top <= vpHeight) {
- loadImg();
- }
- } else if (rect.bottom >= 0 && rect.top <= vpHeight && rect.right >= 0 && rect.left <= vpWidth) {
- loadImg();
- }
- }.bind(this);
- var onload = function() {
- compute();
- this.el && this.el.removeEventListener('load', onload);
- window.addEventListener('scrollEnd', compute, true);
- window.addEventListener('resize', compute, true);
- }.bind(this);
- var onloadEnd = function() {
- if (this.el === null) {
- return;
- }
- if (isFadeIn) {
- this.el.style.opacity = 1;
- }
- this.el.removeEventListener('load', onloadEnd);
- }.bind(this);
- // 元素load触发事件
- this.el.addEventListener('load', onload);
- }
- Vue.directive('lazyload', update);
- }
-};
+import Lazyload from 'vue-lazyload';
+
+export default Lazyload;
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 7ad45059b..0222f480c 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -2,7 +2,7 @@
@@ -21,6 +21,11 @@
* @example
*
@@ -14,19 +21,21 @@
export default {
name: 'zan-search',
+
components: {
ZanIcon
},
+
props: {
- placeholder: {
- type: String
- }
+ placeholder: String
},
+
watch: {
value(val) {
this.$emit('change', val);
}
},
+
data() {
return {
value: '',
@@ -34,32 +43,47 @@
isFocus: false
};
},
+
directives: {
refocus: {
update: function(el, state) {
- if (state.value) { el.focus(); }
+ if (state.value) {
+ el.focus();
+ }
}
}
},
+
methods: {
+ /**
+ * 进入input焦点，出现close和取消
+ */
handleFocus() {
- // 进入input焦点，出现close和取消
this.isFocus = true;
},
+
+ /**
+ * 点击close后清空vlaue后，再聚焦input框
+ */
handleClean() {
- // 点击close后清空vlaue后，再聚焦input框
this.value = '';
this.focusStatus = true;
},
+
+ /**
+ * 点击取消后，清空所有回复最初状态
+ */
handleBack() {
- // 点击取消后，清空所有回复最初状态
this.value = '';
this.focusStatus = false;
this.isFocus = false;
this.$emit('cancel');
},
+
+ /**
+ * input输入回车后，发送回调
+ */
handleSearch() {
- // input输入回车后，发送回调
this.$emit('search', this.value);
}
}
diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue
index 336f91c9f..50607528a 100644
--- a/packages/steps/src/steps.vue
+++ b/packages/steps/src/steps.vue
@@ -1,7 +1,11 @@
-
-
+
+
+
+
+