Input 文本框

一、概述

定义

文本框允许用户输入文本、选择文本。支持输入文本、数字或者混合格式的数据。

使用场景

• 通过鼠标键盘输入内容

• 用户需要输入文本字符时

类型

• 单行文本框

• 多行文本框

二、单行文本框

单行文本输入，不支持换行。

交互说明

1.文本输入线激活时，输入线颜色加深

2.输入文本超过一行时，文本从右往左移动

3.报错状态时，出现红色文字提示，同时输入线标红

<style>
  .se-input {
    width: 47%;
    margin: 10px;
  }
</style>
<se-input
  :value="password"
  placeholder="请输入内容"
  size="large"
  :focus="true"
  @blur="blurHandler"
  @input="inputHandler"
/>
<se-input placeholder="请输入内容" />
<se-input :value="longWord" placeholder="请输入内容" size="large" @change="changeHandler" />
<se-input :value="longWord" placeholder="请输入内容" />
<se-input
  :value="word"
  placeholder="test"
  :valid="wordValid"
  error-message="不符合规则"
  @input="changeWord"
  size="large"
/>
<se-input
  :value="word"
  placeholder="test"
  :valid="wordValid"
  error-message="不符合规则"
  @input="changeWord"
/>
<se-input placeholder="请输入内容" size="large" :disabled="true" />
<se-input placeholder="请输入内容" :disabled="true" />
<script>
  export default {
    data() {
      return {
        age: 221,
        name: '已输入内容',
        password: '',
        word: '嘿嘿哈',
        wordValid: false,
        longWord: '通过提炼自然界中的客观规律并运用到界面设计中'
      }
    },
    methods: {
      changeWord(e) {
        this.wordValid = e.detail.value.length === 4
      },
      blurHandler(e) {
        console.log(e)
      },
      changeHandler(e) {
        this.longWord = e.detail.value
        console.log(e)
      },
      inputHandler(e) {
        console.log(e.detail.value)
      }
    }
  }
</script>

三、多行文本框

多行文本输入，支持换行。

交互说明

1.输入框高度固定，不会更改字数行数而改变

2.超过三行时，出现滚动条

<style>
  .se-input {
    width: 100%;
    margin-bottom: 20px;
  }
</style>
<se-input type="textarea" :value="word" placeholder="请输入文案" @focus="focusHandler" />
<se-input type="textarea" :value="longWord" placeholder="请输入文案" />
<script>
  export default {
    data() {
      return {
        word: '',
        longWord:
          '应用通过提炼自然界中的客观规律并应用到界面设计中应用通过提炼自然界中的客观规律并应用到界面设计中'
      }
    },
    methods: {
      focusHandler(e) {
        console.log(e)
      }
    }
  }
</script>

Props

Events