123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <template>
- <div class="list-item" :class="{ 'list-item__background': backgrounded }">
- <div class="list-item__label" :style="labelStyle">
- <slot name="label">
- {{ label }}
- </slot>
- </div>
- <div class="list-item__value" :class="{ 'list-item__border': bordered }" :style="valueStyle">
- <slot name="value">
- <!-- 状态灯 -->
- <div v-if="type === 'status-light'" :class="statusLightConfig.class">
- {{ statusLightConfig.label }}
- </div>
- <!-- 输入框 -->
- <div v-if="type === 'input'">
- <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
- </div>
- <!-- 默认 -->
- <div v-if="type === 'default'" class="text-right list-item__text_blue">
- {{ value }}
- </div>
- </slot>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
- import { Input } from 'ant-design-vue';
- import { computed } from 'vue';
- const props = withDefaults(
- defineProps<{
- /** value(即右侧)部分是否有边框 */
- bordered?: boolean;
- /** 是否有背景 */
- backgrounded?: boolean;
- /** label(即左侧)内容,可用slot */
- label?: string;
- /** value(即右侧)内容,可用slot */
- value?: string;
- /** 条目类型 */
- type?: 'input' | 'default' | 'status-light';
- /** 输入框的固定宽度 */
- labelWidth?: number | string;
- /** 输入框的固定宽度 */
- valueWidth?: number | string;
- /** 状态灯配置,第一项配置激活状态,第二项配置失活状态 */
- status?: [{ label: string; value: any }, { label: string }];
- }>(),
- {
- bordered: false,
- backgrounded: true,
- type: 'default',
- label: '',
- value: '',
- labelWidth: 100,
- }
- );
- defineEmits(['update:value']);
- // 状态灯相关的内容
- const statusLightConfig = computed(() => {
- if (!props.status) return { label: 'unknown', class: 'list-item__deactived' };
- const actived = props.value === props.status[0].value;
- return {
- label: props.status[actived ? 0 : 1].label,
- class: actived ? 'list-item__actived' : 'list-item__deactived',
- };
- });
- const labelStyle = computed(() => {
- const w = props.labelWidth;
- const width = typeof w === 'string' ? w : `${w}px`;
- return { width };
- });
- const valueStyle = computed(() => {
- const w = props.valueWidth;
- const width = typeof w === 'string' ? w : `${w}px`;
- return { width };
- });
- </script>
- <style lang="less" scoped>
- @import '@/design/vent/color.less';
- .list-item {
- height: 36px;
- line-height: 36px;
- padding: 0 10px;
- display: flex;
- justify-content: space-between;
- color: @white;
- }
- // .list-item__label {
- // }
- .list-item__value {
- flex-grow: 1;
- }
- .list-item__background {
- background-image: @vent-gas-list-item-bg-img;
- }
- .list-item__text_blue {
- color: @vent-gas-primary-text;
- }
- .list-item__border {
- border: 1px solid @vent-gas-primary-text;
- border-radius: 5px;
- }
- .list-item__actived {
- padding-left: 20px;
- background-image: url('@/assets/images/company/home/select-bg.png');
- background-repeat: no-repeat;
- background-position: left center;
- background-size: 20px 20px;
- }
- .list-item__deactived {
- padding-left: 20px;
- background-image: url('@/assets/images/company/home/unselect-bg.png');
- background-repeat: no-repeat;
- background-position: left center;
- background-size: 20px 20px;
- }
- ::v-deep .zxm-input {
- color: @white;
- }
- </style>
|