• TextareaItem多行输入
    • 规则
  • 代码演示
  • API
  • TextareaItem methods

    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强制获得焦点--