Input 输入框

通过鼠标或键盘输入字符

基础用法

<div class="input-wrapper">
    <pd-input placeholder="请输入内容" v-model="input"> </pd-input>
</div>

<script>
  export default {
    data() {
      return {
        input: "",
      };
    },
  };
</script>

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

禁用状态

通过 disabled 属性指定是否禁用 input 组件

<div class="input-wrapper">
    <pd-input disabled placeholder="请输入内容" v-model="input"> 
    </pd-input>
</div>

<script>
  export default {
    data() {
      return {
        input: "",
      };
    },
  };
</script>

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

可清空

使用clearable属性即可得到一个可清空的输入框

<template>
  <div class="input-wrapper">
    <pd-input
      placeholder="请输入内容"
      clearable
      v-model="input"
    >
    </pd-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

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

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

<template>
  <div class="input-wrapper">
    <pd-input
      placeholder="请输入内容"
      v-model="input"
      type="textarea"
    >
    </pd-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: '',
    }
  }
}
</script>

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

复合型输入框

可前置或后置元素，一般为标签或按钮

prepend属性为前置插槽，append属性为后置插槽

<div class="input-box">
    <pd-input
    placeholder="请输入内容"
    v-model="input1"
    >
        <template slot="prepend">https://</template>
    </pd-input>
</div>
<div class="input-box">
    <pd-input
    placeholder="请输入内容"
    v-model="input2"
    >
        <template slot="append">.com</template>
    </pd-input>
</div>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
    }
  }
}
</script>

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