Shulou(Shulou.com)06/02 Report--

This article shows you how to achieve @ human function through Vue. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The following uses vue, while adding mouse click events and some page optimizations

Basic structure

Create a new basic structure of the sandBox.vue file writing function

Import AtDialog from'.. / components/AtDialog'export default {name: 'sandBox', components: {AtDialog}, data () {return {node:', / / get the content of the selected item endIndex:', / / the last pause position of the cursor queryString:', / / search value showDialog: false / / whether to display the pop-up window position: {x: 0, y: 0} / / pop-up window display position}}, methods: {/ / get the cursor position getCursorIndex () {const selection = window.getSelection () return selection.focusOffset / / Select the offset of the focusNode at the beginning} / / get node getRangeNode () {const selection = window.getSelection () return selection.focusNode / / selected end node} / / the location where the pop-up window appears getRangeRect () {const selection = window.getSelection () const range = selection.getRangeAt (0) / / is a generic object used to manage the selection const rect = range.getClientRects () [0] / / Select some text and will get the range of the selected text const LINE_HEIGHT = 30 return {x: rect.x Y: rect.y + LINE_HEIGHT}}, / / whether to display @ showAt () {const node = this.getRangeNode () if (! node | | node.nodeType! = = Node.TEXT_NODE) return false const content = node.textContent | |''const regx = / @ ([^ @\ s] *) $/ const match = regx.exec (content.slice (0) This.getCursorIndex ()) return match & & match.length = 2}, / / get @ user getAtUser () {const content = this.getRangeNode () .textContent | |''const regx = / @ ([^ @\ s] *) $/ const match = regx.exec (content.slice (0) This.getCursorIndex ()) if (match & & match.length = 2) {return match [1]} return undefined} / / create the tag createAtButton (user) {const btn = document.createElement ('span') btn.style.display =' inline-block' btn.dataset.user = JSON.stringify (user) btn.className = 'at-button' btn.contentEditable =' false' btn.textContent = `@ ${user.name}` const wrapper = document.createElement ('span') wrapper.style.display = 'inline-block' wrapper.contentEditable =' false' const spaceElem = document.createElement ('span') spaceElem.style.whiteSpace =' pre' spaceElem.textContent = 'u200b' spaceElem.contentEditable =' false' const clonedSpaceElem = spaceElem.cloneNode (true) wrapper.appendChild (spaceElem) wrapper.appendChild (btn) wrapper.appendChild (clonedSpaceElem) return wrapper} ReplaceString (raw, replacer) {return raw.replace (/ @ ([^ @\ s] *) $/, replacer)}, / / insert @ tag replaceAtUser (user) {const node = this.node if (node & & user) {const content = node.textContent |''const endIndex = this.endIndex const preSlice = this.replaceString (content.slice (0, endIndex)) '') const restSlice = content.slice (endIndex) const parentNode = node [XSS _ clean] const nextNode = node.nextSibling const previousTextNode = new Text (preSlice) const nextTextNode = new Text ('\ u200b' + restSlice) / / add 0 wide characters const atButton = this.createAtButton (user) parentNode.removeChild (node) / / insert if ( NextNode) {parentNode.insertBefore (previousTextNode NextNode) parentNode.insertBefore (atButton, nextNode) parentNode.insertBefore (nextTextNode, nextNode)} else {parentNode.appendChild (previousTextNode) parentNode.appendChild (atButton) parentNode.appendChild (nextTextNode)} / / reset cursor position const range = new Range () const selection = window.getSelection () range.setStart (nextTextNode, 0) range.setEnd (nextTextNode) 0) selection.removeAllRanges () selection.addRange (range)}} / / Keyboard lift event handkeKeyUp () {if (this.showAt ()) {const node = this.getRangeNode () const endIndex = this.getCursorIndex () this.node = node this.endIndex = endIndex this.position = this.getRangeRect () this.queryString = this.getAtUser () |''this.showDialog = true} else {this.showDialog = false}} / / the keyboard presses the event handleKeyDown (e) {if (this.showDialog) {if (e.code = 'ArrowUp' | | e.code = =' ArrowDown' | | e.code = = 'Enter') {e.preventDefault ()} / / hide the selection box handlePickUser (user) {this.replaceAtUser (user) this.user = user this.showDialog = false} after inserting the tag, / / hide the selection box handleHide () {this.showDialog = false}, / / display the selection box handleShow () {this.showDialog = true}} .content {font-family: sans-serif H2 {text-align: center;} .editor {margin: 0 auto; width: 600px; height: 150px; background: # fff; border: 1px solid blue; border-radius: 5px; text-align: left; padding: 10px; overflow: auto; line-height: 30px; &: focus {outline: none;}}

If a click event is added, the node and cursor position are obtained, which need to be obtained in the Keyboard lift event and saved to data.

/ / Keyboard lift event handkeKeyUp () {if (this.showAt ()) {const node = this.getRangeNode () / get node const endIndex = this.getCursorIndex () / / get cursor position this.node = node this.endIndex = endIndex this.position = this.getRangeRect () this.queryString = this.getAtUser () | |'' This.showDialog = true} else {this.showDialog = false}}

Create a new component and edit pop-up options

No search results {{item.name}} const mockData = [{name: 'HTML', id:' HTML'}, {name: 'CSS', id:' CSS'}, {name: 'Java', id:' Java'}, {name: 'JavaScript', id:' JavaScript'}] export default {name: 'AtDialog', props: {visible: Boolean, position: Object, queryString: String} Data () {return {users: [], index:-1, mockList: mockData}}, watch: {queryString (val) {val? This.mockList = mockData.filter ({name}) = > name.startsWith (val): this.mockList = mockData.slice (0)}}, mounted () {document.addEventListener ('keyup', this.keyDownHandler)}, destroyed () {document.removeEventListener (' keyup', this.keyDownHandler)} Methods: {keyDownHandler (e) {if (e.code = 'Escape') {this.$emit (' onHide') return} / / Keyboard press = > ↓ if (e.code = 'ArrowDown') {if (this.index > = this.mockList.length-1) {this.index = 0} else {this. Index = this.index + 1}} / / Keyboard Press = > ↑ if (e.code = 'ArrowUp') {if (this.index enter if (e.code =' Enter') {if (this.mockList.length) {const user = {name: this.mockList [this.index] .name Id: this.mockList [this.index] .id} this.$emit ('onPickUser', user) this.index =-1}}, clickAt (e, item) {const user = {name: item.name, id: item.id} this.$emit (' onPickUser', user) this.index =-1} HoverAt (index) {this.index = index}} .wrapper {width: 238px Border: 1px solid # e4e7ed; border-radius: 4px; background-color: # fff; box-shadow: 0 2px 12px 0 rgb (000 / 10%); box-sizing: border-box; padding: 6px 0;} .empty {font-size: 14px; padding: 020px; color: # 999;} .item {font-size: 14px; padding: 020px; line-height: 34px; cursor: pointer Color: # 606266; & .active {background: # f5f7fa; color: blue; .id {color: blue;}} &: first-child {border-radius: 5px 5px 00;} &: last-child {border-radius: 00 5px 5px;} .id {font-size: 12px; color: rgb (83,81,81) }} the above content is how to achieve @ human function through Vue. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.