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属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
随机推荐
- Quartz 定时任务调度
一.在Quartz.NET中quartz.properties的配置文件,忽略不修改,考虑下面: var props = new NameValueCollection { { "quart ...
- 这些年来，一直不知道Code Fisrt的真实意义。
目录 Code First 是一个糟糕的名字 放弃 EDMX,但继续实行数据库优先 Code First 是一个糟糕的名字 很多人依据它的名字认为,它是在代码定义模型,然后从模型生成数据库. Code ...
- Redis 常见问题总结
1. 简单介绍一下 Redis 呗! 简单来说 Redis 就是一个使用 C 语言开发的数据库,不过与传统数据库不同的是 Redis 的数据是存在内存中的 ,也就是它是内存数据库,所以读写速度非常快, ...
- Node 使用webpack编写简单的前端应用
编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...
- Docker安装Mycat并实现mysql读写分离,分库分表
Docker安装Mycat并实现mysql读写分离,分库分表 一.拉取mycat镜像 二.准备挂载的配置文件 2.1 创建文件夹并添加配置文件 2.1.1 server.xml 2.1.2 serve ...
- Spark DataSource Option 参数
Spark DataSource Option 参数 1.parquet 2.orc 3.csv 4.text 5.jdbc 6.libsvm 7.image 8.json 9.xml 9.1读选项 ...
- Geospark-属性字段处理
Geospark将从shapefile.csv等格式文件以及DataFrame中的读取的字段保存到了Geometry的userData字段中,可以通过调用.getUserData()方法获取,他会返回 ...
- Django (auth模块、User对象、用户认证、线上-用户认证)
一.auth模块 django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: authenticate() 提供了用户认证,即验证用户名以及密码是否正确,一般需要usern ...
- Rsync同步工具
1.Rsync介绍 1.1 什么是Rsync? Rsync,remote synchronize顾名思意就知道它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接 ...
- 翻译：《实用的Python编程》01_Introduction_00_Overview
目录 | 下一节 (2 处理数据) 1. Python 简介 本章是第一章,将会从头开始介绍 Python 基础知识,让你从零开始,学会怎么编写.运行.调试一个简单的程序.最后,你可以运用这些 Pyt ...