31-在公共模块创建components组件

自定义一个公共模块写新闻内容样式

新闻内容部分每一条样式都是一样的，个人中心里，有一个浏览历史，也是一样的样式，写一个公共样式方便复用

创建一个components文件夹，这个文件夹名字是固定的，专门用来放自定义组件，在这个目录下面创建一个news_style组件，然后在index中引入这个组件

index.vue

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item" v-for="item in arr">国内</view>
      </scroll-view>

    <view class="content">
      <view class="row" v-for="item in newsList">
        <newsStyle></newsStyle>
      </view>
    </view>
	</view>
</template>

引入成功了

index页面只写每一条新闻的最基本样式，具体的样式写到自定义组件中

  .content {
    padding: 30rpx;
    .row {
      border-bottom: 1px solid #efefef;
      padding: 15rpx 0;
    }
  }

使文字在两行显示，超出部分显示省略号

// 使文字在两行显示,超出部分显示省略号
text-overflow: -o-ellipsis-lastline;
overflow: hidden;	//溢出内容隐藏
text-overflow: ellipsis;  //文本溢出部分用省略号表示
display: -webkit-box;	//特别显示模式
-webkit-line-clamp: 2;	//行数
line-clamp: 2;					
-webkit-box-orient: vertical;	//盒子中内容竖直排列

基本布局样式差不多就是这样 newsStyle.vue

<template>
  <view class="newsStyle">
    <view class="pic">
      <!-- mode是图片的显示方法 -->
      <image src="../../static/images/0.jpg" mode="aspectFill"></image>
    </view>
    <view class="text">
      <view class="title">默认的新闻标题默认的新闻标题默认的新闻标题默认的新闻标题默认的新闻标题默认的新闻标题</view>
      <view class="info">
        <text>作者名称</text>
        <text>998次浏览</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"newsStyle",
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.newsStyle {
  // 使图片和文字在一行显示
  display: flex;
  .pic {
    width: 230rpx;
    height: 160rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    // 使文字边框横向占满屏幕
    flex: 1;
    padding-left: 20rpx;
    display: flex;
    // 将项目垂直显示
    flex-direction: column;
    // 使项目上下排列
    justify-content: space-between;
    .title {
      font-size: 38rpx;
      color: #333;
      // 使文字在两行显示,超出部分显示省略号
      text-overflow: -o-ellipsis-lastline;
      	overflow: hidden;				//溢出内容隐藏
      	text-overflow: ellipsis;		//文本溢出部分用省略号表示
      	display: -webkit-box;			//特别显示模式
      	-webkit-line-clamp: 2;			//行数
      	line-clamp: 2;					
      	-webkit-box-orient: vertical;	//盒子中内容竖直排列
    }
    .info {
      font-size: 26rpx;
      color: #999;
      text {
        padding-right: 30rpx;
      }
    }
  }
}
</style>