JxlVersionUpdateLog 版本更新日志
当监测到版本有更新时，能够提示用户主要更新的功能点。
基于自封组件的 jxl-dialog 标签封装。
<template>
<jxl-dialog
:visible="visible"
class="version-update-log-dialog"
:show-close="false"
:close-on-click-modal="true"
width="600px"
:footer="false"
:body-style="{ padding: 0, backgroundColor: 'transparent' }"
@close="close"
>
<div class="version-update-log">
<div class="version-update-log-header">
<img src="./icon/update-version.png" alt="">
<span class="update-log-close" @click="close"><i class="el-icon-close" /></span>
</div>
<div class="version-update-log-body">
<div class="update-log-title">{{ version ? version + '：' : '' }}{{ title }}</div>
<div class="update-log-content">
<template v-if="_typeof(content) === Array">
<div v-for="(item, index) in content" :key="index" class="update-log-item">{{ item }}</div>
</template>
<div v-else-if="_typeof(content) === String" class="update-log-item">{{ content }}</div>
</div>
<a v-if="href" :href="href" target="_blank" class="view-more">查看更多 <i class="el-icon-right" /></a>
</div>
</div>
</jxl-dialog>
</template>
<script>
import mixin from '@/components/libs/mixin'
import JxlDialog from '@/components/libs/Dialog/JxlDialog'
/**
* JxlVersionUpdateLog 版本更新日志
* 当监测到版本有更新时，能够提示用户主要更新的功能点。
*/
export default {
name: 'JxlVersionUpdateLog',
components: { JxlDialog },
mixins: [mixin],
props: {
/**
* 版本标题
*/
title: {
type: String,
default: '',
require: true
},
/**
* 版本号，拼接在版本标题前面
* 示例：v1.0.0
*/
version: {
type: String,
default: ''
},
/**
* 版本详情页，跳转地址
*/
href: {
type: String,
default: ''
},
/**
* 版本内容
* String：支持单行文本，独段显示。
* Array：支持多行文本，分段显示。
*/
content: {
type: [String, Array],
default: '',
require: true
},
/**
* 是否通过挂载的方式调用此组件
* true 则在 mounted 时自动调用 open 打开弹窗
* false 则需要开发者手动调用 open 打开弹窗
*/
isMountCall: {
type: Boolean,
default: true
}
},
data() {
return {
visible: false
}
},
mounted() {
if (this.isMountCall) {
this.open() // 打开弹窗
}
},
methods: {
/**
* 打开弹窗
*/
open() {
this.visible = true
},
/**
* 关闭弹窗
*/
close() {
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.version-update-log-dialog {
/deep/ .el-dialog {
background: transparent;
box-shadow: none;
}
.version-update-log {
overflow: hidden;
.version-update-log-header {
position: relative;
width: 100%;
height: 196px;
img {
display: block;
width: 100%;
}
.update-log-close {
position: absolute;
top: 66px;
right: 20px;
color: #fff;
line-height: 1;
cursor: pointer;
font-size: 16px;
}
}
.version-update-log-body {
background: #fff;
padding: 16px 30px 30px;
.update-log-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.update-log-content {
//max-height: 218px;
margin-bottom: 20px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
.update-log-item {
color: #5f6e8e;
line-height: 28px;
}
}
@media (max-width: 1020px) {
.update-log-content {
max-height: 110px
}
}
.view-more {
font-weight: 500;
}
}
}
}
</style>
定义Mount使用方法（VersionUpdateLog.js）
在需要使用的地方，引入这个文件方法，然后把log的信息传入就可以直接装载该组件并显示出来。
import mountDom from '@/components/libs/mountDom'
import Component from '@/components/libs/Version/JxlVersionUpdateLog'
/**
* 版本更新日志组件
* @param props 组件属性
* @returns {Vue}
*/
export default function(props) {
return mountDom(Component, props)
}
装载文档脚本（mountDom.js）
import Vue from 'vue'
/**
* 临时挂载并渲染组件
* @param component 标签名称或组件配置对象
* @param props 组件的属性
* @returns {Vue} 返回组件实例
*/
export default function(component, props) {
const vm = new Vue({
// createElement函数它可以返回虚拟dom
render(createElement) {
// 将Component作为根组件渲染出来
// createElement(标签名称或组件配置对象，传递属性、事件等，孩子元素)
return createElement(component, { props: props })
}
}).$mount() // 挂载是为了把虚拟dom变成真实dom
// 不挂载就没有真实dom
// 手动追加至body
// 挂载之后$el可以访问到真实dom
document.body.appendChild(vm.$el)
// 实例
const comp = vm.$children[0]
// 淘汰机制
comp.remove = () => {
// 删除dom
document.body.removeChild(vm.$el)
// 销毁组件
vm.$destroy()
}
// 返回Component组件实例
return comp
}
使用示例
import VersionUpdateLog from '@/components/libs/version/VersionUpdateLog'
const log = {
version: 'v1.0.0',
title: 'v1.0.0：xxx智能短信平台隆重上线！',
content: [
'媒体消息：媒体投放平台，提供更便捷的智能短信营销接入方式，支持平台操作，短信自动升级智能短信。',
'企业服务号：华为统一的商家服务阵地，通过服务分发，用户互动连接，多样化的营销工具，促进商业闭环。',
'营销数据分析：营销数据分析，为您提供营销全链路数据分析报表，优化客户投放策略。',
'电商SAAS：电商SAAS平台，支持快速创建自己的电商商城，结合智能短信。',
'H5营销落地页工具：营销工具H5落地页创建，提供快速的H5落地页生成、编辑工具，更快速的提升用户的使用。',
'私有化部署：中继网关&号码库支持私有化部署，请联系我们获取私有化部署方案。'
],
href: ''
}
VersionUpdateLog(log)
