@hsdata/warrenq-ck-note

使用 @hsdata/warrenq-ck-note

• 支持功能

  1. 拖拽添加文本，图片
  2. 粘贴word,excel,图片
  3. 手动添加文本，标记，图片，html
  4. 文本自动保存

• 引入组件

import {
  setRules,   //function(ruleName) 配置图表功能
  setConfig,  //function(config) 组件配置函数
  setViewOrigin,  //funtion(fn) 配置查看原文方法
  appendElementToNote,   //function(params) 添加图片，文本，html，到笔记
  multiTab,  //vue组件 ，笔记完整功能
  bus  //通信组件
  } from '@hsdata/warrenq-ck-note'

• 完整功能

<template>
  <div style="height: 100vh; width: 100vw">
    <multi-tab  @close='close' @hide='hide' @fullarea='fullarea' ref='mode'/>
  </div>
</template>
<script>
import { multiTab, bus } from '@hsdata/warrenq-ck-note'
export default {
  components: {multiTab},
  create(){
    //沉浸模式
    bus.$on('module-fullscreen-change', this.fullscreen)
  }
  beforeDestroy(){
    bus.$off('module-fullscreen-change', this.fullscreen)
  },
  methods:{
    close(){
      //关闭笔记
    },
    hide(){
      //最小化笔记
    },
    fullarea(v){
      //全屏，取消全屏
    },
    //主动改变全屏图标样式
    initFullarea(){
      this.$refs.mode.changeFullArea(Boolean)
    },
    fullscreen(v,key){
      if(key == 'note'){
        console.log(v)
      }
    }
  }
}
</script>

• 事件

  事件名称	返回值	功能
  close	null	点击关闭
  hide	null	点击最小化
  fullarea	boolean	点击全屏/取消全屏

• 组件配置

  //配置单
const PROJECT_CONFIG = {
  showAddIndexText: false, //显示添加指标，待集成
  showAddChart: false, //显示添加图表，待集成
  showShare: false, //显示分享， 未集成
  showFullscreen: false, //显示全屏, 待集成
  showMenu: true, //显示菜单列表
  showAddNewNote: true, //新建笔记
  showDownloadWord: true, //显示导出word
  saveAs: {
    //另存为模块
    show: false,
    component: 'div'
  }
};

//更改配置
 import {
  setConfig,
} from "@hsdata/warrenq-ck-note";
//禁用菜单和下载excel
setConfig({
  showMenu: false,
  showDownloadWord: false
})

查看原文功能

• 插入查看原文文本

  import {
  appendElementToNote,   //function(params) 添加图片，文本，html，到笔记
  } from '@hsdata/warrenq-ck-note'

  //新增一个查看原文标记
  appendElementToNote({
    key: 'appendNote',
    content: {
      color: 'red'  //左侧颜色色条,必传
      colorLetter: 'a'  //a,b,c,d  标记，必传
      content: '原文文本……' //需要插入的文本，必传
      ...params   //自定义参数，后续查看原文时使用
    }
  })

• 配置查看原文方法，该方法为全局方法，多次配置会覆盖

  import {
  setViewOrigin,  //funtion(fn) 配置查看原文方法
  } from '@hsdata/warrenq-ck-note'
/*** 这块可以配置打开阅读器方法 ***/
  setViewOrigin((params)=>{
    //当点击查看原文时，会调用该函数，传入参数为添加标记时的自定义参数
    //示例

    window.open(params.pdfPath)

  })

在当前页签下插入图片、文本、html

import {
  appendElementToNote,   //function(params) 添加图片，文本，html，到笔记
  } from '@hsdata/warrenq-ck-note'

  //在焦点处添加文本
  appendElementToNote({
    key: 'copyNote',
    content: '123123'
  })

  //在焦点处添加html
  appendElementToNote({
    key: 'addInnerHtml',
    content: '123123'
  })

  //在文本结尾添加html
  appendElementToNote({
    key: 'appendInnerHtml',
    content: '123123'
  })

   //添加图片
  appendElementToNote({
    key: 'addImage',
    content: 'src……'  //图片地址
  })