前端实现页面划词选中复制，并弹出Popover功能。

页面拖蓝进行文字复制，并弹窗更多功能。

这个功能日常可见，写一个demo供大家参考一下。

用到的事件和API

• click
• window.getSelection()
• getBoundingClientRect

先看百度的效果

百度复制功能展示

我们实现的效果

前端划词选中弹窗，功能展示。

源码解析，复制运行便可以查看效果。

<template>
  <div class="home" @click="selectContentText($event)">
    <div style="text-indent: 2em">
      曹操（155年 [1]—220年3月15日 [2]），字孟德，一名吉利，小字阿瞒
      [73]，一说本姓夏侯， [141]沛国谯县（今安徽亳州）人，
      [3]东汉末年丞相、权臣、政治家、军事家、文学家、诗人、书法家，
      [261]魏王，曹魏政权奠基者。 曹操是太尉曹嵩之子。
      [3]曹操少年间任侠放荡，到二十岁时举孝廉为郎，授洛阳北部尉。后任骑都尉，参与镇压黄巾军，调济南相。董卓擅政时，散尽家财，起兵讨董卓。初平三年（192年），据兖州，分化诱降黄巾军三十余万，选取其中精锐组建青州军。建安元年（196年），迎汉献帝至许县，从此用献帝名义发号施令，总揽朝政。在此前后相继击败袁术、陶谦、吕布等势力。建安五年（200年），在官渡之战中大败割据河北的袁绍，随后削平袁尚、袁谭，北击乌桓，统一北方。建安十三年（208年）进位丞相。同年率军南征，收服荆州，但在赤壁之战中败于孙刘联军。建安二十年（215年），取汉中，次年（216年）自魏公进爵魏王。建安二十五年（220年），曹操病死于洛阳，享年六十六岁。
      [139]曹魏建立后，被追尊为太祖，谥号武皇帝， [112]葬于高陵。 [73]
      曹操用人唯才，抑制豪强，加强集权；在北方屯田，兴修水利。他的诸种举措使统治地区的社会经济得到一定的恢复和发展。对于曹操的功业及其为人，后世评论之多，分歧之大，可谓世所罕见。
      [262]此外，他知兵法，工书法，擅诗歌。其诗多抒发政治抱负，反映汉末人民的苦难生活，气魄雄伟，慷慨悲凉，开建安文学之风。著有《魏武帝集》，已佚失。今人辑有《曹操集》。
      [112] [261]
    </div>
    <div style="text-indent: 2em">
      年轻时期的曹操机智警敏，擅长随机应变，而且任性好侠、放荡不羁，不修品行，不研究学业，所以当时的人不认为他有什么特别的才能，只有梁国人桥玄和南阳人何颙认为他不平凡，桥玄对曹操说：“如今天下将要发生动乱，非命世之才不能解救，能够安定天下的，岂不是你吗？”
      [4]汝南人许劭以知人著称，他也曾评价曹操为“太平时的奸贼，乱世时的英雄”
      [5]（孙盛《异同杂语》记载为：治世之能臣，乱世之奸雄）。 [73] [322]
      曹操早年就表现出对武艺的爱好与才能，博览群书，尤其喜欢兵法，曾抄录古代诸家兵法韬略，还注释过《孙子兵法》。
      [274]这些为他后来的军事生涯打下了稳健的基础。 崭露头角
      熹平三年（174年），曹操被举为孝廉，入京都洛阳（时称雒阳）为郎。不久，被任命为洛阳北部尉。洛阳为东汉都城，是皇亲贵戚聚居之地，很难治理。曹操一到职，就申明禁令、严肃法纪，造五色大棒十余根，悬于衙门左右，“有犯禁者，皆棒杀之”。汉灵帝宠幸的宦官蹇硕的叔父违禁夜行，曹操毫不留情，将蹇硕的叔父用五色棒处死。于是，“京师敛迹，无敢犯者”。曹操也因此得罪了一些当朝权贵，他们难以中伤曹操，只得以举荐为名，将其明升暗降，外调为顿丘（今河南清丰）县令。
      [171-172]
      光和元年（178年），曹操因堂妹夫濦强侯宋奇被宦官诛杀，受到牵连，被免去官职。其后，在洛阳无事可做，回到家乡谯县闲居。
      [173] 光和三年（180年），曹操又被朝廷征召，任命为议郎。
      [171]此前，大将军窦武、太傅陈蕃谋划诛杀宦官，不料其事未济反为宦官所害。曹操上书陈述窦武等人为官正直而遭陷害，致使奸邪之徒满朝，而忠良之人却得不到重用的情形，言辞恳切，但没有被汉灵帝采纳。
      [173]
    </div>
    <div style="text-indent: 2em">
      光和五年（182年），朝廷令公卿按民谣检举刺史、二千石为害之人。当时太尉许戫、司空张济看着宦官的脸色行事，收取贿赂。宦官子弟宾客，贪污卑鄙，许戫与张济不敢过问，却虚报纠举二十六个处于边远小郡清廉惠政的人。官吏和百姓到京师申诉，陈耽和曹操上书：“公卿的检举，大都包庇各自的私党，是所谓‘放鸱枭而囚鸾凤’。”其言忠切，汉灵帝因此责备许戫和张济，并将因谣言而被问罪的官员全部拜为议郎。
      [301]而后，东汉朝政日益腐败，曹操知道无法匡正，便不再进言。 [173]
      中平元年（184年），黄巾起义爆发，曹操被拜为骑都尉，受命与左中郎将皇甫嵩等人合军进攻颍川的黄巾军。右中郎将朱儁先到，与黄巾军波才部作战，失败，皇甫嵩退守长社（今河南省长葛县东北），面对波才的围困，趁夜纵火出击，使黄巾军惊乱后撤。此时曹操率军赶来，联合皇甫嵩、朱儁大破黄巾军，斩首数万级
      [174]。不久后，曹操调任济南国（今山东济南）国相。在济南相任内，曹操治事如初。济南国有县十余个，各县长吏多依附贵势，贪赃枉法，无所顾忌。曹操之前历任国相皆置之不问。曹操到职，大力整饬，一下奏免十分之八的长吏，济南震动，贪官污吏纷纷逃窜。“政教大行，一郡清平”。
      [6]
      当时正是东汉政治极度黑暗之时。朝廷徵还曹操为东郡太守，拜为议郎，曹操不肯迎合权贵，遂托病回归乡里，春夏读书，秋冬弋猎，暂时隐居了。
      [7-8]
      当时天下纷乱，发生了冀州刺史王芬联合南阳许攸、沛国周旌等地方豪强，谋划废黜灵帝立合肥侯的事件。王芬等人曾希望曹操加入他们，但被曹操拒绝。曹操在推辞的理由中说：“废立皇帝是天下最不祥的事了。古时有衡量轻重、计算成败而后施行的人，伊尹、霍光便是如此。这两个人都怀着至忠的诚心，以宰相的地位，凭借执政大权，加上同众人的愿望一致，故此能实现计划，成就大事。如今，各位只看到他们当初的轻而易举，而没有看到现在的困难。用这种非常的手段，想一定达到目的，难道不觉得危险吗？”
      [178]后来王芬果然事败自杀。又有西北金城郡（今甘肃兰州）的边章、韩遂杀死刺史和太守，率兵十余万反叛朝廷，天下为之骚动。
      [9]
      中平五年（188年）八月，汉灵帝为巩固统治，设置西园八校尉，曹操因其家世而被任命为八校尉中的典军校尉。
      [10] [179] 陈留起兵
      中平六年（189年），汉灵帝驾崩，太子刘辩登基，何太后临朝听政。大将军何进想趁灵帝驾崩、宦官失势之机诛灭十常侍，但没有取得何太后的支持。于是何进采纳袁绍的建议，不听陈琳的劝谏，便征召停留在河东郡的边将董卓率其部众进京，以便于胁迫何太后同意诛杀宦官。
      [10]
      [154]曹操得知后笑道：“阉竖之官，自古至今都有，只是世主不应该把权力交给他们，使他们达到这种程度。既然要治他们的罪，那么只需要诛杀元凶，派一个狱吏就足够了，何必纷纷召外地将领入京？如果要对宦官赶尽杀绝，事情必定会泄露出去，我已经料到他会失败了。”
      [302]
      董卓尚未抵达京城，何进已被宦官下手谋杀。同年九月，董卓入京，执掌朝政，把汉少帝废为弘农王，而改立其弟陈留王刘协，即汉献帝；又派人把弘农王母子毒死，自称太师，专擅朝政。曹操见董卓倒行逆施，不愿与其合作，遂改易姓名逃出洛阳。
      [10]曹操到陈留后，“散家财，合义兵”，且首倡义兵号召天下英雄讨伐董卓。 [208]
    </div>
    <!-- 拖蓝浮窗相关 -->
    <div
      class="toolpop"
      v-show="selectionInfo.visible"
      :style="{
        top: selectionInfo.selectY + 'px',
        left: selectionInfo.selectX + 'px',
      }"
    >
      <div
        class="tool-item"
        v-for="(item, index) in tools"
        :key="index"
        @click="toolsSelect(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      selectionInfo: {
        visible: false,
        selectX: 0,
        selectY: 0,
        selectTop: 0,
        text: "", // 划词内容
      },
      tools: [
        {
          name: "一键复制",
          val: "copy",
        },
        {
          name: "AI建模",
          val: "ai",
        },
        {
          name: "站内搜索",
          val: "search",
        },
      ],
    };
  },
  methods: {
    // 划词选中
    selectContentText(e) {
      console.log(e);
      console.log(window.getSelection());
      const word = window.getSelection().toString().trim().replace(/\n/g, ""); // 选中的内容
      console.log(word);
      if (word === "") {
        this.selectionInfo.visible && (this.selectionInfo.visible = false);
        return;
      }
      // Popover边界，可根据Popover的宽高和与视口的距离（getBoundingClientRect）来做处理，这里不做代码展示。
      // 可参考Vue-popper源码来做相关处理
      const { x, y } = e;
      this.selectionInfo.text = word;
      this.selectionInfo.selectX = x;
      this.selectionInfo.selectY = y + 20;
      this.selectionInfo.selectTop = y + 20; // 备份top
      this.selectionInfo.visible = true;
    },
    // 工具选择
    toolsSelect(item) {
      console.log(item);
      this.$message.success(`点击了${item.name}`);
      // todo
    },
  },
};
</script>

<style lang="scss" scoped>
.toolpop {
  position: fixed;
  display: inline-block;
  font-size: 12px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
  word-break: break-all;
  background: rgb(255, 255, 255);
  border-radius: 4px;
  border: 1px rgb(235, 238, 245) solid;
  .tool-item {
    padding: 0 10px;
    line-height: 28px;
    &:hover {
      border-radius: 4px;
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
}
</style>

如果对您有用，不妨点点赞吧。🙂