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

1. pass event to CropCard Components

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

---

最新文章

1. “前.NET Core时代”如何实现跨平台代码重用 ——源文件重用
2. First Missing Positive && missing number
3. 解析window.open链接的参数
4. ExtJS的MessageBox总结
5. Bind 跨域名别名解析的问题
6. 通过共享用户ID来实现多个应用程序使用同一个进程（一些情况的测试）
7. Delphi7中编译提示“Unsafe type 'PChar'”的原因及处理办法
8. 最大流&最小割 - 专题练习
9. ExtJS实例1
10. Node.js v0.10.31API手冊-控制台
11. Example006为弹出窗口加入关闭按钮
12. java使用字节流和字符流实现文件复制
13. DRF 视图和路由
14. 事务理解及Spring中的事务
15. LeetCode14.最长公共前缀
16. Anaconda下载及安装及查看安装的Python库用法
17. 外同步信号检测---verilog---状态机
18. Centos配置jdk和tomcat环境
19. 转：C#常用的集合类型(ArrayList类、Stack类、Queue类、Hashtable类、Sort)
20. 【BZOJ】1095: [ZJOI2007]Hide 捉迷藏 括号序列+线段树

热门文章

1. HTTP/2与HTTP/3的新特性
2. (SqlServe)关于字符串长度被截断的问题
3. 调度 GMP
4. 为什么要使用 do while(0)?
5. vue初始化页面闪动问题
6. linux日志中查找关键字、前几行、结尾几行，Linux的find用法示例
7. 将一个 JavaBean 对象转化为一个 Map
8. docker（9）Dockerfile制作镜像
9. Pytest（9）skip跳过用例
10. KMP:补齐循环节