lc-textarea

文本域组件

效果

使用方法

<template> 
  <div class="lc-demo">
    <scroller class="scroller">
      <title title="lc-textarea"></title>
      <category title="八种基本用法"></category>
     
        <text class="title-text">默认</text>
        <lc-textarea placeholder="提示"></lc-textarea>
        
        <text class="title-text">自定义行数</text>
        <lc-textarea :rows="6" placeholder="提示"></lc-textarea>

        <text class="title-text">显示计数器</text>
        <lc-textarea placeholder="提示" :max="50"></lc-textarea> 

        <text class="title-text">不显示计数器</text>
        <lc-textarea placeholder="提示" :show-counter="false"></lc-textarea> 

        <text class="title-text">有标题</text>
        <lc-textarea label="标题" placeholder="提示"></lc-textarea>
        
        <text class="title-text">自动获得焦点</text>
        <lc-textarea label="标题" placeholder="提示" :autofocus="true"></lc-textarea>     

        <text class="title-text">和input一起使用</text>
        <lc-input label="标题" placeholder="提示" :has-bottom-border="false"></lc-input>
        <lc-textarea label="标题" :has-top-border="false" style="margin-bottom:20px;"></lc-textarea>

      
      <category title="自定义标题样式"></category>
        <text class="title-text">label-width & label-align</text>
        <lc-textarea label="标题" placeholder="提示" label-width="140px" label-align="right"></lc-textarea>
        
        <text class="title-text">label-color</text>
        <lc-textarea label="标题" placeholder="提示" label-color="#0785DB"></lc-textarea> 


      <category title="四种事件"></category>
        <text class="title-text">focus事件</text>
        <lc-textarea placeholder="提示" @onFocus="onEvent('focus')"></lc-textarea>

        <text class="title-text">blur事件</text>       
        <lc-textarea placeholder="提示" @onBlur="onEvent('blur')"></lc-textarea>

        <text class="title-text">input事件</text>
        <lc-textarea placeholder="提示" @onInput="onEvent('input')"></lc-textarea>

        <text class="title-text">change事件</text>
        <lc-textarea placeholder="提示" @onChange="onEvent('change')"></lc-textarea>
        
    </scroller>
  </div>
</template>

<style scoped>
  .lc-demo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }

  .scroller {
    flex: 1;
  }

  .title-text {
    font-size: 32px;
    margin-top: 30px;
    margin-bottom: 16px;
    padding-left: 30px;
    color: #4a4a4a;
  }

</style>

<script>
  import Light from 'light';
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcTextarea from 'lighting-ui/packages/lc-textarea';
  import LcInput from 'lighting-ui/packages/lc-input';
  
  
  const modal = Light.requireModule('modal');
  
  export default {
    components: { Title, Category, LcTextarea, LcInput },
    data: () => ({
      hasTopBorder: false
    }),
    methods: {
      onEvent (event) {
        modal.toast({
          message: `event:${event}`
        })
      }
    }
  }
</script>

可配置参数

Prop	Type	Required	Default	Description
label	string	N	-	标题文字
showCounter	boolean	N	true	是否显示计数器
max	number	N	-	最大输入字符数
value	string	N	-	值
placeholder	string	N	-	占位文字
rows	number	N	3	行数
autofocus	boolean	N	false	是否自动获得焦点
hasTopBorder	boolean	N	true	是否有上边框
hasBottomBorder	boolean	N	true	是否有下边框
cellStyle	object	N	{alignItems:'flex-start'}	文本域自定义样式
titleStyle	object	N	{marginRight:'0'}	可输入区域自定义样式
labelWidth	string	N	-	标题宽度
labelAlign	string	N	-	标题文字对齐方式 left/center/right
labelColor	string	N	#4a4a4a	标题文字颜色