From e241d92cd9befaf442c0cb248ad6cd29df3f90b4 Mon Sep 17 00:00:00 2001 From: cookfront Date: Thu, 30 Mar 2017 17:40:15 +0800 Subject: [PATCH] fix cell --- docs/examples-docs/button.md | 53 ++++++++++++++++++++++++++++------- docs/examples-docs/cell.md | 44 +++++++++++++++++++++++++---- docs/examples-docs/icon.md | 36 ++++++++++++++++++++++-- packages/button/src/button.js | 8 +++--- packages/cell/src/cell.vue | 21 ++++++++------ 5 files changed, 132 insertions(+), 30 deletions(-) diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md index c871c2884..513b2acf5 100644 --- a/docs/examples-docs/button.md +++ b/docs/examples-docs/button.md @@ -13,7 +13,39 @@ ## Button 按钮 -### 按钮功能 +### 使用指南 + +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了： + +```js +import Vue from 'vue'; +import { Button } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/button.css'; + +Vue.component(Button.name, Button); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`： + +```js +import { Button } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-button': Button + } +}; +``` + +### 代码演示 + +#### 按钮功能 只接受`primary`, `default`, `danger`三种类型，默认`default`。 @@ -33,7 +65,7 @@ ``` ::: -### 禁用状态 +#### 禁用状态 在组件上加上`disabled`属性即可，此时按钮不可点击。 @@ -47,7 +79,7 @@ ``` ::: -### 按钮尺寸 +#### 按钮尺寸 只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。 @@ -76,7 +108,7 @@ ``` ::: -### 自定义按钮标签 +#### 自定义按钮标签 按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。 @@ -90,7 +122,7 @@ ``` ::: -### loading按钮 +#### loading按钮 `loading`状态的按钮。 @@ -107,8 +139,9 @@ ``` ::: -### 页面底部操作按钮 -一般用于fixed在底部的区域或是popup弹层的底部，一般只使用`primary`和`normal`两种状态。 +#### 页面底部操作按钮 + +一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。 :::demo ```html @@ -135,7 +168,7 @@ | type | 按钮类型 | `string` | `default` | `primary`, `danger` | | size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` | | tag | 按钮标签 | `string` | `button` | `a`, `span`, ... | -| diabled | 按钮是否禁用 | `boolean` | false | | -| block | 按钮是否显示为块级元素 | `boolean` | false | | -| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | false | | +| diabled | 按钮是否禁用 | `boolean` | `false` | | +| block | 按钮是否显示为块级元素 | `boolean` | `false` | | +| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | `false` | | diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md index 11e05d070..d9a7450a6 100644 --- a/docs/examples-docs/cell.md +++ b/docs/examples-docs/cell.md @@ -18,7 +18,39 @@ export default { ## Cell 单元格 -### 基础用法 +### 使用指南 + +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Cell`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell`组件了： + +```js +import Vue from 'vue'; +import { Cell } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/cell.css'; + +Vue.component(Cell.name, Cell); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`： + +```js +import { Cell } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-cell': Cell + } +}; +``` + +### 代码演示 + +#### 基础用法 :::demo 基础用法 ```html @@ -29,7 +61,7 @@ export default { ``` ::: -### 带*号，标明必填 +#### 带*号，标明必填 传入`required`属性 @@ -41,7 +73,7 @@ export default { ``` ::: -### 标题带描述信息 +#### 标题带描述信息 传入`label`属性，属性值为描述信息的值。 @@ -54,7 +86,7 @@ export default { ``` ::: -### 带图标 +#### 带图标 传入`icon`属性。 @@ -67,7 +99,7 @@ export default { ``` ::: -### 可点击的链接 +#### 可点击的链接 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。 @@ -80,7 +112,7 @@ export default { ``` ::: -### 高级用法 +#### 高级用法 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。 diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md index f6c7f31e7..1d578e41e 100644 --- a/docs/examples-docs/icon.md +++ b/docs/examples-docs/icon.md @@ -14,9 +14,41 @@ ## Icon 图标 -### 基础用法 +### 使用指南 -设置`name`属性为对应的图标名称即可。 +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Icon`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Icon`组件了： + +```js +import Vue from 'vue'; +import { Icon } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/icon.css'; + +Vue.component(Icon.name, Icon); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`： + +```js +import { Icon } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-icon': Icon + } +}; +``` + +### 代码演示 + +#### 基础用法 + +设置`name`属性为对应的图标名称即可，以下目前有的所有图标： :::demo 所有Icon ```html diff --git a/packages/button/src/button.js b/packages/button/src/button.js index 1dc05107c..8a2bc0871 100644 --- a/packages/button/src/button.js +++ b/packages/button/src/button.js @@ -11,8 +11,8 @@ * 按钮 */ -const allowedSize = ['mini', 'small', 'normal', 'large']; -const allowedType = ['default', 'danger', 'primary']; +const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large']; +const ALLOWED_TYPE = ['default', 'danger', 'primary']; export default { name: 'zan-button', @@ -31,14 +31,14 @@ export default { type: String, default: 'default', validator(value) { - return allowedType.indexOf(value) > -1; + return ALLOWED_TYPE.indexOf(value) > -1; } }, size: { type: String, default: 'normal', validator(value) { - return allowedSize.indexOf(value) > -1; + return ALLOWED_SIZE.indexOf(value) > -1; } } }, diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue index aa10d51f0..26362c5c9 100644 --- a/packages/cell/src/cell.vue +++ b/packages/cell/src/cell.vue @@ -1,18 +1,23 @@