文件操作 - InputsGroup.vue

文件: /var/www/app.ltlcompare.com/components/InputsGroup.vue

编辑文件内容

const props = defineProps<Props>();

const model = defineModel<string>();

if (!model.value) {
  model.value = props.units?.[0] || '';
}

const unitOptions = computed(() => {
  if (props.units) {
    return props.units.filter(el => el !== model.value);
  }
  return [];
});
</script>

<template>
  <div class="inputs-group">
    <div
      v-if="title"
      class="form-block-title"
    >
      {{ title }}
    </div>
    <div class="inputs-group-body">
      <div class="inputs-group-list">
        <slot></slot>
      </div>
      <AppSelect
        v-if="units"
        class="inputs-group-unit-select"
        :options="unitOptions"
        v-model="model"
      ></AppSelect>
    </div>
  </div>
</template>

.inputs-group-list {
  flex: auto;
  display: flex;
  min-width: 0;
  margin-right: -1px;
  :deep(.form-block) {
    flex: auto;
    min-width: 0;
    margin-left: -1px;
    .input {
      border-radius: 0;
    }
    &:first-child {
      .input {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
    }
  }
  &:last-child {
    :deep(.form-block) {
      &:last-child {
        input {
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }
  }
}

.inputs-group-unit-select {
  flex: none;
  width: 52px;
  margin-left: -1px;
  :deep(.select-toggle) {
    background-color: #dae9f7;
    border-radius: 0 8px 8px 0;
    border: 0;
    justify-content: center;
    padding: 0 8px;
  }
  :deep(.select-icon) {
    display: none;
  }
  :deep(.option) {
    justify-content: center;
    padding: 8px;
  }
}
</style>

文件操作 - InputsGroup.vue

文件: /var/www/app.ltlcompare.com/components/InputsGroup.vue

编辑文件内容

修改文件时间

删除文件