TextareaItem多行输入

用于接受多行文本。

规则

  • 支持通过键盘或者剪切板输入文本。
  • 通过光标可以在垂直或者水平方向进行移动。

代码演示

基本用法 

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-textarea-item-basic',
  5.   template: `
  6.     <div class="am-demo-page">
  7.       <div style="padding: 15px;font-size: 16px; color:#000">Basic</div>
  8.       <div class="am-list" style="margin:0;">
  9.         <div class="am-list-header">Customize to focus</div>
  10.         <div class="am-list-body">
  11.           <TextareaItem [placeholder]="'auto focus in Alipay client'"
  12.                         [autoFocus]="true"
  13.                         [title]="'标题'"
  14.                         [autoHeight]="true"
  15.           ></TextareaItem>
  16.           <TextareaItem [placeholder]="'click the button below to focus'"
  17.                         [title]="'标题'"
  18.                         [autoHeight]="true"
  19.                         [focus]="inputFocus"
  20.           ></TextareaItem>
  21.           <div class="am-list-item am-list-item-middle">
  22.             <div class="am-list-line">
  23.               <div class="am-list-content" style="width:100%;color:#108ee9;text-align:center" (click)="clickFocusInput()">
  24.                 click to focus
  25.               </div>
  26.             </div>
  27.             <div class="am-list-ripple" style="display: none;"></div>
  28.           </div>
  29.         </div>
  30.       </div>
  31.       <div class="am-list" style="margin:0;">
  32.         <div class="am-list-header">Auto / Fixed height</div>
  33.         <div class="am-list-body">
  34.           <TextareaItem [title]="'高度自适应'" [autoHeight]="true" [labelNumber]="5">
  35.           </TextareaItem>
  36.           <TextareaItem [rows]="3" [placeholder]="'fixed number of lines'">
  37.           </TextareaItem>
  38.         </div>
  39.       </div>
  40.       <div class="am-list" style="margin:0;">
  41.         <div class="am-list-header">Show clear</div>
  42.         <div class="am-list-body">
  43.           <TextareaItem [clear]="true" [placeholder]="'displayed clear while typing'" [title]="'标题'"></TextareaItem>
  44.         </div>
  45.       </div>
  46.       <div class="am-list" style="margin:0;">
  47.         <div class="am-list-header">Custom title（text / image / empty)</div>
  48.         <div class="am-list-body">
  49.           <TextareaItem [title]="customTitle" [placeholder]="'title can be customized'">
  50.           </TextareaItem>
  51.         </div>
  52.       </div>
  53.       <div class="am-list" style="margin:0;">
  54.         <div class="am-list-header">Limited value length</div>
  55.         <div class="am-list-body">
  56.           <TextareaItem [placeholder]="'can enter up to 10 characters'" [count]="10"></TextareaItem>
  57.         </div>
  58.       </div>
  59.       <div class="am-list" style="margin:0;">
  60.         <div class="am-list-header">Count</div>
  61.         <div class="am-list-body">
  62.           <TextareaItem [rows]="5" [count]="100" [defaultValue]="'计数功能,我的意见是...'">手机号码</TextareaItem>
  63.         </div>
  64.       </div>
  65.       <div class="am-list" style="margin:0;">
  66.         <div class="am-list-header">Not editable / Disabled</div>
  67.         <div class="am-list-body">
  68.           <TextareaItem [title]="'姓名'" [editable]="false" [defaultValue]="'not editable'"></TextareaItem>
  69.           <TextareaItem [title]="'姓名'" [disabled]="true" [value]="'disabled style'"></TextareaItem>
  70.         </div>
  71.       </div>
  72.     </div>
  74.     <ng-template #customTitle>
  75.       <img src="https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png" style="width:28px;height:28px" alt="" />
  76.     </ng-template>
  77.   `,
  78.   styles: [
  79.     `
  80.       .am-demo-page {
  81.         box-sizing: content-box;
  82.       }
  83.       .am-list-body {
  84.         position: relative;
  85.         background-color: #fff;
  86.         border-top: 1px solid #ddd;
  87.         border-bottom: 1px solid #ddd;
  88.       }
  89.       .am-list-header {
  90.         padding: 15px 15px 9px 15px;
  91.         font-size: 14px;
  92.         color: #888;
  93.         width: 100%;
  94.         -webkit-box-sizing: border-box;
  95.         box-sizing: border-box;
  96.       }
  97.       /deep/ .am-list-body .am-list-item.am-textarea-item:not(:last-child) {
  98.         border-bottom: 1px solid #ddd;
  99.       }
  101.       .am-list-item .am-list-line .am-list-content {
  102.         -webkit-box-flex: 1;
  103.         -webkit-flex: 1;
  104.         -ms-flex: 1;
  105.         flex: 1;
  106.         color: #000;
  107.         font-size: 17px;
  108.         line-height: 1.5;
  109.         text-align: left;
  110.         width: auto;
  111.         overflow: hidden;
  112.         text-overflow: ellipsis;
  113.         white-space: nowrap;
  114.         padding-top: 7px;
  115.         padding-bottom: 7px;
  116.       }
  117.     `
  118.   ]
  119. })
  120. export class DemoTextareaItemBasicComponent {
  121.   value;
  122.   error;
  123.   numberFocus = {
  124.     focus: false,
  125.     date: new Date()
  126.   };
  127.   inputFocus = {
  128.     focus: false,
  129.     date: new Date()
  130.   };
  132.   titleFocus = {
  133.     focus: false,
  134.     date: new Date()
  135.   };
  136.   autoFocus = { focus: true, date: new Date() };
  138.   inputErrorClick(e) {}
  140.   clickFocus() {
  141.     this.numberFocus = {
  142.       focus: true,
  143.       date: new Date()
  144.     };
  145.   }
  147.   clickFocusInput() {
  148.     this.inputFocus = {
  149.       focus: true,
  150.       date: new Date()
  151.     };
  152.   }
  153. }

TextareaItem多行输入 - 图1

API

属性说明类型默认值
ngModelvalue, 双向绑定String无
valuevalueString无
defaultValue设置初始默认值String-
placeholderplaceholderString''
editable是否可编辑booltrue
disabled是否禁用boolfalse
clear是否带清除功能(仅editable为true,disabled为false才生效)boolfalse
rows显示几行number1
count计数功能,兼具最大长度,默认为0,代表不开启计数功能number-
onChangechange 事件触发的回调函数(val: string): void-
onBlurblur 事件触发的回调函数(val: string): void-
onFocusfocus 事件触发的回调函数(val: string): void-
error报错样式boolfalse
onErrorClick点击报错 icon 触发的回调(): void无
autoHeight高度自适应, autoHeight 和 rows 请二选一boolfalse
autoFocus初始化自动获得焦点boolfalse
labelNumber定宽枚举值：num * @input-label-width: 34px，可用2-7之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符)number5
nametextarea 的 nameString-
prefixListCls列表 className 前缀Stringam-list
title文案说明String/node''

TextareaItem methods

属性说明类型默认值
focus强制获得焦点--