listItem.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <div class="list-item" :class="{ 'list-item__background': backgrounded }">
  3. <div class="list-item__label" :style="labelStyle">
  4. <slot name="label">
  5. {{ label }}
  6. </slot>
  7. </div>
  8. <div class="list-item__value" :class="{ 'list-item__border': bordered }" :style="valueStyle">
  9. <slot name="value">
  10. <!-- 状态灯 -->
  11. <div v-if="type === 'status-light'" :class="statusLightConfig.class">
  12. {{ statusLightConfig.label }}
  13. </div>
  14. <!-- 输入框 -->
  15. <div v-if="type === 'input'">
  16. <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
  17. </div>
  18. <!-- 默认 -->
  19. <div v-if="type === 'default'" class="text-right list-item__text_blue">
  20. {{ value }}
  21. </div>
  22. </slot>
  23. </div>
  24. </div>
  25. </template>
  26. <script setup lang="ts">
  27. // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
  28. import { Input } from 'ant-design-vue';
  29. import { computed } from 'vue';
  30. const props = withDefaults(
  31. defineProps<{
  32. /** value(即右侧)部分是否有边框 */
  33. bordered?: boolean;
  34. /** 是否有背景 */
  35. backgrounded?: boolean;
  36. /** label(即左侧)内容,可用slot */
  37. label?: string;
  38. /** value(即右侧)内容,可用slot */
  39. value?: string;
  40. /** 条目类型 */
  41. type?: 'input' | 'default' | 'status-light';
  42. /** 输入框的固定宽度 */
  43. labelWidth?: number | string;
  44. /** 输入框的固定宽度 */
  45. valueWidth?: number | string;
  46. /** 状态灯配置,第一项配置激活状态,第二项配置失活状态 */
  47. status?: [{ label: string; value: any }, { label: string }];
  48. }>(),
  49. {
  50. bordered: false,
  51. backgrounded: true,
  52. type: 'default',
  53. label: '',
  54. value: '',
  55. labelWidth: 100,
  56. }
  57. );
  58. defineEmits(['update:value']);
  59. // 状态灯相关的内容
  60. const statusLightConfig = computed(() => {
  61. if (!props.status) return { label: 'unknown', class: 'list-item__deactived' };
  62. const actived = props.value === props.status[0].value;
  63. return {
  64. label: props.status[actived ? 0 : 1].label,
  65. class: actived ? 'list-item__actived' : 'list-item__deactived',
  66. };
  67. });
  68. const labelStyle = computed(() => {
  69. const w = props.labelWidth;
  70. const width = typeof w === 'string' ? w : `${w}px`;
  71. return { width };
  72. });
  73. const valueStyle = computed(() => {
  74. const w = props.valueWidth;
  75. const width = typeof w === 'string' ? w : `${w}px`;
  76. return { width };
  77. });
  78. </script>
  79. <style lang="less" scoped>
  80. @import '@/design/vent/color.less';
  81. .list-item {
  82. height: 36px;
  83. line-height: 36px;
  84. padding: 0 10px;
  85. display: flex;
  86. justify-content: space-between;
  87. color: @white;
  88. }
  89. // .list-item__label {
  90. // }
  91. .list-item__value {
  92. flex-grow: 1;
  93. }
  94. .list-item__background {
  95. background-image: @vent-gas-list-item-bg-img;
  96. }
  97. .list-item__text_blue {
  98. color: @vent-gas-primary-text;
  99. }
  100. .list-item__border {
  101. border: 1px solid @vent-gas-primary-text;
  102. border-radius: 5px;
  103. }
  104. .list-item__actived {
  105. padding-left: 20px;
  106. background-image: url('@/assets/images/company/home/select-bg.png');
  107. background-repeat: no-repeat;
  108. background-position: left center;
  109. background-size: 20px 20px;
  110. }
  111. .list-item__deactived {
  112. padding-left: 20px;
  113. background-image: url('@/assets/images/company/home/unselect-bg.png');
  114. background-repeat: no-repeat;
  115. background-position: left center;
  116. background-size: 20px 20px;
  117. }
  118. ::v-deep .zxm-input {
  119. color: @white;
  120. }
  121. </style>