4dkankan-components/docs/examples/input/mixed-input.vue

<template>
  <div>
    <kk-input v-model="input1" placeholder="Please input">
      <template #prepend>Http://</template>
    </kk-input>
  </div>
  <div class="mt-4">
    <kk-input v-model="input2" placeholder="Please input">
      <template #append>.com</template>
    </kk-input>
  </div>
  <div class="mt-4">
    <kk-input
      v-model="input3"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
      <template #append>
        <kk-button :icon="Search" />
      </template>
    </kk-input>
  </div>
  <div class="mt-4">
    <kk-input
      v-model="input3"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <kk-button :icon="Search" />
      </template>
      <template #append>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
    </kk-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { KkButton, KkInput } from 'kankan-components'
import { Search } from '@kankan-components/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const select = ref('')
</script>

<style>
.input-with-select .kk-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>