naive-ui/demo/documentation/components/autoComplete/enUS/customInput.md

39 lines
741 B
Markdown
Raw Normal View History

2019-12-04 18:17:25 +08:00
# Custom Input Element
```html
<n-auto-complete :options="options" v-model="value">
<template v-slot:activator="{ handleInput, handleBlur, handleFocus, value }">
<n-input
type="textarea"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
:value="value"
placeholder="Email"
/>
</template>
</n-auto-complete>
```
```js
export default {
computed: {
options () {
return [
'@gmail.com',
'@163.com',
'@qq.com'
].map(suffix => {
const prefix = this.value.split('@')[0]
return {
label: prefix + suffix,
value: prefix + suffix,
}
})
}
},
data () {
return {
value: ''
}
}
}
```