Medium highlight 效果
Medium有一个很酷的功能：当你选中某些文字的时候，高亮菜单就会出现在上方，如上图所示。菜单上有一些按钮，可以让你对选中文本做一些操作，例如高亮和分享到twitter。
如果你喜欢这个功能，也想在你的站点中实现。接下来，我会教你怎么创建这样的可复用组件，使你可以在选中文本中，做以上操作。
你可以去CodePen上演示live demo
CodePen live demo截图
使用Vue CLI3创建新项目
我们可以使用vue CLI3迅速创建并运行仅有一个*.vuew文件的Vue app。
请注意，这只是用于创建项目的原型，并非生产环境。
首先，请确保你全局安装Vue CLI3
npm install -g @vue/cli-service-global
在这个app中，我们只用App.vue和Highlightable.vue两个文件。
Highlightable.vue是可复用的高亮菜单组件。App.vue是页面的入口文件。
在任意目录创建这两个文件，然后使用vue serve运行App.vue
vue serve App.vue
实现App.vue
在App.vue中，我们将添加两个段落。一个是可以被高亮的，另一个是不可以被高亮的。
在创建Highlightable.vue之前，我们先import并使用Highlightable.vue。（作者这么干是为了有助于了解我们怎么使用它。）
App.vue最终长这样：
<template>
<div class="app">
<highlightable @share="onShare" @highlight="onHighlight" >
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet at debitis deserunt, optio rem eaque obcaecati non possimus nisi assumenda architecto exercitationem dolore quo praesentium, deleniti reiciendis sed ab nihil! </p>
</highlightable>
<p> <strong>This paragraph can't be highlighted.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ipsam repellat, fugiat aut ex incidunt ut quisquam quasi consequatur ducimus quo in, cum soluta eos dolores tempore unde voluptate modi. </p>
</div>
</template>
<script>
import Highlightable from './Highlightable'
export default {
components: { Highlightable },
methods: {
onShare (text) { console.log('share:', text) },
onHighlight (text) { console.log('highlight:', text) }
}
};
</script>
<style scoped>
* { box-sizing: border-box; }
.app {
width: 800px;
margin: 40px auto;
padding: 10px;
font-family: Verdana;
color: #333;
width: 100%;
}
p { line-height: 1.5; }
</style>
如上所述，我们处理了Highlightable中触发的两个事件。这两个事件正是高亮菜单中的两个按钮的操作。这只是例子，你可以把它们改成任意你想要的操作。
实现 Highlightable.vue
Template由两部分组成：带有按钮的菜单部分，以及展示文本的slot。
template的代码长这样：
Highlight.vue template 部分
我们使用showMenu变量来控制，是否显示菜单。
下面来看一下样式部分，添加一下css代码到<style>模块：
Highlight.vue css部分
到此为止并没有很复杂。.menu就是高亮菜单类。menu:after是menu下方中间的小三角。
需要注意的是.menu采用 了绝对定位。我们需要用定位来使他展示在选中文本的上方。
最后，我们看看script部分，从data开始：
Highlight.vue data部分
- x和y是用来控制菜单位置的。
- showMenu是用来显示/隐藏菜单。
- selectedText将包含选中文本的实际内容。
接下来，看一下计算属性：
Highlight.vue 计算属性
我们只有一个计算属性，返回Highlighttable中slot元素。在我们的例子中，就是<highlightable></highlightable>.元素中的p标签
接下来，让我们添加mounted和beforeDestroy的钩子函数。
Highlight.vue钩子函数
我们在钩子函数中，注册监听器来监听mouseup事件，并且在onMouseup方法中做处理。
下面来创建onMouseup方法：
onMouseup方法
现在需要更新Highlightable.vue的template来反应新的变化。
新的template
template有以下改变：
- 为menu元素新增了位置信息
- 为menu元素增加了@mousedown.prevent="" 来防止在menu内部的点击造成menu关闭
- 给分享按钮增加了@mousedown.prevent="handleAction('share')"，来处理点击行为。同样也给高亮行为添加了类似的监听
注意，我们使用mousedown事件而不是click事件，来阻止文本变成非选中态——这将导致菜单关闭。
最后一件事，就是添加handleAction方法。
handleAction方法
这个方法触发相应的事件，并且把选中文本作为参数传入。（我们在App.vue中使用了这个方法，还记得吗？）
这就完成了！现在你就有一个可以复用的高亮菜单组件，就像Medium一样。
如果你喜欢这篇教程，你可能也会喜欢我博客上的其他文章。
网友评论