vue 查看全部和收起组件

1. 组件书写代码如下：

HTML

<template>
  <div class="content_warp">
    <div class="container">
      <div class="item" :style="{fontSize: fontSize + 'px', textIndent: (fontSize*2) +'px'}" v-if="flag">
        <span>{{content}}</span>
        <span :style="{color: color}" v-if="content !== null && content.length > 100" @click="change">
          收起
        </span>
      </div>
      <div class="item" :style="{fontSize: fontSize + 'px', textIndent: (fontSize*2) +'px'}" v-else>
        <span>{{content.substr(0, 100)}}</span>
        <span :style="{color: color}" v-if="content !== null && content.length > 100" @click="change">
          全部
        </span>
      </div>
    </div>
  </div>
</template>

JAVASCRIPT

export default {
  props: {
    content: {
      type: String,//值类型
      default: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'//默认值
    },
    fontSize: {
      type: Number,//值类型
      default: 16//默认值
    },
    color: {
      type: String,//值类型
      default: 'aqua'//默认值
    }
  },
  data(){
    return {
      flag: false
    }
  },
  methods: {
    change(){
      this.flag = !this.flag
    }
  }
}

CSS

.item{
  color: #333;
  word-break: break-all;
  padding: 10px 0;
  box-sizing: border-box;
  span:nth-of-type(2){
    cursor: pointer;
  }
}

2. 使用：

<template>
  <div class="container">
    <more></more>
  </div>
</template>

<script>
import More from '../components/More.vue'
export default {
  components: { More}
}
</script>

属性	类型	默认值	说明	必传
content	String	哈哈哈…	内容文字	否
fontSize	Number	16	选择字号	否
color	String	aqua	‘全部’‘收起’的字体颜色	否