如何通过Vue实现@人的功能

极客

　　这篇文章主要介绍了如何通过vue实现微博中常见的@人的功能，同时增加鼠标点击事件和一些页面小优化。感兴趣的小伙伴可以跟随小编一起学习一下
　　本文采用vue，同时增加鼠标点击事件和一些页面小优化

　　基本结构
　　新建一个sandBox.vue文件编写功能的基本结构

2. ‹div class="content">
3.     ‹!--文本框-->
4.     ‹div
5.       class="editor"
6.       ref="divRef"
7.       contenteditable
8.       @keyup="handkeKeyUp"
9.       @keydown="handleKeyDown"
10.     >‹/div>
11.     ‹!--选项-->
12.     ‹AtDialog
13.       v-if="showDialog"
14.       :visible="showDialog"
15.       :position="position"
16.       :queryString="queryString"
17.       @onPickUser="handlePickUser"
18.       @onHide="handleHide"
19.       @onShow="handleShow"
20.     >‹/AtDialog>
21.   ‹/div>
22. ‹script>
23. import AtDialog from '../components/AtDialog'
24. export default {
25.   name: 'sandBox',
26.   components: { AtDialog },
27.   data () {
28.     return {
29.       node: '', // 获取到节点
30.       user: '', // 选中项的内容
31.       endIndex: '', // 光标最后停留位置
32.       queryString: '', // 搜索值
33.       showDialog: false, // 是否显示弹窗
34.       position: {
35.         x: 0,
36.         y: 0
37.       }// 弹窗显示位置
38.     }
39.   },
40.   methods: {
41.     // 获取光标位置
42.     getCursorIndex () {
43.       const selection = window.getSelection()
44.       return selection.focusOffset // 选择开始处 focusNode 的偏移量
45.     },
46.     // 获取节点
47.     getRangeNode () {
48.       const selection = window.getSelection()
49.       return selection.focusNode // 选择的结束节点
50.     },
51.     // 弹窗出现的位置
52.     getRangeRect () {
53.       const selection = window.getSelection()
54.       const range = selection.getRangeAt(0) // 是用于管理选择范围的通用对象
55.       const rect = range.getClientRects()[0] // 择一些文本并将获得所选文本的范围
56.       const LINE_HEIGHT = 30
57.       return {
58.         x: rect.x,
59.         y: rect.y + LINE_HEIGHT
60.       }
61.     },
62.     // 是否展示 @
63.     showAt () {
64.       const node = this.getRangeNode()
65.       if (!node || node.nodeType !== Node.TEXT_NODE) return false
66.       const content = node.textContent || ''
67.       const regx = /@([^@\s]*)$/
68.       const match = regx.exec(content.slice(0, this.getCursorIndex()))
69.       return match && match.length === 2
70.     },
71.     // 获取 @ 用户
72.     getAtUser () {
73.       const content = this.getRangeNode().textContent || ''
74.       const regx = /@([^@\s]*)$/
75.       const match = regx.exec(content.slice(0, this.getCursorIndex()))
76.       if (match && match.length === 2) {
77.         return match[1]
78.       }
79.       return undefined
80.     },
81.     // 创建标签
82.     createAtButton (user) {
83.       const btn = document.createElement('span')
84.       btn.style.display = 'inline-block'
85.       btn.dataset.user = JSON.stringify(user)
86.       btn.className = 'at-button'
87.       btn.contentEditable = 'false'
88.       btn.textContent = `@${user.name}`
89.       const wrapper = document.createElement('span')
90.       wrapper.style.display = 'inline-block'
91.       wrapper.contentEditable = 'false'
92.       const spaceElem = document.createElement('span')
93.       spaceElem.style.whiteSpace = 'pre'
94.       spaceElem.textContent = '\u200b'
95.       spaceElem.contentEditable = 'false'
96.       const clonedSpaceElem = spaceElem.cloneNode(true)
97.       wrapper.appendChild(spaceElem)
98.       wrapper.appendChild(btn)
99.       wrapper.appendChild(clonedSpaceElem)
100.       return wrapper
101.     },
102.     replaceString (raw, replacer) {
103.       return raw.replace(/@([^@\s]*)$/, replacer)
104.     },
105.     // 插入@标签
106.     replaceAtUser (user) {
107.       const node = this.node
108.       if (node && user) {
109.         const content = node.textContent || ''
110.         const endIndex = this.endIndex
111.         const preSlice = this.replaceString(content.slice(0, endIndex), '')
112.         const restSlice = content.slice(endIndex)
113.         const parentNode = node.parentNode
114.         const nextNode = node.nextSibling
115.         const previousTextNode = new Text(preSlice)
116.         const nextTextNode = new Text('\u200b' + restSlice) // 添加 0 宽字符
117.         const atButton = this.createAtButton(user)
118.         parentNode.removeChild(node)
119.         // 插在文本框中
120.         if (nextNode) {
121.           parentNode.insertBefore(previousTextNode, nextNode)
122.           parentNode.insertBefore(atButton, nextNode)
123.           parentNode.insertBefore(nextTextNode, nextNode)
124.         } else {
125.           parentNode.appendChild(previousTextNode)
126.           parentNode.appendChild(atButton)
127.           parentNode.appendChild(nextTextNode)
128.         }
129.         // 重置光标的位置
130.         const range = new Range()
131.         const selection = window.getSelection()
132.         range.setStart(nextTextNode, 0)
133.         range.setEnd(nextTextNode, 0)
134.         selection.removeAllRanges()
135.         selection.addRange(range)
136.       }
137.     },
138.     // 键盘抬起事件
139.     handkeKeyUp () {
140.       if (this.showAt()) {
141.         const node = this.getRangeNode()
142.         const endIndex = this.getCursorIndex()
143.         this.node = node
144.         this.endIndex = endIndex
145.         this.position = this.getRangeRect()
146.         this.queryString = this.getAtUser() || ''
147.         this.showDialog = true
148.       } else {
149.         this.showDialog = false
150.       }
151.     },
152.     // 键盘按下事件
153.     handleKeyDown (e) {
154.       if (this.showDialog) {
155.         if (e.code === 'ArrowUp' ||
156.           e.code === 'ArrowDown' ||
157.           e.code === 'Enter') {
158.           e.preventDefault()
159.         }
160.       }
161.     },
162.     // 插入标签后隐藏选择框
163.     handlePickUser (user) {
164.       this.replaceAtUser(user)
165.       this.user = user
166.       this.showDialog = false
167.     },
168.     // 隐藏选择框
169.     handleHide () {
170.       this.showDialog = false
171.     },
172.     // 显示选择框
173.     handleShow () {
174.       this.showDialog = true
175.     }
176.   }
177. }
178. ‹/script>
180. ‹style scoped lang="scss">
181.   .content {
182.     font-family: sans-serif;
183.     h1{
184.       text-align: center;
185.     }
186.   }
187.   .editor {
188.     margin: 0 auto;
189.     width: 600px;
190.     height: 150px;
191.     background: #fff;
192.     border: 1px solid blue;
193.     border-radius: 5px;
194.     text-align: left;
195.     padding: 10px;
196.     overflow: auto;
197.     line-height: 30px;
198.     &:focus {
199.       outline: none;
200.     }
201.   }
202. ‹/style>

复制代码

　　如果添加了点击事件，节点和光标位置获取，需要在【键盘抬起事件】中获取，并保存到data

2. // 键盘抬起事件
3.     handkeKeyUp () {
4.       if (this.showAt()) {
5.         const node = this.getRangeNode() // 获取节点
6.         const endIndex = this.getCursorIndex() // 获取光标位置
7.         this.node = node
8.         this.endIndex = endIndex
9.         this.position = this.getRangeRect()
10.         this.queryString = this.getAtUser() || ''
11.         this.showDialog = true
12.       } else {
13.         this.showDialog = false
14.       }
15.     },

复制代码

　　新建一个组件，编辑弹窗选项 

2. ‹template>
3. ‹div
4.   class="wrapper"
5.   :style="{position:'fixed',top:position.y +'px',left:position.x+'px'}">
6.   ‹div v-if="!mockList.length" class="empty">无搜索结果‹/div>
7.   ‹div
8.     v-for="(item,i) in mockList"
9.     :key="item.id"
10.     class="item"
11.     :class="{'active': i === index}"
12.     ref="usersRef"
13.     @click="clickAt($event,item)"
14.     @mouseenter="hoverAt(i)"
15.   >
16.     ‹div class="name">{{item.name}}‹/div>
17.   ‹/div>
18. ‹/div>
19. ‹/template>
21. ‹script>
22. const mockData = [
23.   { name: 'HTML', id: 'HTML' },
24.   { name: 'CSS', id: 'CSS' },
25.   { name: 'Java', id: 'Java' },
26.   { name: 'JavaScript', id: 'JavaScript' }
27. ]
28. export default {
29.   name: 'AtDialog',
30.   props: {
31.     visible: Boolean,
32.     position: Object,
33.     queryString: String
34.   },
35.   data () {
36.     return {
37.       users: [],
38.       index: -1,
39.       mockList: mockData
40.     }
41.   },
42.   watch: {
43.     queryString (val) {
44.       val ? this.mockList = mockData.filter(({ name }) => name.startsWith(val)) : this.mockList = mockData.slice(0)
45.     }
46.   },
47.   mounted () {
48.     document.addEventListener('keyup', this.keyDownHandler)
49.   },
50.   destroyed () {
51.     document.removeEventListener('keyup', this.keyDownHandler)
52.   },
53.   methods: {
54.     keyDownHandler (e) {
55.       if (e.code === 'Escape') {
56.         this.$emit('onHide')
57.         return
58.       }
59.       // 键盘按下 => ↓
60.       if (e.code === 'ArrowDown') {
61.         if (this.index >= this.mockList.length - 1) {
62.           this.index = 0
63.         } else {
64.           this.index = this.index + 1
65.         }
66.       }
67.       // 键盘按下 => ↑
68.       if (e.code === 'ArrowUp') {
69.         if (this.index ‹= 0) {
70.           this.index = this.mockList.length - 1
71.         } else {
72.           this.index = this.index - 1
73.         }
74.       }
75.       // 键盘按下 => 回车
76.       if (e.code === 'Enter') {
77.         if (this.mockList.length) {
78.           const user = {
79.             name: this.mockList[this.index].name,
80.             id: this.mockList[this.index].id
81.           }
82.           this.$emit('onPickUser', user)
83.           this.index = -1
84.         }
85.       }
86.     },
87.     clickAt (e, item) {
88.       const user = {
89.         name: item.name,
90.         id: item.id
91.       }
92.       this.$emit('onPickUser', user)
93.       this.index = -1
94.     },
95.     hoverAt (index) {
96.       this.index = index
97.     }
98.   }
99. }
100. ‹/script>
102. ‹style scoped lang="scss">
103.   .wrapper {
104.     width: 238px;
105.     border: 1px solid #e4e7ed;
106.     border-radius: 4px;
107.     background-color: #fff;
108.     box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
109.     box-sizing: border-box;
110.     padding: 6px 0;
111.   }
112.   .empty{
113.     font-size: 14px;
114.     padding: 0 20px;
115.     color: #999;
116.   }
117.   .item {
118.     font-size: 14px;
119.     padding: 0 20px;
120.     line-height: 34px;
121.     cursor: pointer;
122.     color: #606266;
123.     &.active {
124.       background: #f5f7fa;
125.       color: blue;
126.       .id {
127.         color: blue;
128.       }
129.     }
130.     &:first-child {
131.       border-radius: 5px 5px 0 0;
132.     }
133.     &:last-child {
134.       border-radius: 0 0 5px 5px;
135.     }
136.     .id {
137.       font-size: 12px;
138.       color: rgb(83, 81, 81);
139.     }
140.   }
141. ‹/style>

复制代码

　　以上就是如何通过Vue实现@人的功能的详细内容，更多关于Vue @人功能的资料请关注脚本之家其它相关文章！

---