Field input box

introduce

Users can enter or edit text in the text box.

Basic usage

You can use v-model to bidirectionally bind the value of the input box, and use placeholder to set the placeholder text.

  <z-field v-model="value" label="text" placeholder="Please enter text" />

import { ref } from 'vue'
const value = ref('')

Custom type

Different types of input boxes are defined according to the type attribute. The default value is text.

   <!-- Enter any text -->
   <z-field v-model="text" label="text" />
   <!-- Enter the mobile phone number and bring up the mobile phone number keyboard -->
   <z-field v-model="tel" type="tel" label="Mobile phone number" />
   <!-- Allow the input of positive integers and bring up the pure numeric keyboard -->
   <z-field v-model="digit" type="digit" label="integer" />
   <!-- Allows you to enter numbers and calls up a pure numeric keyboard with symbols -->
   <z-field v-model="number" type="number" label="number" />
   <!-- Enter password -->
   <z-field v-model="password" type="password" label="password" />

Disable input box

Use readonly to set the input box to a read-only state, and use disabled to set the input box to a disabled state.

   <z-field label="Text" model-value="Input box read-only" readonly />
   <z-field label="text" model-value="Input box is disabled" disabled />

Show icon

Configure the icons on both sides of the input box through left-icon and right-icon, and display the clear icon during the input process by setting clearable.

<z-cell-group inset>
   <z-field
     v-model="value1"
     label="text"
     left-icon="detail"
     right-icon="info-circle"
     placeholder="show icon"
   />
   <z-field
     v-model="value2"
     clearable
     label="text"
     left-icon="safetycertificate"
     placeholder="Show clear icon"
   />
</z-cell-group>

Required asterisk

Set the required attribute to display required asterisks.

   <z-field
     v-model="username"
     required
     label="username"
     placeholder="Please enter username"
   />
   <z-field
     v-model="phone"
     required
     label="mobile phone number"
     placeholder="Please enter your mobile phone number"
   />

Please note that the required attribute is only used to control style display. When performing form validation, you need to use the rule.required option to control the validation logic.

Automatically display asterisks

You can set required="auto" on the Form component. At this time, all Fields in the Form will automatically determine whether asterisks need to be displayed based on rule.required.

<z-form required="auto">
   <z-field
     v-model="username"
     :rules="[{ required: true }]"
     label="username"
     placeholder="Please enter username"
   />
   <z-field
     v-model="phone"
     :rules="[{ required: false }]"
     label="mobile phone number"
     placeholder="Please enter your mobile phone number"
   />
</z-form>

Error message

Setting the required attribute indicates that this is a required item, and can be used with the error or error-message attribute to display the corresponding error prompt.

   <z-field
     v-model="username"
     error
     label="username"
     placeholder="Please enter username"
   />
   <z-field
     v-model="phone"
     label="mobile phone number"
     placeholder="Please enter your mobile phone number"
     error-message="Mobile phone number format error"
   />

Insert button

The button slot allows you to insert buttons at the end of the input box.

   <z-field
     v-model="sms"
     center
     clearable
     label="SMS verification code"
     placeholder="Please enter the SMS verification code"
   >
     <template #button>
       <z-button size="small" type="primary">Send verification code</z-button>
     </template>
   </z-field>

Format input content

The input content can be formatted through the formatter attribute, and the timing of formatting can be specified through the format-trigger attribute. By default, formatting is performed during input.

   <z-field
     v-model="value1"
     label="text"
     :formatter="formatter"
     placeholder="Perform formatting as you type"
   />
   <z-field
     v-model="value2"
     label="text"
     :formatter="formatter"
     format-trigger="onBlur"
     placeholder="Perform formatting when out of focus"
   />

// Filter the input numbers
const formatter = (value) => value.replace(/\d/g, '');

Highly adaptive

For textarea, height adaptation can be set through the autosize property.

   <z-field
     v-model="message"
     rows="1"
     autosize
     label="Message"
     type="textarea"
     placeholder="Please enter a message"
   />

Show word count statistics

Setting the maxlength and show-word-limit properties will display the word count at the bottom.

   <z-field
     v-model="message"
     rows="2"
     autosize
     label="Message"
     type="textarea"
     maxlength="50"
     placeholder="Please enter a message"
     show-word-limit
   />

Alignment of input box content

The alignment of the input box content can be set through the input-align attribute. The optional values are center and right.

   <z-field
     v-model="value"
     label="text"
     placeholder="Input box content right aligned"
     input-align="right"
   />

Input box text position

The position of the input box text can be set through the label-align attribute. The optional values ​​are center, right, and top.

   <z-field
     v-model="value"
     label="text"
     placeholder="top alignment"
     label-align="top"
   />
   <z-field
     v-model="value2"
     label="text"
     placeholder="left aligned"
     label-align="left"
   />
   <z-field
     v-model="value3"
     label="text"
     placeholder="center aligned"
     label-align="center"
   />
   <z-field
     v-model="value4"
     label="text"
     placeholder="right aligned"
     label-align="right"
   />

Props

Events

method

Field instances can be obtained through ref and instance methods can be called.

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.