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 | 11 | ```html |
| 12 | 12 | <template> |
| 13 | 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 | 19 | <zui-cell> |
| 17 | 20 | <div slot="title" class="aui-list-item-title aui-font-size-16"> |
| 18 | 21 | 开启微信通知 |
| ... | ... | @@ -38,7 +41,7 @@ export default { |
| 38 | 41 | |
| 39 | 42 | <style> |
| 40 | 43 | .list { |
| 41 | - width: 300px; | |
| 44 | + width: 400px; | |
| 42 | 45 | } |
| 43 | 46 | </style> |
| 44 | 47 | ``` | ... | ... |
packages/cell/index.css
| ... | ... | @@ -3,6 +3,7 @@ |
| 3 | 3 | display: -webkit-box; |
| 4 | 4 | display: -webkit-flex; |
| 5 | 5 | display: flex; |
| 6 | + align-items: center; | |
| 6 | 7 | box-sizing: border-box; |
| 7 | 8 | width: 100%; |
| 8 | 9 | padding: 10px 16px; |
| ... | ... | @@ -29,6 +30,13 @@ |
| 29 | 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 | 40 | .zui-cell:not(:last-child)::after { |
| 33 | 41 | position: absolute; |
| 34 | 42 | box-sizing: border-box; |
| ... | ... | @@ -55,4 +63,11 @@ |
| 55 | 63 | text-align: right; |
| 56 | 64 | vertical-align: middle; |
| 57 | 65 | word-wrap: break-word; |
| 58 | -} | |
| 59 | 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 | 3 | <div v-if="$slots.icon" class="zui-cell__left-icon"> |
| 4 | 4 | <slot name="icon"></slot> |
| 5 | 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 | 7 | <div v-if="$slots.title" class="zui-cell__title"> |
| 8 | 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 | 24 | </div> |
| 10 | - <div v-else-if="title" class="zui-cell__title">{{ title }}</div> | |
| 11 | 25 | <div v-if="$slots.default" class="zui-cell__value"> |
| 12 | 26 | <slot></slot> |
| 13 | 27 | </div> |
| ... | ... | @@ -26,6 +40,7 @@ export default { |
| 26 | 40 | icon: String, |
| 27 | 41 | title: String, |
| 28 | 42 | value: String, |
| 43 | + label: String, | |
| 29 | 44 | isLink: Boolean, |
| 30 | 45 | rightIcon: String, |
| 31 | 46 | }, | ... | ... |
packages/icon/index.css
packages/icon/index.vue
| ... | ... | @@ -20,14 +20,8 @@ export default { |
| 20 | 20 | type: String, |
| 21 | 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 | 25 | info: [Number, String] |
| 32 | 26 | }, |
| 33 | 27 | computed: { | ... | ... |
packages/tag/index.vue
| ... | ... | @@ -67,8 +67,8 @@ export default { |
| 67 | 67 | sizeStyle: {} |
| 68 | 68 | }; |
| 69 | 69 | }, |
| 70 | - mounted() { | |
| 71 | - this.$nextTick(() => { | |
| 70 | + mounted: function() { | |
| 71 | + this.$nextTick(function() { | |
| 72 | 72 | if (this.shape === "circle") { |
| 73 | 73 | var radius = this.$el.offsetHeight / 2; |
| 74 | 74 | this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px"); | ... | ... |