输入框

基础输入框

10/22

10/22

<template>
  	<div class="demo-block-column">
		<div class="demo-input-row" style="width: 250px;">
            <t-input />
            <t-input v-model="input" placeholder="请输入内容（有默认值）" @enter="onEnter" @change="onChange" />
            <t-input suffix="10/22"/>
            <t-input disabled default-value="禁用状态" suffix="10/22"/>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      input: '有默认值',
    };
  },
  methods: {
    onEnter() {
      console.log('trigger enter');
    },
    onChange(val) {
      console.log(this.input, val);
    },
  },
};
</script>

显示代码 复制代码 复制代码

标题+内容输入框

标题内容

标题内容

标题内容

<template>
  	<div class="demo-block-column">
		<div class="demo-input-row" style="width: 300px;">
            <div class="care-input">
                <span class="care-input__label">标题内容</span>
                <t-input />
            </div>
            <div class="care-input">
                <span class="care-input__label care-input__label--prefix">标题内容</span>
                <t-input />
            </div>
            <div class="care-input care-input--vertical">
                <span class="care-input__label">标题内容</span>
                <t-input />
            </div>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码

不同状态输入框

校验通过文本提示

<template>
  	<div class="demo-block-column">
		<div class="demo-input-row" style="width: 250px;">
            <t-input default-value="成功状态" />
            <t-input status="success" default-value="成功状态">
                <i class="care-icon-check" slot="suffix-icon"></i>
            </t-input>
            <t-input status="error" default-value="错误状态" tips="校验通过文本提示">
                <i class="care-icon-info" slot="suffix-icon"></i>
            </t-input>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码

密码输入框

<template>
  	<div class="demo-block-column">
		<div class="demo-input-row" style="width: 250px;">
           <t-input type="password" default-value="520 TDesign">
            </t-input>
            <!-- 使用 function 的形式定义 icon -->
            <t-input type="password" default-value="520 TDesign" />
        </div>
    </div>
</template>

显示代码 复制代码 复制代码