cloudnote_web/pages/index/read.vue

<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>-->