atuser.vue
展开更多群成员
import getCaretCoordinates from 'textarea-caret'
export default {
props: {
value: { //输入框初始值
type: String,
default: null
},
suffix: { //插入字符链接
type: String,
default: ' '
},
loop: { //上下箭头循环
type: Boolean,
default: true
},
avoidEmail: { //@前不能是字符
type: Boolean,
default: true
},
hoverSelect: { //悬浮选中
type: Boolean,
default: true
},
members: { //选择框选项列表
type: Array,
default: () => []
},
nameKey: {
type: String,
default: ''
}
},
data() {
return {
atItems: ['@'],
bindsValue: this.value != null,
atwho: null
}
},
computed: {
style() {
if(this.atwho) {
const {
list,
cur,
x,
y
} = this.atwho
const {
wrap
} = this.$refs
const el = this.$el.querySelector('textarea')
if(wrap) {
const left = x + el.offsetLeft - el.scrollLeft + 'px'
const top = y + el.offsetTop - el.scrollTop + 25 + 'px'
return {
left,
top
}
}
}
return null
}
},
watch: {
members() {
this.handleInput(true)
},
value(value, oldValue) {
if(this.bindsValue) {
this.handleValueUpdate(value)
}
}
},
mounted() {
if(this.bindsValue) {
this.handleValueUpdate(this.value)
}
},
methods: {
getAtAndIndex(text, ats) {