feat: 'apply' event

Akryum · Dec 28, 2020 · 7606c4d · 7606c4d
1 parent 74be11a
commit 7606c4d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/packages/test-e2e/src/views/SearchEvent.vue b/packages/test-e2e/src/views/SearchEvent.vue
@@ -20,6 +20,7 @@ export default {
       searchText: null,
       openKey: null,
       closeKey: null,
+      applyEvent: null,
     }
   },
 }
@@ -35,6 +36,7 @@ export default {
       @search="searchText = $event"
       @open="openKey = $event"
       @close="closeKey = $event"
+      @apply="(item, key) => applyEvent = { item, key }"
     >
       <textarea
         v-model="text"
@@ -46,5 +48,6 @@ export default {
     <div class="search">{{ searchText }}</div>
     <div class="open">{{ openKey }}</div>
     <div class="close">{{ closeKey }}</div>
+    <div class="apply">value: {{ applyEvent ? applyEvent.item.value : null }} key: {{ applyEvent ? applyEvent.key : null }}</div>
   </div>
 </template>
diff --git a/packages/test-e2e/tests/e2e/specs/events.js b/packages/test-e2e/tests/e2e/specs/events.js
@@ -1,13 +1,11 @@
-describe('search event', () => {
+describe('events', () => {
   it('emits search event', () => {
     cy.visit('/search-event')
     cy.get('.input').type('@pos')
     cy.get('.popover').should('be.visible')
     cy.get('.search').should('contain', 'pos')
   })
-})
 
-describe('open and close events', () => {
   it('emits open and close events', () => {
     cy.visit('/search-event')
     cy.get('.input').type('@pos')
@@ -18,4 +16,14 @@ describe('open and close events', () => {
     cy.get('.popover').should('not.be.visible')
     cy.get('.close').should('contain', '@')
   })
+
+  it('emits apply event', () => {
+    cy.visit('/search-event')
+    cy.get('.input').type('@pos')
+    cy.get('.popover').should('be.visible')
+    cy.get('.apply').should('not.contain', '"item":')
+    cy.get('.input').type('{downArrow}{enter}')
+    cy.get('.apply').should('contain', 'value: posva')
+      .should('contain', 'key: @')
+  })
 })
diff --git a/packages/vue-mention/src/Mentionable.vue b/packages/vue-mention/src/Mentionable.vue
@@ -314,6 +314,7 @@ export default {
       const value = (this.omitKey ? '' : this.key) + String(this.mapInsert ? this.mapInsert(item, this.key) : item.value) + (this.insertSpace ? ' ' : '')
       this.setValue(this.replaceText(this.getValue(), this.searchText, value, this.keyIndex))
       this.setCaretPosition(this.keyIndex + value.length)
+      this.$emit('apply', item, this.key)
       this.closeMenu()
     },