Input

This component is an input box. It has no similar style by default. It is specially designed to cooperate with the form component wu-form. It can be used to quickly implement form validation and input content , drop-down selection and other functions.

You should implement wu-form-item in wu-form, and then wu-input to implement.

platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage

Set the input box type by type, the default is text
Set the placeholder when the input box is empty by placeholder
Configure whether to display the border of the input box through border
Binding @change event

vue

<template>
  <wu-input
    placeholder="Please enter content"
    border="surround"
    v-model="value"
    @change="change"
  ></wu-input>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    change(e) {
      console.log("change", e);
    },
  },
};
</script>

<template>
  <wu-input
    placeholder="Please enter content"
    border="surround"
    v-model="value"
    @change="change"
  ></wu-input>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    change(e) {
      console.log("change", e);
    },
  },
};
</script>

Type of input box

Summary: The type of input box can be set by configuring type:

text- text input keyboard.
number-Number input keyboard, floating point numbers can be input under app-vue, and only integers can be input under app-nvue and applet platforms.
idcard- ID card input keyboard, WeChat, Alipay, Baidu, QQ applet.
digit- Numeric keyboard with decimal point, App's nvue page, WeChat, Alipay, Baidu, Toutiao, QQ applet.
password-equivalent to setting password to true

Empty characters

Setting clearable to true will add a clear button behind the input field.

vue

<template>
  <wu-input placeholder="Please enter content" border="surround" clearable></wu-input>
</template>

<template>
  <wu-input placeholder="Please enter content" border="surround" clearable></wu-input>
</template>

underscore

By setting the attribute border to bottom it becomes an underline

vue

<template>
  <wu-input placeholder="Please enter content" border="bottom" clearable></wu-input>
</template>

<template>
  <wu-input placeholder="Please enter content" border="bottom" clearable></wu-input>
</template>

before and after icons

All rear icons can freely set style information. Setting clearable to true will add a clear button behind the input field.

vue

<template>
    <wu-input
        placeholder="front icon"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
    ></wu-input>
    <wu-input
        placeholder="post icon"
        suffixIcon="map-fill"
        suffixIconStyle="color: #909399"
    ></wu-input>
</template>

<template>
    <wu-input
        placeholder="front icon"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
    ></wu-input>
    <wu-input
        placeholder="post icon"
        suffixIcon="map-fill"
        suffixIconStyle="color: #909399"
    ></wu-input>
</template>

front and rear slots

Specify front and rear slots by setting slot to prefix or suffix

vue

<template>
	<view class="wu-demo-block">
		<text class="wu-demo-block__title">front and rear slots</text>
		<view class="wu-demo-block__content">
			<wu-input placeholder="front slot">
                <template #prefix>
                    <wu-text
                        text="http://"
                        slot="prefix"
                        margin="0 3px 0 0"
                        type="tips"
				    ></wu-text>
                </template>
			</wu-input>
		</view>
		<view
			class="wu-demo-block__content"
			style="margin-top: 15px;"
		>
			<wu-input placeholder="rear slot">
				<template #suffix>
					<wu-code
						ref="wuCode"
						@change="codeChange"
						seconds="20"
						changeText="X seconds to reacquire hahaha"
					></wu-code>
					<wu-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></wu-button>
				</template>
			</u-input>
		</view>
	</view>
</template>

<script>
    // This is the import method without using the extended configuration. After using the extended configuration, you can directly use uni.$w.toast to charge the import
    import { toast } from '@/uni_modules/wu-ui-tools/libs/function/index.js';
    export default {
        data() {
            return {
                tips: '',
                value: ''
            }
        },
        watch: {
            value(newValue, oldValue) {
            // console.log('v-model', newValue);
            }
        },
        methods: {
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if (this.$refs.wuCode.canGetCode) {
                    // Simulate requesting a verification code from the backend
                    uni.showLoading({
                        title: 'Getting verification code'
                    })
                    setTimeout(() => {
                        uni.hideLoading();
                        // Here this prompt will be overridden by the prompt in this.start() method
                        toast('Verification code sent');
                        // Notify the internal countdown of the captcha component
                        this.$refs.wuCode.start();
                    }, 2000);
                } else {
                    toast('Send after countdown');
                }
            },
            change(e) {
                console.log('change', e);
            }
        }
    }
</script>

<template>
	<view class="wu-demo-block">
		<text class="wu-demo-block__title">front and rear slots</text>
		<view class="wu-demo-block__content">
			<wu-input placeholder="front slot">
                <template #prefix>
                    <wu-text
                        text="http://"
                        slot="prefix"
                        margin="0 3px 0 0"
                        type="tips"
				    ></wu-text>
                </template>
			</wu-input>
		</view>
		<view
			class="wu-demo-block__content"
			style="margin-top: 15px;"
		>
			<wu-input placeholder="rear slot">
				<template #suffix>
					<wu-code
						ref="wuCode"
						@change="codeChange"
						seconds="20"
						changeText="X seconds to reacquire hahaha"
					></wu-code>
					<wu-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></wu-button>
				</template>
			</u-input>
		</view>
	</view>
</template>

<script>
    // This is the import method without using the extended configuration. After using the extended configuration, you can directly use uni.$w.toast to charge the import
    import { toast } from '@/uni_modules/wu-ui-tools/libs/function/index.js';
    export default {
        data() {
            return {
                tips: '',
                value: ''
            }
        },
        watch: {
            value(newValue, oldValue) {
            // console.log('v-model', newValue);
            }
        },
        methods: {
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if (this.$refs.wuCode.canGetCode) {
                    // Simulate requesting a verification code from the backend
                    uni.showLoading({
                        title: 'Getting verification code'
                    })
                    setTimeout(() => {
                        uni.hideLoading();
                        // Here this prompt will be overridden by the prompt in this.start() method
                        toast('Verification code sent');
                        // Notify the internal countdown of the captcha component
                        this.$refs.wuCode.start();
                    }, 2000);
                } else {
                    toast('Send after countdown');
                }
            },
            change(e) {
                console.log('change', e);
            }
        }
    }
</script>

API

Input Props

property name	description	type	default value	optional values
value / modelValue	input value	Number / String	-	-
type	input box type, see above description	String	text	number / idcard / digit / password
disabled	Whether to disable the input box	Boolean	false	true
disabledColor	background color in disabled state	String	#f5f7fa	-
clearable	Whether to display the clear control	Boolean	false	true
password	password type	Boolean	false	true
maxlength	The maximum input length, when set to -1, there is no limit to the maximum length	String / Number	-1	-
placeholder	placeholder when the input box is empty	String	-	-
placeholderClass	Specifies the style class of the placeholder. Note that when scoped is written in the style of the page or component, you need to write /deep/ before the class name	String	input-placeholder	-
placeholderStyle	Specifies the style of the placeholder, in the form of a string/object, such as "color: red;"	String / Object	color: #c0c4cc	-
showWordLimit	Whether to display input word count statistics, only valid when type = "text" or type = "textarea"	Boolean	false	true
confirmType	Set the text of the button in the lower right corner, see uni-app documentation for compatibility	String	done	send / search / next / go / done
confirmHold	Whether to keep the keyboard closed when the button on the bottom right corner of the keyboard is clicked, H5 is invalid	Boolean	false	true
holdKeyboard	When in focus, the keyboard will not be put away when the page is clicked, and the WeChat applet is valid	Boolean	false	true
focus	Get the focus automatically. Whether it can be focused on the H5 platform and whether the soft keyboard pops up depends on the implementation of the current browser itself. The nvue page does not support it, you need to use the focus() and blur() methods of the component to control the focus	Boolean	false	true
autoBlur	Whether to automatically lose focus when the keyboard is closed, currently only valid for App3.0.0+	Boolean	false	true
ignoreCompositionEvent	Whether to ignore the processing of text composition system events within the component. When false, compositionstart, compositionend, compositionupdate events will be fired, and input event will be fired during text composition	Boolean	true	false
disableDefaultPadding	Whether to remove the default padding under iOS, only valid for WeChat applets and type=textarea	Boolean	false	true
cursor	cursor position when focus is specified	String / Number	-1	-
cursorSpacing	The distance between the bottom of the input box and the keyboard when it is focused	String / Number	30	-
selectionStart	Cursor start position, valid when auto-gathering, must be used together with selection-end	String / Number	-1	-
selectionEnd	The end position of the cursor, valid during automatic aggregation, and must be used in conjunction with selection-start	String / Number	-1	-
adjustPosition	Whether to automatically push up the page when the keyboard pops up	Boolean	true	false
inputAlign	Alignment of input box content	String	left	left / center / right
fontSize	The font size of the input box	String	-	-
placeholder	placeholder when the input box is empty	String / Number	15px	-
color	input box font color	String	#303133	-
prefixIcon	input box prefix icon	String	-	-
prefixIconStyle	prefix icon style, object or string	String / Object	-	-
suffixIcon	input box suffix icon	String	-	-
suffixIconStyle	suffix icon style, object or string	String / Object	-	-
border	border type, surround-surround border, bottom-bottom border, none-no border	String	surround	bottom / none
readonly	Whether it is read-only, the difference from disabled is that disabled will gray out the component, while readonly will not	Boolean	false	true
shape	input box shape, circle-circle, square-square	String	square	circle
formatter	Input filtering or formatting function (if compatible with WeChat applet, only through the setFormatter method)	Function	null	-
customStyle	Define the external style that needs to be used	Object	-	-

Input Events

Event Name	Description	Callback Parameters
blur	triggered when the input box loses focus	value: content value
focus	Triggered when the input box is focused	-
confirm	triggered when the button is clicked	value: content value
keyboardheightchange	This event is triggered when the keyboard height changes	-
input	This event is triggered when the content changes	value: content value
change	This event is triggered when the content changes	value: content value
clear	Click to clear content	-

Input Methods

method name	description
setFormatter	The internal method exposed for compatibility with WeChat applets, see the description above

Input Slots

Slot Name	Description
prefix	front content of input box
suffix	content after the input box

Input ​

platform compatibility ​

Basic usage ​

Type of input box ​

Empty characters ​

underscore ​

before and after icons ​

front and rear slots ​

API ​

Input Props ​

Input Events ​

Input Methods ​

Input Slots ​