鸡汤来咯开发学习笔记-10

1.创建一个soup-tab-group的组件，然后把以前index.vue的soup-tab-group的内容包括scss样式移植到组件里面，然后index.vue再引用

<template>

    <view class="soupTapGroup">
        <view class="tab" v-if="true">
            <view class="icon">
                <image src="../../static/images/du-icon.png" mode="aspectFill"></image>
            </view>
            <view class="text">毒鸡汤</view>
        </view>
        <view class="tab" v-else>
            <view class="icon">
                <image src="../../static/images/xin-icon.png" mode="aspectFill"></image>
            </view>
            <view class="text">心灵鸡汤</view>
        </view>
    </view>

 </template>

 <script setup>

  </script>

  <style lang="scss" scoped>
.soupTapGroup {



    .tab {

        height: 56rpx;
        width: fit-content;
        background: #aaa;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        font-weight: 400;
        letter-spacing: normal;
        padding: 0 20rpx;
        border-radius: 56rpx;

        .icon {
            display: flex;
            height: 36rpx;
            width: 36rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
                width: 100%;
                height: 100%;
            }

        }

        .text {
            padding-left: 10rpx;
        }

    }

    .tab:nth-child(1) {
        background: #FFF3F7;

        .icon {
            background: linear-gradient(to right, #f83162, #ff7795);
        }
    }

    .tab:nth-child(2) {
        background: #EDFDF0;

        .icon {
            background: linear-gradient(to right, #4f9153, #4bbb8b);
        }
    }
}
</style>

2.创建鸡汤详情页，detial.vue的页面，并在page.json加上"navigationBarTitleText" : "鸡汤详情"//此处为bar上面的标题

3.移植成为其他的组件soup-text-content和上面第一个步骤一样

4.在detial.vue和index.vue中分别引入这两个组件

5.修改公共样式，其默认值为none //为none时就是不限制字数行数，为详情页detail准备

@mixin maxline($row:none) {
display: -webkit-box;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
overflow: hidden;
}

6.在组件soup-text-content中，写入以下代码

<template>
<text class="soup-content" :style="{'-webkit-line-clamp':maxline}">  //获取变量，来修改可显示数
    别跟傻瓜吵架，\n
    不然旁人会搞不清楚，\n
    到底谁是傻瓜\n
    别跟傻瓜吵架，\n
    不然旁人会搞不清楚，\n
    到底谁是傻瓜
</text>
</template>

<script setup>
defineProps({            //Vue3 中的 defineProps：优雅地实现子父组件传值
    maxline:{
        type:[String,Number],  //限制传值类型
        default:"none"
    }  //定义maxline使得，index.vue可以传值来限制行数的表达(下面一处笔记表达)，在引用组件的时候，而detail无需这样做，则直接完全显示
})

 </script>

<style lang="scss" scoped>
.soup-content{
    font-size: 50rpx;
    font-weight: lighter;
    width: 100%;
    letter-spacing: 0.05em;
    line-height: 1.8em;
    margin-top: 10rpx;
    margin-bottom: 60rpx;

    @include maxline();
}
</style>

7.<soup-text-content maxline=5></soup-text-content> //传入限制值5

8.auther部分加入soup-text-content，和前面部分转移操作一样