自定义vue公用组件

自定义vue公用组件"/>

自定义vue公用组件

vue本身就是组件化的，每一个模块都是一个组件，我这里说的公用组件只是把项目里经常用的相似模块，经过自己的封装，再通过传参来实现代码的高效复用。在写这个组件的时候本来是想更方便，但最后我发现并没有方便到哪里，感觉传的参数很多，不知道下一个人会不会使用。

这个组件实现的是list，可点击调用函数/跳转链接/无反应，
我做了数据格式化，就是针对后端返回的不同字段，使用我这个组件的时候只需要再propJson参数里配置就可以了，里面有一个type默认是text就是纯文本，无事件，发布是想请大神帮我优化一下，怎么做到思路清晰，又能公用，别人一看就明白
效果图

完整代码

<template><el-card class="c-mar-b-20"><p class="c-title-box" v-if="title&&title !==''">{{title}}</p><ul v-if="dataList.length> 0" class="infinite-list"  style="overflow:auto"><li v-for="(item, index) in dataList" class="infinite-list-item" :key="index"><a v-if="defaultProps.type === 'link'" :href="item[defaultProps.url]"  class="c-text-ellipsis-1" target="_blank" :title="item[defaultProps.title]">{{ item[defaultProps.title] }}</a><p v-else-if="defaultProps.type === 'click'" @click="clickFun(item)" class="page-link c-text-ellipsis-1" :title="item[defaultProps.title]">{{ item[defaultProps.title] }}</p><p v-else class="c-text-ellipsis-1" :title="item[defaultProps.title]">{{ item[defaultProps.title] }}</p><div class="time-box">{{ item[defaultProps.time] }}</div></li><li  class="c-text-center"><el-button v-if="isList" type="text"  @click="getTaskList" :loading="indexLoad"><span class="c-font-3" v-if="indexLoad">加载中</span><span class="c-font-3" v-else>点击加载更多...</span></el-button><span class="c-font-3" v-else>暂无更多</span></li></ul><el-empty style="height:200px" v-else :description="emptyContent"></el-empty></el-card>
</template>
<script>
import { mergeJSON } from '@/utils/jsonFun.js'
export default {name: 'home',props: {propJson: {type: Object},btnLoad: {type: Boolean,default: false},isList: {type: Boolean,default: true},dataList: {type: Array},title: {type: String,default: '列表'},emptyContent: {type: String,default: '暂无内容'}},watch: {btnLoad (val) {this.indexLoad = val}},data () {return {indexLoad: false,defaultProps: {type: 'text',title: 'title',time: 'time',url: 'url'}}},created () {this.defaultProps = mergeJSON(this.defaultProps, this.propJson)},methods: {getTaskList () {this.indexLoad = falsethis.$emit('loadList')},clickFun (param) {this.$emit('listClick', param)}}
}
</script>
<style scoped lang="scss">
.infinite-list {height: 200px;position: relative;background: #fff;}.page-link {cursor: pointer;}.infinite-list-item {position: relative;padding-right: 172px;padding-bottom: 6px;margin: 10px 0;color: #363F4E;font-size: 16px;&:hover{p{color: $primary-color;}a {color: $primary-color;}}a {color: #363F4E;}.time-box {position: absolute;width: 162px;right: 0;top: 0px;text-align: center;}}
</style>

jsonFun.js

/*** json格式化* @param {*} minor json一* @param {*} main json 二* @returns 返回minor和main的并集，相同参数的值以后面一个的为准*/
export function mergeJSON (minor, main = {}) {const param = mainfor (const key in minor) {if (param[key] === undefined) { // 不冲突的，直接赋值param[key] = minor[key]continue}// 冲突了，如果是Object，看看有么有不冲突的属性// 不是Object 则以main为主，忽略即可。故不需要elseif (isJSON(minor[key])) {// arguments.callee 递归调用，并且与函数名解耦mergeJSON(minor[key], param[key])}}return param
}
// 附上工具
export function isJSON (target) {return typeof target === 'object' && target.constructor === Object
}
// 循环挂载到Vue原型中
// for (const funName in extension) {
//   Vue.prototype[funName] = extension[funName]
// }