vue & components & props & methods & callback
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 发布文章使用：只允许注册用户才可以访问！
vue & components & props & methods & callback的更多相关文章
- [Vue @Component] Extend Vue Components in TypeScript
This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...
- [转]Vue中用props给data赋初始值遇到的问题解决
原文地址:https://segmentfault.com/a/1190000017149162 2018-11-28更:文章发布后因为存在理解错误,经@Kim09AI同学提醒后做了调整,在此深表感谢 ...
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
- vue & watch props
vue & watch props bug OK watch: { // props // chatObj: () => { // // bug // log(`this.chatObj ...
- vue components & `@import css` bug
vue components @import css not support css3 @import https://github.com/vuejs/vue-loader/issues/138#i ...
- Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...
- [Vue @Component] Simplify Vue Components with vue-class-component
While traditional Vue components require a data function which returns an object and a method object ...
- [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript
With properties we can follow a one-way parent→child flow communication between components. This les ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
随机推荐
- setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码 ...
- exkmp（Z函数） 笔记
exkmp 用于求解这样的问题: 求文本串 \(T\) 的每一个后缀与模式串 \(M\) 的匹配长度(即最长公共前缀长度).特别的,取 \(M=T\),得到的这个长度被称为 \(Z\) 函数.&quo ...
- loj10087
Southwestern Europe 2002,题面可参考 POJ 1201. 给定 n 个闭区间 [a_i,b_i] 和 n 个整数c_i .你需要构造一个整数集合Z ,使得对于任意i (1< ...
- Spark：常用transformation及action，spark算子详解
常用transformation及action介绍,spark算子详解 一.常用transformation介绍 1.1 transformation操作实例 二.常用action介绍 2.1 act ...
- python模块----yagmail模块、smtplib模块 （电子邮件）
yagmail模块 python标准库发送电子邮件的模块比较复杂,so,许多开源的库提供了更加易用的接口来发送电子邮件,其中yagmail是使用比较广泛的开源项目,yagmail底层依然使用smtpl ...
- VXLAN配置实例（华为）
常用命令总结: bridge-domain bd-id,创建广播域BD,并进入BD视图. description description,配置BD的描述信息. l2 binding vlan vlan ...
- 开发环境管理利器Vagrant
引言 不知道你是否经历过,开发环境与生产环境不一致.Windows开发和Linux上的包效果不一样.在我这运行时好的啊 等等等问题,那有没有解决方法呢? 答案就是Vagrant.Docker 1.简介 ...
- WinformGDI+入门级实例——扫雷游戏(附源码)
写在前面: 本文将作为一个入门级的.结合源码的文章,旨在为刚刚接触GDI+编程或对相关知识感兴趣的读者做一个入门讲解.游戏尚且未完善,但基本功能都有,完整源码在文章结尾的附件中. 整体思路: 扫雷的游 ...
- 查看文件MD5值
Windows 打开命令窗口(Win+R),然后输入cmd ·输入命令certutil -hashfile 文件绝对路径 MD5 Linux MD5算法常常被用来验证网络文件传输的完整性,防止文件被人 ...
- 2020牛客暑期多校训练营（第四场） C - Count New String （字符串，广义后缀自动机，序列自动机）
Count New String 题意: 定义字符串函数 \(f(S,x,y)(1\le x\le y\le n)\),返回一个长度为y-x+1的字符串,第 i 位是 \(max_{i=x...x+k ...