<script>
export default {
  name: "text-show-hide",
  data() {
    return {
      // 文章详细信息
      article: {
        title: '这是一篇测试文章',
        author: '小明',
        content: '这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。这是一篇测试文章，用于演示如何在uniapp中显示文章详情页面。',
      }
    };
  },
  methods: {
    change(e) {
      console.log('点击展开收起：' + e)
    }
  }
}
</script>

<template>
  <view class="container">
    <!-- 文章标题 -->
    <view class="title">{{ article.title }}</view>

    <!-- 文章作者 -->
    <view class="author">作者：{{ article.author }}</view>

    <!-- 文章内容 -->
<!--    <liu-show-hide showText="继续阅读" hideText="收起" @change="change">
      <view class="content">{{ article.content }}</view>
    </liu-show-hide>-->
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;
}

.title {
  font-size: 24px;
  margin-bottom: 10px;
  margin: 32rpx;
}

.author {
  color: #888;
  margin: 32rpx;
  margin-bottom: 20px;
}

.content {
  line-height: 1.5;
  font-size: 16px;
  text-indent: 2em;
  white-space: pre-wrap;
  padding: 0 32rpx;
}
</style>
