vue & child component & props

最新推荐文章于 2024-03-25 13:01:07 发布

weixin_30240349

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量173

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xgqfrms/p/10906571.html

版权

vue & child component & props

vue pass data to child component

https://vuejs.org/v2/guide/components.html

https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

https://stackoverflow.com/questions/39199303/pass-data-from-parent-to-child-component-in-vue-js

vue components

how to write an vue component

vue register component single file

https://vuejs.org/v2/guide/components-registration.html

https://vuejs.org/v2/guide/components.html

https://vuejs.org/v2/guide/single-file-components.html

https://stackoverflow.com/questions/44568323/vue-js-loading-single-file-components

https://stackoverflow.com/questions/43622907/how-do-i-register-a-vue-component

TODO list

pass event to CropCard Components
export components, publish to npm

???

vue card components demo


<template>
    <div class="crop-card-container">
        <div
            v-if="isShowHotFire"
            class="crop-card-fire">
            <span class="crop-card-text"></span>
        </div>
        <div class="crop-card-logo">
            <img
                :src="logo"
                alt=""
                class="crop-card-logo-img"
            />
        </div>
        <div class="crop-card-right">
            <span class="crop-card-right-title">
                <span class="crop-card-right-title-key">
                    {{cropName}}
                </span>
                <span class="crop-card-right-title-value">
                    {{cropNameOther}}
                </span>
                <!-- <span class="crop-card-right-title-key">钉钉</span>
                <span class="crop-card-right-title-value">(中国) 信息技术有限公司</span> -->
            </span>
            <p class="crop-card-right-content">
                <span class="crop-card-right-content-key">法定代表人</span>
                <span class="crop-card-right-content-key">注册资本</span>
            </p>
            <p class="crop-card-right-content">
                <span class="crop-card-right-content-value">
                    {{cropOwner}}
                </span>
                <span class="crop-card-right-content-value">
                    {{cropMoney}}
                </span>
                <!-- <span class="crop-card-right-content-value">马云</span>
                <span class="crop-card-right-content-value">330886万美元</span> -->
            </p>
        </div>
        <div class="crop-card-line"></div>
        <div class="crop-card-footer">
            <span class="crop-card-footer-key">品牌</span>
            <span class="crop-card-footer-value">
                {{cropName}}
            </span>
            <!-- <span class="crop-card-footer-value">钉钉</span> -->
        </div>
    </div>
</template>




<style lang="css">
html{
    --color: #f0f;
    font-family:PingFangSC-Regular;
    font-weight:400;
}
.crop-card-container{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: calc(100vw);
    height: calc(2.9rem);
    border-bottom: 0.2rem solid rgba(249,248,253,1);
}
.crop-card-logo{
    order: 0;
    flex: 0 1 auto;
    margin: 0.32rem;
    margin-right: 0.2rem;
    height: 1.9rem;
    height: calc(1.9rem - 0.64rem);
}
.crop-card-logo-img{
    width: 0.64rem;
    height: 0.64rem;
}
.crop-card-right{
    order: 1;
    flex: 0 1 auto;
    line-height: 0.28rem;
    height: 0.28rem;
    font-size: 0.34rem;
    width: 6.34rem;
    height: calc(1.9rem - 0.42rem);
    margin-top: 0.42rem;
}
.crop-card-right-title{
    width: 6.34rem;
}
.crop-card-right-title-key{
    color:rgba(25,31,37,1);
    font-weight: 600;
}
.crop-card-right-title-value{
    color:rgba(25,31,37, 0.5);
}
.crop-card-right-content{
    line-height: 0.40rem;
    height: 0.40rem;
    font-size: 0.28rem;
    width: 6.34rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}
.crop-card-right-content-key{
    color:rgba(25,31,37,0.4);
    width: 2.86rem;
    min-width: 2.86rem;
    display: inline-block;
}
.crop-card-right-content-value{
    color:rgba(25,31,37,1);
    width: 2.86rem;
    min-width: 2.86rem;
    display: inline-block;
    font-weight: 600;
}
.crop-card-line {
    order: 3;
    flex: 0 1 auto;
    width: 7.5rem;
    height: 2px;
    background:rgba(25,31,37,0.08);
    margin: 0;
    padding: 0;
}
.crop-card-footer{
    order: 4;
    flex: 0 1 auto;
    height: 0.8rem;
}
.crop-card-footer-key{
    font-size: 0.24rem;
    line-height: 0.34rem;
    height: 0.34rem;
    width: 0.76rem;
    min-width: 0.76rem;
    color:rgba(25,31,37,0.4);
    display: inline-block;
    margin: 0.24rem 0 0.22rem 0.32rem;
}
.crop-card-footer-value{
    font-size: 0.24rem;
    line-height: 0.34rem;
    height: 0.34rem;
    min-width: 0.5rem;
    font-weight: 600;
    color:rgba(25,31,37,1);
}
.crop-card-fire{
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-width: 0.32rem;
    border-style: solid;
    border-color: rgba(255,148,62,1) rgba(255,148,62,1) transparent transparent;
    cursor: pointer;
}
.crop-card-text{
    display: inline-block;
    transform: translateX(0.03rem) translateY(-0.25rem);
}
.crop-card-text::after{
    content: "?";
    display: block;
    color: #fff;
    background: transparent;
}

</style>


<template>
    <div
        v-if="isShowCropCard"
        @click="AutoSkipToPage(`enterprise/special-topics`)"
        class="crop-card-container">
        <div
            v-if="cropShowHotFire"
            class="crop-card-fire">
            <span class="crop-card-text"></span>
        </div>
        <div class="crop-card-logo">
            <img
                :src="cropLogo"
                alt=""
                class="crop-card-logo-img"
            />
        </div>
        <div class="crop-card-right">
            <span class="crop-card-right-title">
                <span class="crop-card-right-title-key">
                    {{cropName}}
                </span>
                <span class="crop-card-right-title-value">
                    {{cropNameOther}}
                </span>
            </span>
            <p class="crop-card-right-content">
                <span class="crop-card-right-content-key">法定代表人</span>
                <span class="crop-card-right-content-key">注册资本</span>
            </p>
            <p class="crop-card-right-content">
                <span class="crop-card-right-content-value">
                    {{cropOwner}}
                </span>
                <span class="crop-card-right-content-value">
                    {{cropMoney}}
                </span>
            </p>
        </div>
        <div class="crop-card-line"></div>
        <div class="crop-card-footer">
            <span class="crop-card-footer-key">品牌</span>
            <span class="crop-card-footer-value">
                {{cropName}}
            </span>
        </div>
    </div>
</template>




<style lang="css">
html{
    --highlight-color:rgba(255, 148, 62, 1);
    font-family:PingFangSC-Regular;
    font-weight:400;
}
.crop-card-container{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: calc(100vw);
    height: calc(2.9rem);
    border-bottom: 0.2rem solid rgba(249,248,253,1);
}
.crop-card-logo{
    order: 0;
    flex: 0 1 auto;
    margin: 0.32rem;
    margin-right: 0.2rem;
    height: 1.9rem;
    height: calc(1.9rem - 0.64rem);
}
.crop-card-logo-img{
    width: 0.64rem;
    height: 0.64rem;
}
.crop-card-right{
    order: 1;
    flex: 0 1 auto;
    line-height: 0.28rem;
    height: 0.28rem;
    font-size: 0.34rem;
    width: 6.34rem;
    height: calc(1.9rem - 0.42rem);
    margin-top: 0.42rem;
}
.crop-card-right-title{
    width: 6.34rem;
}
.crop-card-right-title-key{
    color:var(--highlight-color);
    /* color:rgba(25,31,37,1); */
    font-weight: 600;
}
.crop-card-right-title-value{
    color:rgba(25,31,37, 0.5);
}
.crop-card-right-content{
    line-height: 0.40rem;
    height: 0.40rem;
    font-size: 0.28rem;
    width: 6.34rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}
.crop-card-right-content-key{
    color:rgba(25,31,37,0.4);
    width: 2.86rem;
    min-width: 2.86rem;
    display: inline-block;
}
.crop-card-right-content-value{
    color:rgba(25,31,37,1);
    width: 2.86rem;
    min-width: 2.86rem;
    display: inline-block;
    font-weight: 600;
}
.crop-card-line {
    order: 3;
    flex: 0 1 auto;
    width: 7.5rem;
    height: 2px;
    background:rgba(25,31,37,0.08);
    margin: 0;
    padding: 0;
}
.crop-card-footer{
    order: 4;
    flex: 0 1 auto;
    height: 0.8rem;
}
.crop-card-footer-key{
    font-size: 0.24rem;
    line-height: 0.34rem;
    height: 0.34rem;
    width: 0.76rem;
    min-width: 0.76rem;
    color:rgba(25,31,37,0.4);
    display: inline-block;
    margin: 0.24rem 0 0.22rem 0.32rem;
}
.crop-card-footer-value{
    font-size: 0.24rem;
    line-height: 0.34rem;
    height: 0.34rem;
    min-width: 0.5rem;
    font-weight: 600;
    color:rgba(25,31,37,1);
}
.crop-card-fire{
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-width: 0.32rem;
    border-style: solid;
    border-color: rgba(255,148,62,1) rgba(255,148,62,1) transparent transparent;
    cursor: pointer;
}
.crop-card-text{
    display: inline-block;
    transform: translateX(0.03rem) translateY(-0.25rem);
}
.crop-card-text::after{
    content: "?";
    display: block;
    color: #fff;
    background: transparent;
}

</style>

转载于:https://www.cnblogs.com/xgqfrms/p/10906571.html

weixin_30240349

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue & child component & props

vue & child component & propsvue pass data to child componenthttps://vuejs.org/v2/guide/components.htmlhttps://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-wit...
复制链接

扫一扫