¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="value"> |
| | | <i class="el-icon-loading" v-if="data == null"></i> |
| | | <slot v-else>{{getValue()}}{{suffix}}</slot> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: 'Value', |
| | | props: { |
| | | data: { |
| | | type: Object |
| | | }, |
| | | prop: { |
| | | type: String |
| | | }, |
| | | suffix: { |
| | | type: String |
| | | }, |
| | | handler: { |
| | | type: Function |
| | | } |
| | | }, |
| | | methods: { |
| | | /** |
| | | * è·åå¼ |
| | | * |
| | | * @returns {string} |
| | | */ |
| | | getValue () { |
| | | if (this.data == null) { |
| | | return '' |
| | | } |
| | | if (this.prop == null) { |
| | | return this.data |
| | | } |
| | | const props = this.prop.split('.') |
| | | let i = 0 |
| | | let value = this.data |
| | | while (i < props.length) { |
| | | value = value[props[i]] |
| | | i++ |
| | | } |
| | | if (this.handler == null) { |
| | | return value |
| | | } |
| | | return this.handler(value) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .value { |
| | | word-break: break-all; |
| | | .el-icon-loading { |
| | | font-size: 16px; |
| | | color: #999; |
| | | position: relative; |
| | | top: 1px; |
| | | } |
| | | } |
| | | </style> |