|
|
|
@ -1,29 +1,30 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<v-contextmenu ref="contextmenu"> |
|
|
|
|
<v-contextmenu ref="contextmenu" :disabled="disabled"> |
|
|
|
|
<v-contextmenu-item @click="addNote">{{$t('read.contextmenu.add')}}</v-contextmenu-item> |
|
|
|
|
</v-contextmenu> |
|
|
|
|
<el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab"> |
|
|
|
|
<el-tab-pane :label="item.title" :name="item.title" v-for="(item,index) in openList" :key="item.title"> |
|
|
|
|
<div v-contextmenu:contextmenu :ref="'edit'+item.title" v-html="item.content"/> |
|
|
|
|
<!-- <el-row>--> |
|
|
|
|
<!-- <el-col :span="18">--> |
|
|
|
|
<!-- <div v-contextmenu:contextmenu :ref="'edit'+item.title" @mouseup="selectText" v-html="item.content"/>--> |
|
|
|
|
<!-- </el-col>--> |
|
|
|
|
<!-- <el-col :span="5" class="ml3">--> |
|
|
|
|
<!-- <el-row v-for="(item,index) in noteList" :key="index">--> |
|
|
|
|
<!-- <el-card>--> |
|
|
|
|
<!-- <div slot="header" class="clearfix">--> |
|
|
|
|
<!-- <span>{{item.title}}</span>--> |
|
|
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">{{$t('button.del')}}</el-button>--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
<!-- <div class="text item">--> |
|
|
|
|
<!-- {{item.content}}--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
<!-- </el-card>--> |
|
|
|
|
<!-- </el-row>--> |
|
|
|
|
<!-- </el-col>--> |
|
|
|
|
<!-- </el-row>--> |
|
|
|
|
<el-row> |
|
|
|
|
<el-col :span="18"> |
|
|
|
|
<div class="content" v-contextmenu:contextmenu :ref="'edit'+item.title" @mouseup="show" @contextmenu="selectText" v-html="item.content"/> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="5" class="ml3 note-list"> |
|
|
|
|
<el-row v-for="(item,index) in noteList" :key="index" class="mb2"> |
|
|
|
|
<el-tooltip class="item" effect="dark" :content="$t('read.tip.click_note_list')"> |
|
|
|
|
<el-card> |
|
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
|
<span>{{item.title}}</span> |
|
|
|
|
<el-button style="float: right; padding: 3px 0" type="text">{{$t('button.del')}}</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div class="text item choose-note" @click="jump(item)" @mouseover="highlighting(item)" @mouseout="reset(item)"> |
|
|
|
|
{{item.content}} |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</el-row> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
</el-tabs> |
|
|
|
|
</div> |
|
|
|
@ -39,7 +40,12 @@ |
|
|
|
|
return { |
|
|
|
|
//活动的论文标签 |
|
|
|
|
activeName:'', |
|
|
|
|
noteList:[] |
|
|
|
|
//笔记列表 |
|
|
|
|
noteList:[], |
|
|
|
|
//禁用右键菜单标志位 |
|
|
|
|
disabled:true, |
|
|
|
|
//替换目标 |
|
|
|
|
replace:[] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed:{ |
|
|
|
@ -49,11 +55,44 @@ |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch:{ |
|
|
|
|
//激活的论文标签 |
|
|
|
|
activeName(newVal){ |
|
|
|
|
this.$store.commit('read/choose',newVal) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
//高亮笔记 |
|
|
|
|
highlighting(item:any){ |
|
|
|
|
let ele=document.getElementById(item.id) |
|
|
|
|
if(ele&&this.GLOBAL.visible_in_container(this.$refs['edit'+this.activeName][0],ele)){ |
|
|
|
|
ele.classList.add('heightlight') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
reset(item:any){ |
|
|
|
|
let ele=document.getElementById(item.id) |
|
|
|
|
if(ele){ |
|
|
|
|
ele.classList.remove('heightlight') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//跳转到笔记位置 |
|
|
|
|
jump(item:any){ |
|
|
|
|
let ele=document.getElementById(item.id) |
|
|
|
|
if(ele){ |
|
|
|
|
ele.scrollIntoView({ |
|
|
|
|
block:'center' |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//是否显示右键菜单 |
|
|
|
|
show(){ |
|
|
|
|
let s=getSelection() |
|
|
|
|
if(s){ |
|
|
|
|
this.disabled=s.isCollapsed |
|
|
|
|
}else{ |
|
|
|
|
this.disabled=true |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//关闭标签 |
|
|
|
|
removeTab(name:string){ |
|
|
|
|
this.$store.commit('read/close',name) |
|
|
|
@ -65,14 +104,18 @@ |
|
|
|
|
}, |
|
|
|
|
//添加笔记 |
|
|
|
|
addNote(){ |
|
|
|
|
// let c=this.GLOBAL.getCursortPosition(this.$refs['edit'+this.activeName][0]) |
|
|
|
|
// console.info(c) |
|
|
|
|
for(let index in this.replace){ |
|
|
|
|
if(this.replace[index].val&&this.replace[index].replaceVal){ |
|
|
|
|
this.replace[index].val.replaceWith(this.replace[index].replaceVal) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.replace=[] |
|
|
|
|
}, |
|
|
|
|
//显示选中文本 |
|
|
|
|
selectText(){ |
|
|
|
|
let selection = getSelection() |
|
|
|
|
console.info(selection) |
|
|
|
|
if(selection) { |
|
|
|
|
if(selection&&!this.disabled) { |
|
|
|
|
let range = selection.getRangeAt(0) |
|
|
|
|
console.info(range) |
|
|
|
|
if (range.startContainer === range.endContainer) { |
|
|
|
@ -83,7 +126,10 @@ |
|
|
|
|
if (range.endOffset - range.startOffset === anchorNode.length) { |
|
|
|
|
console.info(tip + '全选') |
|
|
|
|
bold.innerText = anchorNode.wholeText |
|
|
|
|
anchorNode.replaceWith(bold) |
|
|
|
|
this.replace.push({ |
|
|
|
|
val:anchorNode, |
|
|
|
|
replaceVal: bold |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
console.info(tip + '选中一部分') |
|
|
|
|
let start = document.createTextNode(anchorNode.substringData(0, range.startOffset)) |
|
|
|
@ -91,8 +137,10 @@ |
|
|
|
|
let span = document.createElement('span') |
|
|
|
|
bold.innerText = anchorNode.substringData(range.startOffset, range.endOffset - range.startOffset) |
|
|
|
|
span.append(start, bold, end) |
|
|
|
|
anchorNode.replaceWith(span) |
|
|
|
|
// document.createElement(anchorNode.tag) |
|
|
|
|
this.replace.push({ |
|
|
|
|
val:anchorNode, |
|
|
|
|
replaceVal: span |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
let tip = '跨节点' |
|
|
|
@ -101,7 +149,11 @@ |
|
|
|
|
console.info() |
|
|
|
|
} |
|
|
|
|
}else{ |
|
|
|
|
|
|
|
|
|
this.$message.error({ |
|
|
|
|
message:this.$t('read.tip.contextmenu_err').toString(), |
|
|
|
|
showClose:true, |
|
|
|
|
duration:1000 |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// let selectData=anchorNode.substringData(range.startOffset,range.endOffset-range.startOffset) |
|
|
|
|
// console.info(selectData) |
|
|
|
@ -124,6 +176,7 @@ |
|
|
|
|
this.activeName=this.$store.state.read.activeName |
|
|
|
|
for(let n=0;n<10;n++){ |
|
|
|
|
this.noteList.push({ |
|
|
|
|
id:`fuck${n}`, |
|
|
|
|
title:`笔记${n}`, |
|
|
|
|
content:`内容${n}` |
|
|
|
|
}) |
|
|
|
@ -131,21 +184,44 @@ |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
<!--<style>--> |
|
|
|
|
<!-- .text {--> |
|
|
|
|
<!-- font-size: 14px;--> |
|
|
|
|
<!-- }--> |
|
|
|
|
<style> |
|
|
|
|
.heightlight{ |
|
|
|
|
color: #74f2ff; |
|
|
|
|
font-size: larger; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.choose-note{ |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
pre{ |
|
|
|
|
overflow-x: hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content{ |
|
|
|
|
height: 600px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.note-list{ |
|
|
|
|
height: 600px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<!-- .item {--> |
|
|
|
|
<!-- margin-bottom: 18px;--> |
|
|
|
|
<!-- }--> |
|
|
|
|
.item { |
|
|
|
|
margin-bottom: 18px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<!-- .clearfix::before,--> |
|
|
|
|
<!-- .clearfix::after {--> |
|
|
|
|
<!-- display: table;--> |
|
|
|
|
<!-- content: "";--> |
|
|
|
|
<!-- }--> |
|
|
|
|
<!-- .clearfix::after {--> |
|
|
|
|
<!-- clear: both--> |
|
|
|
|
<!-- }--> |
|
|
|
|
<!--</style>--> |
|
|
|
|
.clearfix::before, |
|
|
|
|
.clearfix::after { |
|
|
|
|
display: table; |
|
|
|
|
content: ""; |
|
|
|
|
} |
|
|
|
|
.clearfix::after { |
|
|
|
|
clear: both |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|