frontend / zui

Download as
Browse Code »

Commit a4a85439be8526638d0ddc8bf1d103dd971276d7

Authored by 刘汉宸
1 parent aea9b355
Exists in master

[修改] 完成文档

Showing 11 changed files with 261 additions and 76 deletions   Show diff stats
examples/views/docs/component/button.md
  Diff comments   View file @a4a8543
... ... @@ -108,11 +108,11 @@ export default {
108 108  
109 109 参数|说明|类型|可选值|默认值
110 110 -|-|-|-|-
111   -type | 按钮类型 | String | default、primary、secondary | default
112   -block | 块状按钮 | Boolean | true、false | false
113   -round | 圆角按钮 | Boolean | true、false | false
114   -square | 矩形按钮 | Boolean | true、false | false
115   -disabled | 按钮禁用 | Boolean | true、false | false
  111 +type | 按钮类型 | String | default,primary,secondary | default
  112 +block | 块状按钮 | Boolean | true,false | false
  113 +round | 圆角按钮 | Boolean | true,false | false
  114 +square | 矩形按钮 | Boolean | true,false | false
  115 +disabled | 按钮禁用 | Boolean | true,false | false
116 116  
117 117 ## Events 事件
118 118  
... ...
examples/views/docs/component/checkbox.md
  Diff comments   View file @a4a8543
... ... @@ -4,9 +4,7 @@
4 4  
5 5 ## 基础用法
6 6  
7   -说明
8   -
9   -::: snippet 示例
  7 +::: snippet `color`颜色，`size`大小
10 8  
11 9 ```html
12 10 <template>
... ... @@ -29,4 +27,18 @@ export default {
29 27 </script>
30 28 ```
31 29  
32   -:::
33 30 \ No newline at end of file
  31 +:::
  32 +
  33 +
  34 +## API
  35 +
  36 +## Attribute 属性
  37 +参数|说明|类型|可选值|默认值
  38 +-|-|-|-|-
  39 +value | 值 | Boolean | - | -
  40 +icon | 图标 | String | - | checkcircle
  41 +iconChecked | 选中图标 | String | - | radiobuttonunchecked
  42 +labelDisabled | 禁用label点击 | Boolean | - | false
  43 +disabled | 禁用 | Boolean | - | false
  44 +color | 颜色 | String | - | -
  45 +size | 大小 | String | - | -
34 46 \ No newline at end of file
... ...
examples/views/docs/component/icon.md
  Diff comments   View file @a4a8543
... ... @@ -87,11 +87,11 @@
87 87 -|-|-|-|-
88 88 name | 图标名 | String | - | -
89 89 fontFamily | 图标类型 | String | - | iconfont
90   -classPrefix | 图标前缀 | String | - | 'icon-'
  90 +classPrefix | 图标前缀 | String | - | icon-
91 91 size | 大小 | String | - | -
92 92 color | 颜色 | String | - | -
93 93 info | 角标内容 | Number, String | - | -
94   -dot | 标记点 | Boolean | - | -
  94 +dot | 标记点 | Boolean | true,false | -
95 95  
96 96 ## Events 事件
97 97  
... ...
examples/views/docs/component/loading.md
  Diff comments   View file @a4a8543
1 1 # Loading 加载
2 2  
3   -说明
  3 +## 加载类型
4 4  
5   -## 基础用法
  5 +::: snippet 设置`type`改变加载类型，默认为`circular`
6 6  
7   -说明
  7 +```html
  8 +<template>
  9 + <div>
  10 + <zui-loading type="circular"></zui-loading>
  11 + <zui-loading type="spinner"></zui-loading>
  12 + </div>
  13 +</template>
  14 +```
  15 +
  16 +:::
8 17  
9   -::: snippet 示例
  18 +## 颜色
  19 +
  20 +::: snippet 设置`color`改变颜色
10 21  
11 22 ```html
12 23 <template>
13 24 <div>
14   - <zui-loading></zui-loading>
15 25 <zui-loading color="red"></zui-loading>
16   - <zui-loading color="deepskyblue" type="loading"></zui-loading>
  26 + <zui-loading color="deepskyblue" type="spinner"></zui-loading>
  27 + </div>
  28 +</template>
  29 +```
  30 +
  31 +:::
  32 +
  33 +## 大小
  34 +
  35 +::: snippet 设置`size`改变大小
  36 +
  37 +```html
  38 +<template>
  39 + <div>
  40 + <zui-loading color="deepskyblue"></zui-loading>
  41 + <zui-loading size="3rem" color="red"></zui-loading>
  42 + </div>
  43 +</template>
  44 +```
  45 +
  46 +:::
  47 +
  48 +## 加载文案
  49 +
  50 +可以设置任意类型的加载文案
  51 +
  52 +::: snippet 设置`vertical`改变为垂直布局
  53 +
  54 +```html
  55 +<template>
  56 + <div>
17 57 <zui-loading>加载中...</zui-loading>
18 58 <zui-loading vertical>加载中...</zui-loading>
19   - <zui-loading vertical size="3rem" text-size="1rem">加载中...</zui-loading>
20 59 </div>
21 60 </template>
22   -
23   -<script>
24   -export default {
25   - data() {
26   - return {
27   - }
28   - },
29   -}
30   -</script>
31 61 ```
32 62  
33   -:::
34 63 \ No newline at end of file
  64 +:::
  65 +
  66 +## API
  67 +
  68 +## Attribute 属性
  69 +
  70 +参数|说明|类型|可选值|默认值
  71 +-|-|-|-|-
  72 +type | 类型 | String | - | circular
  73 +color | 颜色 | String | - | -
  74 +size | 大小 | Number,String | - | 2rem
  75 +vertical | 垂直 | Boolean | true,false | false
  76 +textSize | 文本大小 | Number,String | - | -
35 77 \ No newline at end of file
... ...
examples/views/docs/component/nav-bar.md
  Diff comments   View file @a4a8543
1 1 # NavBar 导航栏
2 2  
3   -导航栏
  3 +APP导航栏
4 4  
5 5 ## 基础用法
6 6  
7   -说明
  7 +::: snippet 设置`title`改变标题，设置`primary`改变为主色模式，设置`border`显示下边框
8 8  
9   -::: snippet 示例
  9 +```html
  10 +<template>
  11 + <div>
  12 + <zui-nav-bar title="显示边框" border></zui-nav-bar>
  13 + <zui-nav-bar title="默认"></zui-nav-bar>
  14 + <zui-nav-bar title="主色" primary></zui-nav-bar>
  15 + </div>
  16 +</template>
  17 +```
  18 +
  19 +:::
  20 +
  21 +## 左右按钮
  22 +
  23 +支持自定义左侧和右侧的按钮文字，且支持显示左侧返回按钮
  24 +
  25 +::: snippet 设置`leftText`改变左侧按钮文案，设置`rightText`改变右侧按钮文案
10 26  
11 27 ```html
12 28 <template>
13 29 <div>
14   - <zui-nav-bar title="则一速达" leftArrow></zui-nav-bar>
15   - <zui-nav-bar title="则一速达" leftText="返回" rightText="设置" primary></zui-nav-bar>
16   - <zui-nav-bar title="则一速达" leftText="返回" leftArrow></zui-nav-bar>
  30 + <zui-nav-bar title="返回按钮" leftArrow></zui-nav-bar>
  31 + <zui-nav-bar title="左侧文字" leftText="返回" primary></zui-nav-bar>
  32 + <zui-nav-bar title="右侧文字" rightText="设置"></zui-nav-bar>
17 33 </div>
18 34 </template>
  35 +```
  36 +
  37 +:::
  38 +
  39 +## 自定义按钮
19 40  
20   -<script>
21   -export default {
22   - data() {
23   - return {
24   - }
25   - },
26   -}
27   -</script>
  41 +支持插槽
  42 +
  43 +::: snippet 可以设置`left`、`title`、`right`插槽自定义按钮和标题内容
  44 +
  45 +```html
  46 +<template>
  47 + <div>
  48 + <zui-nav-bar title="则一速达">
  49 + <div slot="left"><zui-icon name="search"></zui-icon>搜索</div>
  50 + <div slot="title"><zui-icon name="dns"></zui-icon>标题</div>
  51 + <div slot="right"><zui-icon name="settings"></zui-icon>设置</div>
  52 + </zui-nav-bar>
  53 + </div>
  54 +</template>
28 55 ```
29 56  
30   -:::
31 57 \ No newline at end of file
  58 +:::
  59 +
  60 +## API
  61 +
  62 +## Attribute 属性
  63 +
  64 +参数|说明|类型|可选值|默认值
  65 +-|-|-|-|-
  66 +title | 标题 | String | - | -
  67 +leftIcon | 左侧图标 | String | - | return
  68 +leftText | 左侧文案 | String | - | -
  69 +rightText | 右侧文案 | String | - | -
  70 +leftArrow | 是否显示左侧箭头 | Boolean | - | false
  71 +fixed | 是否固定在顶部 | Boolean | - | false
  72 +border | 是否显示下边框 | Boolean | - | false
  73 +zIndex | z-index | Number,String | - | 1
  74 +primary | 是否为品牌色主题 | Boolean | - | false
  75 +
  76 +## Events 事件
  77 +
  78 +事件名称|说明|回调参数
  79 +-|-|-
  80 +click-left | 左侧按钮点击事件 | -
  81 +click-right | 右侧按钮点击事件 | -
32 82 \ No newline at end of file
... ...
examples/views/docs/component/popup.md
  Diff comments   View file @a4a8543
... ... @@ -4,16 +4,32 @@
4 4  
5 5 ## 基础用法
6 6  
7   -弹出框说明
  7 +弹出框内容样式需要自定义
8 8  
9   -::: snippet 示例
  9 +::: snippet 设置`position`改变弹出位置
10 10  
11 11 ```html
12 12 <template>
13 13 <div class="popup-demo">
14   - <zui-button @click="popupVisible = true">普通按钮</zui-button>
15   - <zui-popup v-model="popupVisible">
16   - 弹出框内容
  14 + <zui-button @click="popupVisible.center = true;">屏幕中弹出</zui-button>
  15 + <zui-button @click="popupVisible.left = true;">左侧弹出</zui-button>
  16 + <zui-button @click="popupVisible.right = true;">右侧弹出</zui-button>
  17 + <zui-button @click="popupVisible.top = true;">顶部弹出</zui-button>
  18 + <zui-button @click="popupVisible.bottom = true;">底部弹出</zui-button>
  19 + <zui-popup v-model="popupVisible.center">
  20 + <div class="popup-box">弹出框内容</div>
  21 + </zui-popup>
  22 + <zui-popup v-model="popupVisible.left" position="left">
  23 + <div class="popup-content">弹出框内容</div>
  24 + </zui-popup>
  25 + <zui-popup v-model="popupVisible.right" position="right">
  26 + <div class="popup-content">弹出框内容</div>
  27 + </zui-popup>
  28 + <zui-popup v-model="popupVisible.top" position="top">
  29 + <div class="popup-bar">弹出框内容</div>
  30 + </zui-popup>
  31 + <zui-popup v-model="popupVisible.bottom" position="bottom">
  32 + <div class="popup-bar">弹出框内容</div>
17 33 </zui-popup>
18 34 </div>
19 35 </template>
... ... @@ -22,7 +38,13 @@
22 38 export default {
23 39 data() {
24 40 return {
25   - popupVisible: false,
  41 + popupVisible: {
  42 + center: false,
  43 + left: false,
  44 + right: false,
  45 + top: false,
  46 + bottom: false,
  47 + },
26 48 }
27 49 },
28 50 }
... ... @@ -30,11 +52,53 @@ export default {
30 52  
31 53 <style lang="scss">
32 54 .popup-demo {
33   - height: 20vh;
34   - width: 400px;
  55 + height: 40vh;
  56 + width: 600px;
35 57 position: relative;
  58 + overflow: hidden;
  59 + background: #f5f5f5;
  60 + padding: 1rem;
  61 +}
  62 +.popup-demo .zui-button {
  63 + margin-right: 0.5rem;
  64 + margin-bottom: 1rem;
  65 +}
  66 +.popup-demo .popup-box {
  67 + background: #fff;
  68 + padding: 1rem;
  69 + border-radius: 0.25rem;
  70 +}
  71 +.popup-demo .popup-content {
  72 + background: #fff;
  73 + padding: 1rem;
  74 + height: 100%;
  75 + box-sizing: border-box;
  76 +}
  77 +.popup-demo .popup-bar {
  78 + background: #fff;
  79 + padding: 1rem;
36 80 }
37 81 </style>
38 82 ```
39 83  
40   -:::
41 84 \ No newline at end of file
  85 +:::
  86 +
  87 +## API
  88 +
  89 +## Attribute 属性
  90 +参数|说明|类型|可选值|默认值
  91 +-|-|-|-|-
  92 +v-model | 弹出层是否可见 | Boolean | - | false
  93 +has-mask | 是否有蒙层 | Boolean | - | true
  94 +mask-closable | 点击蒙层是否可关闭弹出层 | Boolean | - | true
  95 +position | 弹出层位置 | String | center, top, bottom, left, right | center
  96 +transition | 弹出层过渡动画 | String | fade, fa | -
  97 +
  98 +## Events 事件
  99 +
  100 +事件名称|说明|回调参数
  101 +-|-|-
  102 +beforeShow | 弹出层即将展示事件 | -
  103 +show | 弹出层展示事件 | -
  104 +beforeHide | 弹出层即将隐藏事件 | -
  105 +hide | 弹出层隐藏事件 | -
42 106 \ No newline at end of file
... ...
examples/views/docs/component/steps.md
  Diff comments   View file @a4a8543
1 1 # Steps 步骤条
2 2  
3   -说明
  3 +参考 <a href="https://didi.github.io/mand-mobile/#/zh-CN/docs/components/basic/steps" target="_blank">Mand Mobile - Steps</a>
4 4  
5 5 ## 基础用法
6 6  
7   -说明
8 7  
9   -::: snippet 示例
  8 +::: snippet 设置`steps`步骤
10 9  
11 10 ```html
12 11 <template>
... ... @@ -34,9 +33,7 @@ export default {
34 33  
35 34 ## 纵向展示
36 35  
37   -说明
38   -
39   -::: snippet 示例
  36 +::: snippet 设置`direction`为**vertical**
40 37  
41 38 ```html
42 39 <template>
... ... @@ -61,4 +58,15 @@ export default {
61 58 </script>
62 59 ```
63 60  
64   -:::
65 61 \ No newline at end of file
  62 +:::
  63 +
  64 +## API
  65 +
  66 +## Attribute 属性
  67 +参数|说明|类型|可选值|默认值
  68 +-|-|-|-|-
  69 +steps | 步骤信息数组 | Array<{name, text}> | - | -
  70 +current | 当前步骤/进度 | Number | 支持小数 | 0
  71 +direction | 展示方向 | String | horizontal, vertical | horizontal
  72 +transition | 进度变化动效 | Boolean | - | false
  73 +vertical-adaptive | 步骤高度自适应 | Boolean | - | false
... ...
examples/views/docs/component/tab-bar.md
  Diff comments   View file @a4a8543
1 1 # TabBar 标签栏
2 2  
3   -说明
4   -
5 3 ## 基础用法
6 4  
7   -说明
8   -
9   -::: snippet 示例
  5 +::: snippet 设置`items`配置标签项
10 6  
11 7 ```html
12 8 <template>
... ... @@ -33,4 +29,19 @@ export default {
33 29 </style>
34 30 ```
35 31  
36   -:::
37 32 \ No newline at end of file
  33 +:::
  34 +
  35 +## API
  36 +
  37 +## Attribute 属性
  38 +
  39 +参数|说明|类型|可选值|默认值
  40 +-|-|-|-|-
  41 +value | 值 | String, Number | - | -
  42 +items | 标签项 | Array | - | []
  43 +
  44 +## Events 事件
  45 +
  46 +事件名称|说明|回调参数
  47 +-|-|-
  48 +change | 切换标签项 | 名称, 数据, 下标
38 49 \ No newline at end of file
... ...
packages/loading/index.css
  Diff comments   View file @a4a8543
... ... @@ -3,6 +3,7 @@
3 3 color: #c8c9cc;
4 4 font-size: 0;
5 5 vertical-align: middle;
  6 + display: inline-block;
6 7 }
7 8 .zui-loading__spinner {
8 9 position: relative;
... ...
packages/navBar/index.css
  Diff comments   View file @a4a8543
... ... @@ -23,7 +23,7 @@
23 23 content: '';
24 24 position: absolute;
25 25 left: 0;
26   - top: 0;
  26 + bottom: 0;
27 27 background: #E2E4EA;
28 28 right: 0;
29 29 height: 1px;
... ...
packages/popup/index.vue
  Diff comments   View file @a4a8543
... ... @@ -51,18 +51,15 @@ export default {
51 51 default: function() {
52 52 switch (this.position) {
53 53 case 'bottom':
54   - return 'md-slide-up'
55   - /* istanbul ignore next */
  54 + return 'zui-slide-up'
56 55 case 'top':
57   - return 'md-slide-down'
58   - /* istanbul ignore next */
  56 + return 'zui-slide-down'
59 57 case 'left':
60   - return 'md-slide-right'
61   - /* istanbul ignore next */
  58 + return 'zui-slide-right'
62 59 case 'right':
63   - return 'md-slide-left'
  60 + return 'zui-slide-left'
64 61 default:
65   - return 'md-fade' // fade/fade-bounce/fade-slide/fade-zoom
  62 + return 'zui-fade'
66 63 }
67 64 },
68 65 },
... ... @@ -164,8 +161,8 @@ export default {
164 161 },
165 162 $_preventScroll: function(isBind) {
166 163 const handler = isBind ? 'addEventListener' : 'removeEventListener'
167   - const masker = this.$el.querySelector('.md-popup-mask')
168   - const boxer = this.$el.querySelector('.md-popup-box')
  164 + const masker = this.$el.querySelector('.zui-popup-mask')
  165 + const boxer = this.$el.querySelector('.zui-popup-box')
169 166 masker && masker[handler]('touchmove', this.$_preventDefault, false)
170 167 boxer && boxer[handler]('touchmove', this.$_preventDefault, false)
171 168 this.$_preventScrollExclude(isBind)
... ...