Commit 1ac52e8accce7e072562561f841412aaaa3d804e
1 parent
c5aea77d
Exists in
master
[修改] Icon组件支持dot
Showing
3 changed files
with
10 additions
and
2 deletions
Show diff stats
examples/views/docs/component/icon.md
| @@ -14,6 +14,7 @@ | @@ -14,6 +14,7 @@ | ||
| 14 | <zui-icon name="attachmoney" /> | 14 | <zui-icon name="attachmoney" /> |
| 15 | <zui-icon name="accountbalancewallet" size="2rem" info="1" /> | 15 | <zui-icon name="accountbalancewallet" size="2rem" info="1" /> |
| 16 | <zui-icon name="trendingup" size="2rem" color="red" /> | 16 | <zui-icon name="trendingup" size="2rem" color="red" /> |
| 17 | + <zui-icon name="dns" size="2rem" dot /> | ||
| 17 | </div> | 18 | </div> |
| 18 | </template> | 19 | </template> |
| 19 | 20 |
packages/icon/index.css
| @@ -29,4 +29,10 @@ | @@ -29,4 +29,10 @@ | ||
| 29 | transform: translate(50%, -50%); | 29 | transform: translate(50%, -50%); |
| 30 | -webkit-transform-origin: 100%; | 30 | -webkit-transform-origin: 100%; |
| 31 | transform-origin: 100%; | 31 | transform-origin: 100%; |
| 32 | +} | ||
| 33 | + | ||
| 34 | +.zui-info.dot { | ||
| 35 | + height: 14px; | ||
| 36 | + width: 14px; | ||
| 37 | + min-width: 14px !important; | ||
| 32 | } | 38 | } |
| 33 | \ No newline at end of file | 39 | \ No newline at end of file |
packages/icon/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <i class="zui-icon" :class="classRender" :style="styleRender" @click="onClick"> | 2 | <i class="zui-icon" :class="classRender" :style="styleRender" @click="onClick"> |
| 3 | - <div v-if="info" class="zui-info">{{ info }}</div> | 3 | + <div v-if="info || dot" class="zui-info" :class="{ dot: dot }">{{ info }}</div> |
| 4 | </i> | 4 | </i> |
| 5 | </template> | 5 | </template> |
| 6 | 6 | ||
| @@ -22,7 +22,8 @@ export default { | @@ -22,7 +22,8 @@ export default { | ||
| 22 | }, | 22 | }, |
| 23 | size: String, | 23 | size: String, |
| 24 | color: String, | 24 | color: String, |
| 25 | - info: [Number, String] | 25 | + info: [Number, String], |
| 26 | + dot: Boolean, | ||
| 26 | }, | 27 | }, |
| 27 | computed: { | 28 | computed: { |
| 28 | classRender: function() { | 29 | classRender: function() { |