Commit 7825cfdd83a39b65667720f74325f9f8e0dfdbba
1 parent
e545066c
Exists in
master
[修改] 单元格增加描述，调整单元格对齐
Showing
6 changed files
with
43 additions
and
18 deletions
Show diff stats
examples/views/docs/component/cell.md
| @@ -11,8 +11,11 @@ | @@ -11,8 +11,11 @@ | ||
| 11 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| 13 | <div class="list"> | 13 | <div class="list"> |
| 14 | - <zui-cell title="单元格" value="内容"></zui-cell> | ||
| 15 | - <zui-cell title="可点击" value="内容" is-link></zui-cell> | 14 | + <zui-cell title="单元格" value="内容" label="描述"></zui-cell> |
| 15 | + <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell> | ||
| 16 | + <zui-cell title="可点击" value="内容" label="描述" is-link> | ||
| 17 | + <zui-icon slot="icon" name="attachmoney" size="2rem" color="red" /> | ||
| 18 | + </zui-cell> | ||
| 16 | <zui-cell> | 19 | <zui-cell> |
| 17 | <div slot="title" class="aui-list-item-title aui-font-size-16"> | 20 | <div slot="title" class="aui-list-item-title aui-font-size-16"> |
| 18 | 开启微信通知 | 21 | 开启微信通知 |
| @@ -38,7 +41,7 @@ export default { | @@ -38,7 +41,7 @@ export default { | ||
| 38 | 41 | ||
| 39 | <style> | 42 | <style> |
| 40 | .list { | 43 | .list { |
| 41 | - width: 300px; | 44 | + width: 400px; |
| 42 | } | 45 | } |
| 43 | </style> | 46 | </style> |
| 44 | ``` | 47 | ``` |
packages/cell/index.css
| @@ -3,6 +3,7 @@ | @@ -3,6 +3,7 @@ | ||
| 3 | display: -webkit-box; | 3 | display: -webkit-box; |
| 4 | display: -webkit-flex; | 4 | display: -webkit-flex; |
| 5 | display: flex; | 5 | display: flex; |
| 6 | + align-items: center; | ||
| 6 | box-sizing: border-box; | 7 | box-sizing: border-box; |
| 7 | width: 100%; | 8 | width: 100%; |
| 8 | padding: 10px 16px; | 9 | padding: 10px 16px; |
| @@ -29,6 +30,13 @@ | @@ -29,6 +30,13 @@ | ||
| 29 | margin-left: 5px; | 30 | margin-left: 5px; |
| 30 | } | 31 | } |
| 31 | 32 | ||
| 33 | +.zui-cell__left-icon, .zui-cell__right-icon { | ||
| 34 | + min-width: 1em; | ||
| 35 | + height: 24px; | ||
| 36 | + font-size: 16px; | ||
| 37 | + line-height: 24px; | ||
| 38 | +} | ||
| 39 | + | ||
| 32 | .zui-cell:not(:last-child)::after { | 40 | .zui-cell:not(:last-child)::after { |
| 33 | position: absolute; | 41 | position: absolute; |
| 34 | box-sizing: border-box; | 42 | box-sizing: border-box; |
| @@ -55,4 +63,11 @@ | @@ -55,4 +63,11 @@ | ||
| 55 | text-align: right; | 63 | text-align: right; |
| 56 | vertical-align: middle; | 64 | vertical-align: middle; |
| 57 | word-wrap: break-word; | 65 | word-wrap: break-word; |
| 58 | -} | ||
| 59 | \ No newline at end of file | 66 | \ No newline at end of file |
| 67 | +} | ||
| 68 | + | ||
| 69 | +.zui-cell__label { | ||
| 70 | + margin-top: 3px; | ||
| 71 | + color: #969799; | ||
| 72 | + font-size: 12px; | ||
| 73 | + line-height: 18px; | ||
| 74 | +} |
packages/cell/index.vue
| @@ -3,11 +3,25 @@ | @@ -3,11 +3,25 @@ | ||
| 3 | <div v-if="$slots.icon" class="zui-cell__left-icon"> | 3 | <div v-if="$slots.icon" class="zui-cell__left-icon"> |
| 4 | <slot name="icon"></slot> | 4 | <slot name="icon"></slot> |
| 5 | </div> | 5 | </div> |
| 6 | - <div v-else-if="icon" class="zui-cell__left-icon"></div> | 6 | + <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon> |
| 7 | <div v-if="$slots.title" class="zui-cell__title"> | 7 | <div v-if="$slots.title" class="zui-cell__title"> |
| 8 | <slot name="title"></slot> | 8 | <slot name="title"></slot> |
| 9 | + <div v-if="$slots.label" class="zui-cell__label"> | ||
| 10 | + <slot name="label"></slot> | ||
| 11 | + </div> | ||
| 12 | + <div v-else-if="label" class="zui-cell__label"> | ||
| 13 | + {{ label }} | ||
| 14 | + </div> | ||
| 15 | + </div> | ||
| 16 | + <div v-else-if="title" class="zui-cell__title"> | ||
| 17 | + {{ title }} | ||
| 18 | + <div v-if="$slots.label" class="zui-cell__label"> | ||
| 19 | + <slot name="label"></slot> | ||
| 20 | + </div> | ||
| 21 | + <div v-else-if="label" class="zui-cell__label"> | ||
| 22 | + {{ label }} | ||
| 23 | + </div> | ||
| 9 | </div> | 24 | </div> |
| 10 | - <div v-else-if="title" class="zui-cell__title">{{ title }}</div> | ||
| 11 | <div v-if="$slots.default" class="zui-cell__value"> | 25 | <div v-if="$slots.default" class="zui-cell__value"> |
| 12 | <slot></slot> | 26 | <slot></slot> |
| 13 | </div> | 27 | </div> |
| @@ -26,6 +40,7 @@ export default { | @@ -26,6 +40,7 @@ export default { | ||
| 26 | icon: String, | 40 | icon: String, |
| 27 | title: String, | 41 | title: String, |
| 28 | value: String, | 42 | value: String, |
| 43 | + label: String, | ||
| 29 | isLink: Boolean, | 44 | isLink: Boolean, |
| 30 | rightIcon: String, | 45 | rightIcon: String, |
| 31 | }, | 46 | }, |
packages/icon/index.css
| 1 | .zui-icon { | 1 | .zui-icon { |
| 2 | position: relative; | 2 | position: relative; |
| 3 | display: inline-block; | 3 | display: inline-block; |
| 4 | - font: normal normal normal 14px/1 "iconfont"; | ||
| 5 | - font-size: inherit; | ||
| 6 | text-rendering: auto; | 4 | text-rendering: auto; |
| 7 | -webkit-font-smoothing: antialiased; | 5 | -webkit-font-smoothing: antialiased; |
| 8 | } | 6 | } |
packages/icon/index.vue
| @@ -20,14 +20,8 @@ export default { | @@ -20,14 +20,8 @@ export default { | ||
| 20 | type: String, | 20 | type: String, |
| 21 | default: 'icon-' | 21 | default: 'icon-' |
| 22 | }, | 22 | }, |
| 23 | - size: { | ||
| 24 | - type: String, | ||
| 25 | - default: 'inherit' | ||
| 26 | - }, | ||
| 27 | - color: { | ||
| 28 | - type: String, | ||
| 29 | - default: 'inherit' | ||
| 30 | - }, | 23 | + size: String, |
| 24 | + color: String, | ||
| 31 | info: [Number, String] | 25 | info: [Number, String] |
| 32 | }, | 26 | }, |
| 33 | computed: { | 27 | computed: { |
packages/tag/index.vue
| @@ -67,8 +67,8 @@ export default { | @@ -67,8 +67,8 @@ export default { | ||
| 67 | sizeStyle: {} | 67 | sizeStyle: {} |
| 68 | }; | 68 | }; |
| 69 | }, | 69 | }, |
| 70 | - mounted() { | ||
| 71 | - this.$nextTick(() => { | 70 | + mounted: function() { |
| 71 | + this.$nextTick(function() { | ||
| 72 | if (this.shape === "circle") { | 72 | if (this.shape === "circle") { |
| 73 | var radius = this.$el.offsetHeight / 2; | 73 | var radius = this.$el.offsetHeight / 2; |
| 74 | this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px"); | 74 | this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px"); |