JView UI

Appearance

Input 组件，用于接收用户输入。

基本用法 ​

展开查看代码
vue
<template>
    <j-space>
        <j-input v-model:value="value1" placeholder="请输入" @input="onInput" />
        <j-input v-model:value="value2" placeholder="请输入" @change="onChange" />
    </j-space>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref('')

const onInput = (e) => {
    console.log('onInput', e)
}

const value2 = ref('')

const onChange = (e) => {
    console.log('onChange', e)
}
</script>
<template>
    <j-space>
        <j-input v-model:value="value1" placeholder="请输入" @input="onInput" />
        <j-input v-model:value="value2" placeholder="请输入" @change="onChange" />
    </j-space>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref('')

const onInput = (e) => {
    console.log('onInput', e)
}

const value2 = ref('')

const onChange = (e) => {
    console.log('onChange', e)
}
</script>

前缀和后缀 ​

给输入框上添加前缀或后缀，支持图标/文本/自定义内容。

￥RMB
展开查看代码
vue
<template>
    <j-space>
        <j-input v-model:value="value1" placeholder="请输入金额">
            <template #prefix>￥</template>
            <template #suffix>RMB</template>
        </j-input>
        <j-input v-model:value="value2" placeholder="请输入">
            <template #prefix><Search /></template>
            <template #suffix><Settings /></template>
        </j-input>
    </j-space>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Settings } from '@jview/icons'

const value1 = ref('')
const value2 = ref('')
</script>
<template>
    <j-space>
        <j-input v-model:value="value1" placeholder="请输入金额">
            <template #prefix>￥</template>
            <template #suffix>RMB</template>
        </j-input>
        <j-input v-model:value="value2" placeholder="请输入">
            <template #prefix><Search /></template>
            <template #suffix><Settings /></template>
        </j-input>
    </j-space>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Settings } from '@jview/icons'

const value1 = ref('')
const value2 = ref('')
</script>

前置和后置标签 ​

给输入框上添加前置和后置标签，常用于一些固定搭配，也可作为前缀/后缀的互替方案。

￥RMB
展开查看代码
vue
<template>
    <j-space>
        <j-input v-model:value="value1" placeholder="请输入金额">
            <template #addonBefore>￥</template>
            <template #addonAfter>RMB</template>
        </j-input>
        <j-input v-model:value="value2" placeholder="请输入">
            <template #addonBefore><Search /></template>
            <template #addonAfter><Settings /></template>
        </j-input>
    </j-space>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Settings } from '@jview/icons'

const value1 = ref('')
const value2 = ref('')
</script>
<template>
    <j-space>
        <j-input v-model:value="value1" placeholder="请输入金额">
            <template #addonBefore>￥</template>
            <template #addonAfter>RMB</template>
        </j-input>
        <j-input v-model:value="value2" placeholder="请输入">
            <template #addonBefore><Search /></template>
            <template #addonAfter><Settings /></template>
        </j-input>
    </j-space>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Settings } from '@jview/icons'

const value1 = ref('')
const value2 = ref('')
</script>

文本域 ​

展开查看代码
vue
<template>
    <j-textarea
        v-model:value="value1"
        clearable
        auto-size
        placeholder="自适应高度，不会出现滚动条"
        wordCount
        :maxlength="1200"
    ></j-textarea>

    <j-textarea
        v-model:value="value1"
        cols="120"
        clearable
        :auto-size="{ minRows: 4, maxRows: 6 }"
        placeholder="配置autoSize的minRows和maxRows限制最小/最大行数"
        wordCount
        :maxlength="1200"
        @compositionstart="onCompositionStart"
        @keyup.ctrl.enter="onCtrlEnter"
        style="margin-top: 20px"
    ></j-textarea>

    <j-space>
        <j-textarea
            class="customClass customClass2"
            v-model:value="value1"
            rows="6"
            cols="70"
            placeholder="通过原生属性rows/cols限制尺寸"
            style="margin-top: 20px"
        ></j-textarea>
    </j-space>
</template>

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

const value1 = ref()

const onCompositionStart = (e: CompositionEvent) => {
    console.log(e)
}

const onCtrlEnter = (e: KeyboardEvent) => {
    console.log('onCtrlEnter', e)
}
</script>
<template>
    <j-textarea
        v-model:value="value1"
        clearable
        auto-size
        placeholder="自适应高度，不会出现滚动条"
        wordCount
        :maxlength="1200"
    ></j-textarea>

    <j-textarea
        v-model:value="value1"
        cols="120"
        clearable
        :auto-size="{ minRows: 4, maxRows: 6 }"
        placeholder="配置autoSize的minRows和maxRows限制最小/最大行数"
        wordCount
        :maxlength="1200"
        @compositionstart="onCompositionStart"
        @keyup.ctrl.enter="onCtrlEnter"
        style="margin-top: 20px"
    ></j-textarea>

    <j-space>
        <j-textarea
            class="customClass customClass2"
            v-model:value="value1"
            rows="6"
            cols="70"
            placeholder="通过原生属性rows/cols限制尺寸"
            style="margin-top: 20px"
        ></j-textarea>
    </j-space>
</template>

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

const value1 = ref()

const onCompositionStart = (e: CompositionEvent) => {
    console.log(e)
}

const onCtrlEnter = (e: KeyboardEvent) => {
    console.log('onCtrlEnter', e)
}
</script>

Input尺寸 ​

展开查看代码
vue
<template>
    <j-space style="margin-top: 20px">
        <j-input v-model:value="value1" size="small" placeholder="small" />
        <j-input v-model:value="value1" placeholder="default" />
        <j-input v-model:value="value1" size="large" placeholder="large" />
    </j-space>
</template>

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

const value1 = ref('')
</script>
<template>
    <j-space style="margin-top: 20px">
        <j-input v-model:value="value1" size="small" placeholder="small" />
        <j-input v-model:value="value1" placeholder="default" />
        <j-input v-model:value="value1" size="large" placeholder="large" />
    </j-space>
</template>

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

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

字数统计 ​

0/20
展开查看代码
vue
<template>
    <j-space>
        <j-input v-model:value="value1" word-count :maxlength="20" clearable></j-input>

        <j-textarea v-model:value="value2" word-count :maxlength="200"></j-textarea>
    </j-space>
</template>

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

const value1 = ref('')
const value2 = ref('')
</script>
<template>
    <j-space>
        <j-input v-model:value="value1" word-count :maxlength="20" clearable></j-input>

        <j-textarea v-model:value="value2" word-count :maxlength="200"></j-textarea>
    </j-space>
</template>

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

const value1 = ref('')
const value2 = ref('')
</script>

密码输入框 ​

支持默认值

不展示切换图标

自定义切换图标

展开查看代码
vue
<template>
    <p>支持默认值</p>
    <j-space>
        <j-password v-model:value="value" v-model:visible="passwordVisible" defaultValue="123" />
    </j-space>
    <p>不展示切换图标</p>
    <j-space>
        <j-password v-model:value="value" :visible="true" :show-toggle="false" />
    </j-space>
    <p>自定义切换图标</p>
    <j-space>
        <j-password v-model:value="value" clearable>
            <template #renderIcon="visible">
                <EyeOutlined v-if="visible" />
                <EyeInvisibleOutlined v-else />
            </template>
        </j-password>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { EyeOutlined, EyeInvisibleOutlined } from '@jview/icons-antd'

const value = ref()

const passwordVisible = ref(true)
</script>
<template>
    <p>支持默认值</p>
    <j-space>
        <j-password v-model:value="value" v-model:visible="passwordVisible" defaultValue="123" />
    </j-space>
    <p>不展示切换图标</p>
    <j-space>
        <j-password v-model:value="value" :visible="true" :show-toggle="false" />
    </j-space>
    <p>自定义切换图标</p>
    <j-space>
        <j-password v-model:value="value" clearable>
            <template #renderIcon="visible">
                <EyeOutlined v-if="visible" />
                <EyeInvisibleOutlined v-else />
            </template>
        </j-password>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { EyeOutlined, EyeInvisibleOutlined } from '@jview/icons-antd'

const value = ref()

const passwordVisible = ref(true)
</script>

公共属性 ​

支持组件：j-input, j-textarea, j-password

参数说明类型默认值必填
defaultValue默认值，初始化 value 值为 undefined 时起作用string无否
value输入框的值，支持 v-modelstring无否
bordered是否有边框booleantrue否
disabled是否禁用boolean无否
maxlength最大输入长度，html5原生属性number无否
autofocus自动获得焦点boolean无否
clearable支持点击清除图标删除输入内容boolean无否
clearIcon定制清除图标，支持属性和插槽VNode无否

Input 属性 ​

除公共属性外，还支持以下属性：

参数说明类型默认值必填
addonBefore前置标签，支持属性和插槽string | VNode无否
addonAfter后置标签，支持属性和插槽string | VNode无否
prefix输入框前缀部分，可放置图标等，支持属性和插槽。string | VNode无否
suffix输入框后缀部分，可放置图标等，支持属性和插槽。string | VNode无否
size输入框的尺寸"default" | "small" | "large"'default'否
type支持原生 input 标签的 type 属性string无否
wordCount是否显示字符数boolean无否

Textarea 属性 ​

除公共属性外，还支持以下属性：

参数说明类型默认值必填
autoSize自适应内容高度，支持布尔值或者 { minRows?: number; maxRows?: number } 配置boolean | { maxRows: number; minRows: number }无否
wordCount是否显示字符数boolean无否

Password 属性 ​

除公共属性外，还支持以下属性：

参数说明类型默认值必填
addonBefore前置标签，支持属性和插槽string | VNode无否
addonAfter后置标签，支持属性和插槽string | VNode无否
size输入框的尺寸"default" | "small" | "large"'default'否
prefix输入框前缀部分，可放置图标等。模板中支持插槽，JSX中同时支持属性或插槽。string | VNode无否
wordCount是否显示字符数boolean无否
visible是否明文，默认为*代表的密文，支持 v-modelbooleanfalse否
showToggle是否显示切换图标，如设置为 false，则 visible 属性无效booleantrue否
renderIcon眼睛图标不满意？您可以选择插槽自定义，插槽能接收到当前 visible 状态VNode无否

事件 ​

除原生事件外，还支持以下事件：

事件名说明回调类型
inputinput事件，值变化立即触发(e: InputEvent) => void
changechange事件，通常在失焦时触发(e: string) => void
focus获得焦点(e: FocusEvent) => void
blur失去焦点(e: FocusEvent) => void
clear删除内容() => void

Copyright © 2022-2024 All Rights Reserved by Tusi.