JXL组件：jxl-version-update-log版本更新日志组件

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)