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