Input 输入框 ​

<template>
  <tu-input v-model="inputValue" placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input v-model="inputValue" placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input v-model="inputValue" disabled placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input v-model="inputValue" disabled placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input v-model="inputValue" placeholder="请输入" allowClear />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input v-model="inputValue" placeholder="请输入" allowClear />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input
    v-model="inputValue"
    placeholder="请输入"
    :formatter="(value: string | number) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input
    v-model="inputValue"
    placeholder="请输入"
    :formatter="(value: string | number) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input
    v-model="inputValue"
    type="password"
    placeholder="请输入"
    show-password
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input
    v-model="inputValue"
    type="password"
    placeholder="请输入"
    show-password
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <p>属性方式</p>
  <tu-row :gutter="20" class="mb-2">
    <tu-col :span="12">
      <tu-input
        v-model="inputValue1"
        placeholder="请输入"
        :suffix-icon="Search"
      ></tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input
        v-model="inputValue2"
        placeholder="请输入"
        :prefix-icon="Search"
      ></tu-input>
    </tu-col>
  </tu-row>
  <p>slot方式</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-input v-model="inputValue3" placeholder="请输入">
        <template #suffix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input v-model="inputValue4" placeholder="请输入">
        <template #prefix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Search } from '@tu-view-plus/icons-vue';
const inputValue1 = ref('');
const inputValue2 = ref('');
const inputValue3 = ref('');
const inputValue4 = ref('');
</script>

<template>
  <p>属性方式</p>
  <tu-row :gutter="20" class="mb-2">
    <tu-col :span="12">
      <tu-input
        v-model="inputValue1"
        placeholder="请输入"
        :suffix-icon="Search"
      ></tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input
        v-model="inputValue2"
        placeholder="请输入"
        :prefix-icon="Search"
      ></tu-input>
    </tu-col>
  </tu-row>
  <p>slot方式</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-input v-model="inputValue3" placeholder="请输入">
        <template #suffix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input v-model="inputValue4" placeholder="请输入">
        <template #prefix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Search } from '@tu-view-plus/icons-vue';
const inputValue1 = ref('');
const inputValue2 = ref('');
const inputValue3 = ref('');
const inputValue4 = ref('');
</script>

<template>
  <tu-input class="mb-2" v-model="inputValue1" placeholder="请输入">
    <template #prepend>Http://</template>
  </tu-input>

  <tu-input v-model="inputValue2" placeholder="请输入">
    <template #append>Com</template>
  </tu-input>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue1 = ref('');
const inputValue2 = ref('');
</script>

<template>
  <tu-input class="mb-2" v-model="inputValue1" placeholder="请输入">
    <template #prepend>Http://</template>
  </tu-input>

  <tu-input v-model="inputValue2" placeholder="请输入">
    <template #append>Com</template>
  </tu-input>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue1 = ref('');
const inputValue2 = ref('');
</script>

<template>
  <tu-input
    maxlength="10"
    type="text"
    v-model="inputValue"
    placeholder="请输入"
    show-word-limit
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-input
    maxlength="10"
    type="text"
    v-model="inputValue"
    placeholder="请输入"
    show-word-limit
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<template>
  <tu-row :gutter="20" class="demo-input-row">
    <tu-col :span="6">
      <tu-input v-model="inputValue1" size="mini" placeholder="请输入" />
    </tu-col>

    <tu-col :span="6">
      <tu-input v-model="inputValue2" size="small" placeholder="请输入" />
    </tu-col>

    <tu-col :span="6">
      <tu-input v-model="inputValue3" placeholder="请输入" />
    </tu-col>

    <tu-col :span="6">
      <tu-input v-model="inputValue4" size="large" placeholder="请输入" />
    </tu-col>
  </tu-row>
</template>

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

const inputValue1 = ref('');
const inputValue2 = ref('');
const inputValue3 = ref('');
const inputValue4 = ref('');
</script>

<style>
.demo-input-row {
  align-items: baseline;
}
</style>

<template>
  <tu-row :gutter="20" class="demo-input-row">
    <tu-col :span="6">
      <tu-input v-model="inputValue1" size="mini" placeholder="请输入" />
    </tu-col>

    <tu-col :span="6">
      <tu-input v-model="inputValue2" size="small" placeholder="请输入" />
    </tu-col>

    <tu-col :span="6">
      <tu-input v-model="inputValue3" placeholder="请输入" />
    </tu-col>

    <tu-col :span="6">
      <tu-input v-model="inputValue4" size="large" placeholder="请输入" />
    </tu-col>
  </tu-row>
</template>

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

const inputValue1 = ref('');
const inputValue2 = ref('');
const inputValue3 = ref('');
const inputValue4 = ref('');
</script>

<style>
.demo-input-row {
  align-items: baseline;
}
</style>