vue & child component & props

vue pass data to child component

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>

<script>
    // "use strict";
    /**
     *
     * @author xgqfrms
     * @license MIT
     * @copyright xgqfrms
     *
     * @description 模块-CropCard
     * @augments
     * @example
     * @link
     * @created 2019-05-22
     *
     */

    // import Light from "light";
    import defaultImage from "../../images/search-history/dd-logo.png";
    export default {
        props: [
            "cropName",
            "cropNameOther",
            "cropOwner",
            "cropMoney",
        ],
        name: "CropCard",
        data() {
            return {
                value: "",
                logo: defaultImage,
                isShowHotFire: true,
            };
        },
        methods: {
            AutoSkipToSearchPage() {
                let url = window.location.origin;
                let hash = `search`;
                Light.navigate(
                    `${url}/#/${hash}`,
                    {
                        // message: "",
                    },
                    {
                        title: "",// 公司 / 资讯 / 链谱 / 人物 / 数据
                        replace: false,
                    },
                );
            },
        },
        mounted() {
            // props ???
            console.log(`mounted `, this.props);
            // undefined
        },
        created() {
            console.log(`created `, this.props);
            // undefined
            console.log(this.cropName);
            console.log(this.cropOwner);
            console.log(this.cropMoney);
            // OK
        },
    };

/*

    import * as CropCard from "./components/corp-card";
    export default {
        name: "search",
        components:{
            CropCard,
        },
    },

*/
</script>


<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>

<script>
    // "use strict";
    /**
     *
     * @author xgqfrms
     * @license MIT
     * @copyright xgqfrms
     *
     * @description 模块-CropCard
     * @augments
     * @example
     * @link
     * @created 2019-05-22
     *
     */

    // import Light from "light";
    import defaultImage from "../../images/search-history/default.png";
    export default {
        props: [
            "cropObj",
        ],
        name: "CropCard",
        data() {
            return {
                isShowCropCard: true,
                cropId: "",
                cropName: "",
                cropNameOther: "",
                cropOwner: "",
                cropMoney: "",
                cropLogo: defaultImage,
                cropShowHotFire: false,
            };
        },
        methods: {
            AutoSkipToPage(hash =``) {
                let url = window.location.origin;
                let id = this.cropId;
                if (!hash) {
                    hash = `search`;
                }
                Light.navigate(
                    `${url}/#/${hash}`,
                    {
                        id,
                    },
                    {
                        title: "",
                        replace: false,
                    },
                );
            },
        },
        mounted() {
            // props
        },
        created() {
            try {
                if (this.cropObj) {
                    let {
                        cropId,
                        cropName,
                        cropNameOther,
                        cropOwner,
                        cropMoney,
                        cropLogo,
                        cropShowHotFire,
                    } = this.cropObj;
                    this.cropId = cropId ? cropId : "";
                    this.cropName = cropName ? cropName : "";
                    this.cropNameOther = cropNameOther ? cropNameOther : "";
                    this.cropOwner = cropOwner ? cropOwner : "";
                    this.cropMoney = cropMoney ? cropMoney : "";
                    this.cropLogo = cropLogo ? cropLogo : defaultImage;
                    this.cropShowHotFire = cropShowHotFire ? cropShowHotFire : false;
                    this.isShowCropCard = true;
                } else {
                    this.isShowCropCard = false;
                    throw new Error(`CropCard 的 cropObj 属性不可为空!`);
                }
            } catch (err) {
                console.error(`CropCard 使用错误: \n`, err);
            }
        },
    };
</script>


<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>

posted @ 2019-05-22 16:12 xgqfrms 阅读(265) 评论(6) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

xgqfrms

welcome to xgqfrms's official blogs of cnblogs!

vue & child component & props

vue & child component & props

vue components

vue register component single file

TODO list

vue card components demo

公告