wview组件库Appearance
Input 输入框
数据输入框类型，通过键盘输入字符。
基本使用
input 的基本使用。
展开代码
vue
<!-- html -->
<template>
<Input v-model="myvalue" placeholder="请输入"></Input>
</template>
<!-- js -->
<script setup>
import { Input } from 'wviewui'
import { ref } from 'vue'
const myvalue = ref('')
</script>
禁用状态
通过 disabled 属性限制输入及操作。
展开代码
vue
<!-- html -->
<template>
<Input v-model="myvalue" disabled placeholder="禁用状态"></Input>
</template>
<!-- js -->
<script setup>
import { Input } from 'wviewui'
import { ref } from 'vue'
const myvalue = ref('')
</script>
可清空数据
通过 clearable 属性启用，可快速清除数据。
展开代码
vue
<!-- html -->
<template>
<Input v-model="myvalue" clearable @clear="clear" placeholder="可清空"></Input>
</template>
<!-- js -->
<script setup>
import { Input } from 'wviewui'
import { ref } from 'vue'
const myvalue = ref('')
const clear = () => {
console.info('清空')
}
</script>
带图标
可使用 leftIcon 或者 rightIcon 来定义显示图标并确定显示的位置。 注意:如定义了右侧显示图标，那 clearable 将不再起作用
展开代码
vue
<!-- html -->
<template>
<Input v-model="myvalue" leftIcon="jiahao"></Input>
<br />
<Input v-model="value2" rightIcon="cuowu"></Input>
</template>
<!-- js -->
<script setup>
import { Input } from 'wviewui'
import { ref } from 'vue'
const myvalue = ref('')
const value2 = ref('')
</script>
不同大小
通过设置 size 属性来适应不同大小。
展开代码
vue
<!-- html -->
<template>
<Input v-model="myvalue" placeholder="默认大小"></Input>
<br />
<Input v-model="value2" placeholder="小的" size="small"></Input>
<br />
<Input v-model="value3" placeholder="更小的" size="mini"></Input>
</template>
<!-- js -->
<script setup>
import { Input } from 'wviewui'
import { ref } from 'vue'
const myvalue = ref('')
const value2 = ref('')
const value3 = ref('')
</script>
组合输入
可通过插槽进行组合输入。
展开代码
vue
<!-- html -->
<template>
<Input v-model="myvalue" clearable>
<template #btn>
<Button>搜索</Button>
</template>
</Input>
</template>
<!-- js -->
<script setup>
import { Input, Button } from 'wviewui'
import { ref } from 'vue'
const myvalue = ref('')
</script>
密码类型
密码类型的输入框。
展开代码
vue
<!-- html -->
<template>
<Input v-model="password" type="password" showPassword placeholder="请输入密码"></Input>
</template>
<!-- js -->
<script setup>
import { Input } from 'wviewui'
import { ref } from 'vue'
const password = ref('')
</script>
自定义 Focus 颜色
通过 focusColor 属性自定义在获取焦点后的颜色。
展开代码
vue
<!-- html -->
<template>
<Input
v-model="myvalue"
type="text"
placeholder="自定义你喜欢的选中颜色"
focusColor="orange"
></Input>
</template>
<!-- js -->
<script setup>
import { Input } from 'wviewui'
import { ref } from 'vue'
const myvalue = ref('')
</script>