vue & components & props & methods & callback

[xgqfrms]

vue & components & props & methods & callback

demo

solution 1 & props & data

<template>
    <div
        v-if="isShowCorpCard"
        @click="AutoSkip"
        :class="isShowAlias ? `corp-card-container-big` : `corp-card-container`">
        <!-- <div
            v-if="corpShowHotFire"
            class="corp-card-fire">
            <span class="corp-card-text"></span>
        </div> -->
        <div class="corp-card-logo">
            <img
                :src="corpLogo"
                alt=""
                class="corp-card-logo-img"
            />
        </div>
        <div class="corp-card-right">
            <span class="corp-card-right-title">
                <span class="corp-card-right-title-value">
                    {{getHighlightOthers(corpName, `prefix`)}}
                </span>
                <span class="corp-card-right-title-key">
                    {{getHighlightKeyword(corpName)}}
                </span>
                <span class="corp-card-right-title-value">
                    {{getHighlightOthers(corpName, `suffix`)}}
                </span>
                <span class="star-market" v-if="isShowSARTMarket">
                    科创板
                </span>
            </span>
            <p class="corp-card-right-content" v-if="isShowAlias">
                <span class="corp-card-right-alias-key">简称</span>
                <!-- <span class="corp-card-right-alias-value">{{corpAlias}}</span> -->
                <span class="corp-card-right-alias-value">{{corpAlias.replace(/ /ig, ``)}}</span>
                <!-- <span class="corp-card-right-alias-value">{{corpAlias.replace(` `, ``)}}</span> -->
            </p>
            <p class="corp-card-right-content">
                <span class="corp-card-right-content-key">法定代表人</span>
                <span class="corp-card-right-content-key">注册资本</span>
            </p>
            <p class="corp-card-right-content">
                <span class="corp-card-right-content-value">
                    {{corpOwner}}
                </span>
                <span class="corp-card-right-content-value">
                    {{corpMoney}}
                </span>
            </p>
        </div>
        <div class="corp-card-line"></div>
        <!-- <div class="corp-card-footer">
            <span class="corp-card-footer-key">品牌</span>
            <span class="corp-card-footer-value">
                {{corpName}}
            </span>
        </div> -->
    </div>
</template>

<script>
    // "use strict";
    /**
     *
     * @author xgqfrms
     * @license MIT
     * @copyright gildata
     *
     * @description 模块-CorpCard
     * @augments
     * @example
     * @link
     * @created 2019-05-22
     *
     */
    import Light from "light";
    // import defaultImage from "../../images/search-history/default.png";
    // import defaultImage from "../../images/logo/logo.png";
    import defaultImage from "../../images/search/logo.png";
    // import {addAttention} from "../utils/add-attention";
    import {
        getTrackEnrty,
        setTrackEnrty,
        PageTrack,
        EventTrack,
        // autoSetTrackEnrty,
    } from "../utils/user-track";
    let log = console.log;
    export default {
        props: [
            "corpObj",
            "inputKey",
            "searchTabType",
            "addHistoryCallback"
        ],
        name: "CorpCard",
        data() {
            return {
                addHistory: () => log(`add history`),
                isShowCorpCard: true,
                corpId: "",
                corpName: "",
                corpNameOther: "",
                corpOwner: "",
                corpMoney: "",
                corpLogo: defaultImage,
                corpShowHotFire: false,
                corpType: 0,
                isShowSARTMarket: true,
                secuCode: "",
                flag: 0,
                input: ``,
                corpAlias: ``,
                isShowAlias: false,
                searchType: `all`,
            };
        },
        methods: {
            getHighlightOthers(name = ``, type = `prefix`) {
                let result = ``;
                let key = this.input;
                key = key.trim().toLocaleUpperCase();
                let prefix = 0;
                let suffix = 0;
                if (name && name.length) {
                    if (name && name.length) {
                        if (type === `prefix`) {
                            prefix = name.toLocaleUpperCase().indexOf(key);
                            if(prefix >= 0) {
                                result = name.substr(0, prefix);
                            }
                        } else {
                            suffix = name.toLocaleUpperCase().lastIndexOf(key);
                            if(suffix >= 0) {
                                result = name.substr(suffix + key.length);
                            } else {
                                result = name;
                            }
                        }
                    }
                }
                return result;
            },
            getHighlightKeyword(name = ``) {
                // null
                let result = ``;
                let key = this.input || "";
                key = key.trim().toLocaleUpperCase();
                let prefix = 0;
                if (name && name.length) {
                    prefix = name.toLocaleUpperCase().indexOf(key);
                    if(prefix >= 0) {
                        result = name.substr(prefix, key.length);
                    }
                }
                return result;
            },
            callback() {
                log(`add history callback!`);
                this.addHistory();
            },
            AutoSkip() {
                this.callback();
                let searchEntry = getTrackEnrty();
                log(`corp & user behavior track`, searchEntry);
                // user behavior track
                let keyword = this.input;
                let params = {
                    c_own_column: `search`,
                    c_source_entry: searchEntry,
                    resultType: `skip`,
                    key_word: keyword,
                };
                let trackId = `search_all_skipCorp`;
                let searchType = this.searchType;
                if (searchType === `corp`) {
                    trackId = `search_corp_skipCorp`;
                }
                log(`corp & searchType`, searchType);
                EventTrack(trackId, params);
                // let hash = window.location.hash || ``;
                let hash = this.$route.query || ``;
                if (hash && hash.flag) {
                    let temp = `?flag=${hash.flag}`;
                    hash = temp;
                } else {
                    hash = ``;
                }
                let id = this.corpId;
                let flag = this.flag;
                let path =  `#/industry/corp/detail`;
                let secuCode = this.secuCode;
                // log(`flag =`, flag, typeof(flag));
                if (flag === 7) {
                // if (secuCode) {
                    path = `http://d64n59rsa.lightyy.com/index.html?s=${secuCode}&p=hsjy_1152#/index_jintan`;
                    // path = `https://d64n59rsa.lightyy.com/index.html?s=${secuCode}&p=hsjy_1152#/index_jintan`;
                }
                // if (this.corpType) {
                //     path =  `#/industry/corp/detail?id=${id}`;
                // }
                if (hash && hash.includes(`?flag=company`)) {
                    let params = {
                        id,
                        type: "A",// B, C
                    };
                    // addAttention(params)
                    // .then(json => log(`add json =`, JSON.stringify(json, null, 4)))
                    // .catch(err => error(`add error =`, err));
                } else {
                    //
                }
                Light.navigate(
                    path,
                    {
                        id,
                    },
                    {
                        replace: false,
                    },
                );
            },
        },
        mounted() {
            // props
        },
        created() {
            try {
                if (this.addHistoryCallback) {
                    this.addHistory = this.addHistoryCallback;
                } else {
                    //
                }
                if(this.inputKey) {
                    this.input = this.inputKey;
                } else {
                    this.input = ``;
                }
                if(this.searchTabType) {
                    // log(`corp & this.searchTabType`, this.searchTabType);
                    this.searchType = this.searchTabType;
                } else {
                    this.searchType = `all`;
                }
                // log(`this.input =`, this.input);
                if (this.corpObj) {
                    let {
                        corpId,
                        corpName,
                        corpNameOther,
                        corpOwner,
                        corpMoney,
                        corpLogo,
                        // corpShowHotFire,
                        isShowSARTMarket,
                        secuCode,
                        Flag: flag,
                        Tags,
                        // corpType,
                        corpAlias,
                    } = this.corpObj;
                    // log(`flag =`, flag, typeof(flag));
                    // this.corpType = corpType ? corpType : "";
                    this.flag = flag || 0;
                    this.corpAlias = corpAlias ? corpAlias : "";
                    this.isShowAlias = corpAlias ? true : false;
                    this.secuCode = secuCode ? secuCode : "";
                    this.corpId = corpId ? corpId : "";
                    this.corpName = corpName ? corpName : "";
                    this.corpNameOther = corpNameOther ? corpNameOther : "";
                    this.corpOwner = corpOwner ? corpOwner : "";
                    this.corpMoney = corpMoney ? corpMoney : "";
                    this.corpLogo = corpLogo ? corpLogo : defaultImage;
                    // this.corpShowHotFire = corpShowHotFire ? corpShowHotFire : false;
                    this.isShowSARTMarket = isShowSARTMarket ? isShowSARTMarket : false;
                    this.isShowCorpCard = true;
                } else {
                    this.isShowCorpCard = false;
                    throw new Error(`CorpCard 的 corpObj 属性不可为空!`);
                }
            } catch (err) {
                console.error(`CorpCard 使用错误: \n`, err);
            }
        },
    };
</script>


<style lang="css">
    @import url("./corp-card.css");
</style>

solution 2 & this.$emit()

this.$emit(addHistoryCallback);

<template>
    <div
        v-if="isShowNewsCard"
        @click="AutoSkip"
        class="news-card-container">
        <div class="news-card-content" ref="news-card-content">
            <span class="news-card-content-title">
                <!-- <span class="news-card-content-title-key">
                    {{newsTitle}}
                </span> -->
                <span class="news-card-content-title-value">
                    {{getHighlightOthers(newsTitle, `prefix`)}}
                </span>
                <span class="news-card-content-title-key">
                    {{getHighlightKeyword(newsTitle)}}
                </span>
                <span class="news-card-content-title-value">
                    {{getHighlightOthers(newsTitle, `suffix`)}}
                </span>
            </span>
            <span class="news-card-content-others">
                <span class="news-card-content-others-label" v-if="isShowNewsLabel">
                    {{newsLabel}}
                </span>
                <span class="news-card-content-others-time" ref="news-card-content-others-time" v-if="isShowNewsLabel">
                    {{newsTime}}
                </span>
                <span class="news-card-content-others-time news-card-content-others-time-long" ref="news-card-content-others-time" v-else>
                    {{newsTime}}
                </span>
            </span>
        </div>
        <div class="news-card-logo" v-if="isShowNewsImage">
            <img
                :src="newsImage"
                alt=""
                class="news-card-logo-img"
            />
        </div>
        <div class="news-card-line"></div>
    </div>
</template>

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

    import Light from "light";
    import {
        getTrackEnrty,
        setTrackEnrty,
        PageTrack,
        EventTrack,
        // autoSetTrackEnrty,
    } from "../utils/user-track";
    import {
        gonewsdetail,
    } from "../../lib/unitils";
    let log = console.log;
    let error = console.error;
    // import {addAttention} from "../utils/add-attention";
    export default {
        // props: [
        //     "newsObj",
        //     "inputKey",
        //     "searchTabType",
        //     // "addHistoryCallback",
        // ],
        props: {
            newsObj: {
                type: Object,
                default: () => {},
            },
            inputKey: {
                type: String,
                default: () => ``,
            },
            searchTabType: {
                type: String,
                default: () => `all`,
            },
            // method: {
            //     type: Function,
            //     default: () => {},
            // },
        },
        name: "NewsCard",
        data() {
            return {
                isShowNewsCard: true,
                newsId: "",
                newsType: "",
                newsTitle: "",
                newsLabel: "",
                newsTime: "",
                newsImage: "",
                isShowNewsImage: false,
                newsRight: "",
                newsAlias: ``,
                isShowAlias: false,
                searchType: `all`,
            };
        },
        methods: {
            getHighlightOthers(name = ``, type = `prefix`) {
                let result = ``;
                let key = this.input;
                key = key.trim().toLocaleUpperCase();
                let prefix = 0;
                let suffix = 0;
                if (name && name.length) {
                    if (name && name.length) {
                        if (type === `prefix`) {
                            prefix = name.toLocaleUpperCase().indexOf(key);
                            if(prefix >= 0) {
                                result = name.substr(0, prefix);
                            }
                        } else {
                            suffix = name.toLocaleUpperCase().lastIndexOf(key);
                            if(suffix >= 0) {
                                result = name.substr(suffix + key.length);
                            } else {
                                result = name;
                            }
                        }
                    }
                }
                return result;
            },
            getHighlightKeyword(name = ``) {
                // null
                let result = ``;
                let key = this.input || "";
                key = key.trim().toLocaleUpperCase();
                let prefix = 0;
                if (name && name.length) {
                    prefix = name.toLocaleUpperCase().indexOf(key);
                    if(prefix >= 0) {
                        result = name.substr(prefix, key.length);
                    }
                }
                return result;
            },
            AutoSkip() {
                this.$emit(`addHistoryCallback`);
                // this.$emit("addHistoryCallback");
                let searchEntry = getTrackEnrty();
                // log(`news & user behavior track`, searchEntry);
                // user behavior track
                let keyword = this.input;
                let params = {
                    c_own_column: `search`,
                    c_source_entry: searchEntry,
                    resultType: `skip`,
                    key_word: keyword,
                };
                let trackId = `search_all_skipNewsinfo`;
                let searchType = this.searchType;
                if (searchType === `newsinfo`) {
                    trackId = `search_newsinfo_skipNewsinfo`;
                }
                // log(`trackId =`, trackId);
                EventTrack(trackId, params);
                // let hash = window.location.hash || ``;
                let hash = this.$route.query || ``;
                if (hash && hash.flag) {
                    let temp = `?flag=${hash.flag}`;
                    hash = temp;
                } else {
                    hash = ``;
                }
                let id = this.newsId;
                let type = this.newsType;
                let right = this.newsRight;
                let path = `#/news/newsdetail/detailiframe`;
                if (hash && hash.includes(`?flag=information`)) {
                    let params = {
                        id,
                        type: "C",
                    };
                    // addAttention(params)
                    // .then(json => log(`add json =`, JSON.stringify(json, null, 4)))
                    // .catch(err => error(`add error =`, err));
                }
                gonewsdetail({
                    Right: right,
                    Id: id,
                });
                // Light.navigate(
                //     path,
                //     {
                //         id,
                //         // type,// copyright enum: 0, 1, ...
                //     },
                //     {
                //         replace: false,
                //     },
                // );
            },
        },
        mounted() {
            // props
            if (!this.newsImage) {
                let div = this.$refs["news-card-content"];
                div.classList.add("news-card-content-long");
                let span = this.$refs["news-card-content-others-time"];
                span.classList.add("news-card-content-others-time-long");
            }
        },
        created() {
            try {
                // if (this.addHistoryCallback) {
                //     this.addHistory = this.addHistoryCallback;
                // }
                if(this.inputKey) {
                    this.input = this.inputKey;
                } else {
                    this.input = ``;
                }
                if(this.searchTabType) {
                    this.searchType = this.searchTabType;
                } else {
                    this.searchType = `all`;
                }
                // log(`this.searchTabType =`, this.searchTabType);
                // log(`this.searchType =`, this.searchType);
                if (this.newsObj) {
                    // log(`this.newsObj`, JSON.stringify(this.newsObj, null, 4));
                    let {
                        newsId,
                        newsType,
                        newsTitle,
                        newsLabel,
                        newsTime,
                        newsImage,
                        newsRight,
                        // newsAlias,
                    } = this.newsObj;
                    // this.newsAlias = newsAlias ? newsAlias : "";
                    this.newsId = newsRight ? newsRight : "";// false
                    this.newsId = newsId ? newsId : "";
                    this.newsType = newsType ? newsType : "";
                    this.newsTitle = newsTitle ? newsTitle : "";
                    this.newsLabel = newsLabel ? newsLabel : "";
                    this.newsTime = newsTime ? newsTime : "";
                    this.newsImage = newsImage ? newsImage : "";
                    // log(`newsImage =`, newsImage, this.newsImage);
                    this.isShowNewsImage = newsImage ? true : false;
                    this.isShowNewsLabel = newsLabel ? true : false;
                    // log(`this.isShowNewsImage =`, this.isShowNewsImage);
                    this.isShowNewsCard = true;
                } else {
                    this.isShowNewsCard = false;
                    this.isShowNewsImage = false;
                    throw new Error(`NewsCard 的 newsObj 属性不可为空!`);
                }
            } catch (err) {
                error(`NewsCard 使用错误: \n`, err);
            }
        },
    };
</script>


<style lang="css">
    @import url("./news-card.css");
</style>

---

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

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

Vue.component('my-component', {
  props: {
    // Basic type check (`null` and `undefined` values will pass any type validation)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    },
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
      }
    },
    // Custom validator function
    propF: {
      validator: function (value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

https://michaelnthiessen.com/pass-function-as-prop

not too good

good

slot

https://adamwathan.me/the-trick-to-understanding-scoped-slots-in-vuejs/

https://vuejsdevelopers.com/2018/07/30/callback-props-vs-emitting-events/

https://medium.com/front-end-weekly/passing-methods-as-props-in-vue-js-d65805bccee

events

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

https://cn.vuejs.org/v2/guide/events.html

callback functions

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
    Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) event.preventDefault()
    alert(message)
  }
}

Event-Modifiers

https://vuejs.org/v2/guide/events.html#Event-Modifiers

Key-Modifiers

https://vuejs.org/v2/guide/events.html#Key-Modifiers

System-Modifier-Keys

https://vuejs.org/v2/guide/events.html#System-Modifier-Keys

Components Basics

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

---