gi-component

Appearance

InputGroup 输入框组 ​

该组件主要用来组合输入框，比如搜索框

基础用法 ​

请选择
查看代码
vue
<template>
  <gi-input-group>
    <el-input v-model="arr[0]" placeholder="请输入" clearable style="width: 100px"></el-input>
    <el-input v-model="arr[1]" placeholder="请输入" clearable style="width: 100px"></el-input>
    <el-input v-model="arr[2]" placeholder="请输入" clearable style="width: 100px"></el-input>
    <el-select v-model="arr[3]" placeholder="请选择" clearable style="width: 120px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </gi-input-group>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const arr = reactive(['', '', ''])
const options = [
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' }
]
</script>
请选择
请选择
查看代码
vue
<template>
  <gi-input-group>
    <el-input v-model="arr[0]" placeholder="请输入" clearable style="width: 100px"></el-input>
    <el-select v-model="arr[1]" placeholder="请选择" clearable style="width: 120px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-date-picker v-model="arr[2]" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable
      style="width: 150px"></el-date-picker>
    <el-time-select v-model="arr[3]" style="width: 150px" />
  </gi-input-group>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const arr = reactive(['', '', '', ''])
const options = [
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' }
]
</script>

搜索框 ​

查看代码
vue
<template>
  <gi-input-group>
    <el-input v-model="value" placeholder="请输入" style="width: 200px"></el-input>
    <el-button>搜索</el-button>
    <el-button>重置</el-button>
  </gi-input-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>