vue商品组件封装

最新推荐文章于 2023-07-21 08:41:46 发布

有趣的前端

最新推荐文章于 2023-07-21 08:41:46 发布

阅读量612

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wys997/article/details/107108180

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果:

在这里插入图片描述

API :

img :照片路径,
title :标题名字,
describe :描述,
obj :对象{ price: 现价,originalPrice:原价,sales:销量 }

代码:

<template>
    <div @click="clicks()">
        <div class="llen">
            <div class="img">
                <img :src="img">
            </div>
            <div class="xq">
                <p>{{title}}</p>
                <p style="margin: .3rem 0; ">{{describe}}</p>
                <p style="font-size: 14px; display: flex;justify-content: space-between">
                    <b style="color: red">现价:￥{{obj.price}}</b><s>原价:￥{{obj.originalPrice}}</s><span>销量{{obj.sales }}件</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "L-len",
        props: {
            img: {
                default: 'https://dcdn.it120.cc/2019/07/24/a30b67dd-61be-41bd-841c-7e3f8844e958.jpg',
                type: String
            },
            title: {
                default: 'Title标题',
                type: String
            },
            describe: {
                default: '描述',
                type: String
            },
            obj: Object,
        },
        components: {},
        data() {
            return {}
        },
        mounted() {
        },
        methods: {
            clicks(t) {
                this.$emit('click', t)
            }
        },
    }
</script>

<style scoped>
    .xq {
        width: 60%;
    }

    .llen {
        padding: .1rem 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: .02rem solid #eee;
        border-bottom: .01rem solid #eee;
    }

    .llen .img {
        width: 25%;
        border-radius: .1rem;
        overflow: hidden;
    }

    .llen .img img {
        width: 100%;
    }

</style>