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
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！