text

文本容器。

示例

  1. <template>
  2.   <page title="text演示">
  3.     <view class="page-demo">
  4.       <view class="text-area">
  5.         <view c-for="{{addLine}}" c-key="{{item}}">
  6.           <text class="line-text">{{item}}</text>
  7.         </view>
  8.       </view>
  9.       <view class="btn" c-bind:tap="add"><text class="{{addTextClass}}">add line</text></view>
  10.       <view class="btn" c-bind:tap="remove"><text class="{{removeTextClass}}">remove line</text></view>
  11.     </view>
  12.   </page>
  13. </template>
  14. <script>
  15. class Text {
  16.   data = {
  17.     allLine: [
  18.       "chameleon的目标是Write once run everywhere",
  19.       "chameleon主要特性: ",
  20.       "1、简洁强大的构建配置",
  21.       "2、语法统一、快速上手",
  22.       "3、方便的数据管理方案",
  23.       "4、差异化方案",
  24.       "......"
  25.     ],
  26.     addLine: []
  27.   }
  28.   computed = {
  29.     addTextClass() {
  30.       return this.allLine.length === this.addLine.length ? 'disable-text' : 'active-text';
  31.     },
  32.     removeTextClass() {
  33.       return this.addLine.length === 0 ? 'disable-text': 'active-text';
  34.     }
  35.   }
  36.   methods = {
  37.     add() {
  38.       if(this.addLine.length >= this.allLine.length) {
  39.         return;
  40.       }
  41.       this.addLine.push(this.allLine[this.addLine.length])
  42.     },
  43.     remove() {
  44.       if(this.addLine.length<=0) {
  45.         return;
  46.       }
  47.       this.addLine.pop();
  48.     }
  49.   }
  50. }
  51. export default new Text();
  52. </script>
  53. <style scoped>
  54.  .page-demo {
  55.    background: #F8F8F8;
  56.    flex: 1;
  57.  }
  58. .text-area {
  59.   margin: 100cpx 50cpx 100cpx;
  60.   padding: 40cpx;
  61.   min-height: 300cpx;
  62.   background-color: #fff;
  63.   font-size: 30cpx;
  64.   color: #353535;
  65.   text-align: center;
  66. }
  67. .line-text {
  68.   font-size: 30cpx;
  69.   text-align: center;
  70. }
  71. .btn {
  72.   height: 100cpx;
  73.   width: 600cpx;
  74.   border-radius: 6cpx;
  75.   display: flex;
  76.   justify-content: center;
  77.   align-items: center;
  78.   margin: 30cpx 75cpx;
  79.   border: 1px solid #999;
  80. }
  81. .active-text {
  82.   color: #000;
  83.   font-size: 40cpx;
  84. }
  85. .disable-text {
  86.   color: #999;
  87.   font-size: 40cpx;
  88. }
  89. </style>
  90. <script cml-type="json">
  91. {
  92.   "base": {}
  93. }
  94. </script>