pan
4 years ago
parent
deeeb2b06b
commit
f208627f6f
@ -0,0 +1,151 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<v-contextmenu ref="contextmenu"> |
||||||
|
<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-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
|
||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
export default Vue.extend({ |
||||||
|
name: 'read', |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
//活动的论文标签 |
||||||
|
activeName:'', |
||||||
|
noteList:[] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed:{ |
||||||
|
//打开的论文标签 |
||||||
|
openList(){ |
||||||
|
return this.$store.state.read.read |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
activeName(newVal){ |
||||||
|
this.$store.commit('read/choose',newVal) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//关闭标签 |
||||||
|
removeTab(name:string){ |
||||||
|
this.$store.commit('read/close',name) |
||||||
|
if(this.openList.length===0){ |
||||||
|
this.$router.push(this.localePath('/document')) |
||||||
|
this.$store.commit('menus/none') |
||||||
|
} |
||||||
|
this.activeName=this.$store.state.read.activeName |
||||||
|
}, |
||||||
|
//添加笔记 |
||||||
|
addNote(){ |
||||||
|
// let c=this.GLOBAL.getCursortPosition(this.$refs['edit'+this.activeName][0]) |
||||||
|
// console.info(c) |
||||||
|
}, |
||||||
|
//显示选中文本 |
||||||
|
selectText(){ |
||||||
|
let selection = getSelection() |
||||||
|
console.info(selection) |
||||||
|
if(selection) { |
||||||
|
let range = selection.getRangeAt(0) |
||||||
|
console.info(range) |
||||||
|
if (range.startContainer === range.endContainer) { |
||||||
|
let tip = '不跨节点' |
||||||
|
let anchorNode = range.startContainer |
||||||
|
let bold = document.createElement('span') |
||||||
|
bold.classList.add('bold') |
||||||
|
if (range.endOffset - range.startOffset === anchorNode.length) { |
||||||
|
console.info(tip + '全选') |
||||||
|
bold.innerText = anchorNode.wholeText |
||||||
|
anchorNode.replaceWith(bold) |
||||||
|
} else { |
||||||
|
console.info(tip + '选中一部分') |
||||||
|
let start = document.createTextNode(anchorNode.substringData(0, range.startOffset)) |
||||||
|
let end = document.createTextNode(anchorNode.substringData(range.endOffset, anchorNode.length)) |
||||||
|
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) |
||||||
|
} |
||||||
|
} else { |
||||||
|
let tip = '跨节点' |
||||||
|
let startNode = range.startContainer |
||||||
|
let endNode = range.endContainer |
||||||
|
console.info() |
||||||
|
} |
||||||
|
}else{ |
||||||
|
|
||||||
|
} |
||||||
|
// let selectData=anchorNode.substringData(range.startOffset,range.endOffset-range.startOffset) |
||||||
|
// console.info(selectData) |
||||||
|
// |
||||||
|
// |
||||||
|
// let start=document.createTextNode(anchorNode.substringData(0,range.startOffset)) |
||||||
|
// console.info(start) |
||||||
|
// |
||||||
|
// let end=document.createTextNode(anchorNode.substringData(range.endOffset,anchorNode.length)) |
||||||
|
// console.info(end) |
||||||
|
// let pre=selection.anchorNode.parentElement |
||||||
|
// // pre.innerHTML='' |
||||||
|
// let bold=document.createElement('span') |
||||||
|
// bold.innerText=selectData |
||||||
|
// bold.classList.add('bold') |
||||||
|
// // pre.append(start,bold,end) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.activeName=this.$store.state.read.activeName |
||||||
|
for(let n=0;n<10;n++){ |
||||||
|
this.noteList.push({ |
||||||
|
title:`笔记${n}`, |
||||||
|
content:`内容${n}` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<!--<style>--> |
||||||
|
<!-- .text {--> |
||||||
|
<!-- font-size: 14px;--> |
||||||
|
<!-- }--> |
||||||
|
|
||||||
|
<!-- .item {--> |
||||||
|
<!-- margin-bottom: 18px;--> |
||||||
|
<!-- }--> |
||||||
|
|
||||||
|
<!-- .clearfix::before,--> |
||||||
|
<!-- .clearfix::after {--> |
||||||
|
<!-- display: table;--> |
||||||
|
<!-- content: "";--> |
||||||
|
<!-- }--> |
||||||
|
<!-- .clearfix::after {--> |
||||||
|
<!-- clear: both--> |
||||||
|
<!-- }--> |
||||||
|
<!--</style>--> |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import contentmenu from 'v-contextmenu' |
||||||
|
import 'v-contextmenu/dist/index.css' |
||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
Vue.use(contentmenu) |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
/** |
||||||
|
* 菜单列表 |
||||||
|
*/ |
||||||
|
export const state=()=>({ |
||||||
|
menus:['document', 'note', 'center', 'upload'] |
||||||
|
}) |
||||||
|
export const mutations = { |
||||||
|
//默认不包含阅读论文菜单
|
||||||
|
none(state){ |
||||||
|
state.menus=['document', 'note', 'center', 'upload'] |
||||||
|
}, |
||||||
|
//包含阅读论文菜单
|
||||||
|
read(state){ |
||||||
|
state.menus=['document', 'note', 'center', 'upload','read'] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
/** |
||||||
|
* 阅读论文标签数据 |
||||||
|
*/ |
||||||
|
export const state=()=>({ |
||||||
|
//已打开论文列表
|
||||||
|
read:[], |
||||||
|
//激活的论文标签
|
||||||
|
activeName:'' |
||||||
|
}) |
||||||
|
export const mutations = { |
||||||
|
//新建论文标签
|
||||||
|
open(state,item){ |
||||||
|
let isNew=true |
||||||
|
for(let i in state.read) { |
||||||
|
if (state.read[i].title === item.title) { |
||||||
|
isNew=false |
||||||
|
mutations.choose(state,item.title) |
||||||
|
} |
||||||
|
} |
||||||
|
if(isNew) { |
||||||
|
state.read.push(item) |
||||||
|
mutations.choose(state, state.read[state.read.length - 1].title) |
||||||
|
} |
||||||
|
}, |
||||||
|
//关闭论文标签
|
||||||
|
close(state,title){ |
||||||
|
for(let i in state.read){ |
||||||
|
if(state.read[i].title===title){ |
||||||
|
state.read.splice(i,1) |
||||||
|
if(state.read.length>0){ |
||||||
|
if(state.activeName===title) { |
||||||
|
mutations.choose(state, state.read[state.read.length - 1].title) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
//选择论文标签
|
||||||
|
choose(state,title){ |
||||||
|
state.activeName=title |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue