<template>
<div class="content-container">
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="540px"
:append-to-body="true"
:close-on-click-modal="false"
:before-close="handleClose"
custom-class="bpm-message-dialog"
>
<el-form
ref="form"
:rules="rules"
:model="form"
label-position="top"
>
<el-form-item label="内容" prop="note">
<div
ref="editor"
class="message"
spellcheck="false"
:contenteditable="true"
@keyup="handkeKeyUp"
@keydown="handleKeyDown"
/>
</el-form-item>
<el-form-item label="附件">
<MyUpload
ref="myUpload"
v-model="form.fileList"
type="img"
:accept="['.png','.jpg','.jpeg','.gif']"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
<AtDialog
v-if="showDialog"
ref="atDialog"
:visible="showDialog"
:position="position"
:query-string="queryString"
@onPickUser="handlePickUser"
@onHide="handleHide"
@onShow="handleShow"
@close="showDialog = false"
/>
</el-dialog>
</div>
</template>
<script>
import MyUpload from '@/components/approveUpload/approve.vue'
import AtDialog from './AtDialog'
export default {
name: 'RejectA',
components: { MyUpload, AtDialog },
props: {
title: {
type: String,
default: '留言'
}
},
data() {
return {
dialogVisible: false,
form: {
note: '',
fileList: ''
},
rules: {
note: [{ required: true, message: '请输入备注信息', trigger: 'blur' }]
},
fileList: [],
allowSize: 50 * 1024,
limit: 5,
operateType: null, // 操作类型
node: '', // 获取到节点
user: '', // 选中项的内容
endIndex: '', // 光标最后停留位置
queryString: '', // 搜索值
showDialog: false, // 是否显示弹窗
position: {
x: 0,
y: 0
}// 弹窗显示位置
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
// 限制输入框换行操作
handleTextareaKeydown() {
const e = window.event || arguments[0]
if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === 13) {
e.returnValue = false
return false
}
},
openDialog() {
this.dialogVisible = true
},
handleClose(done) {
console.log('handleClose')
this.$refs.form.resetFields()
this.$set(this.form, 'fileList', null)
this.$refs.myUpload.clearFileList()
this.dialogVisible = false
},
// 获取光标位置
getCursorIndex() {
const selection = window.getSelection()
return selection.focusOffset // 选择开始处 focusNode 的偏移量
},
// 获取节点
getRangeNode() {
const selection = window.getSelection()
return selection.focusNode // 选择的结束节点
},
// 弹窗出现的位置
getRangeRect() {
const selection = window.getSelection()
const range = selection.getRangeAt(0) // 是用于管理选择范围的通用对象
const rect = range.getClientRects()[0] // 择一些文本并将获得所选文本的范围
const LINE_HEIGHT = 30
return {
x: rect.x,
y: rect.y + LINE_HEIGHT
}
},
// 是否展示 @
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()))
console.log('match', match)
return match && match.length === 2
},
// 获取 @ 用户
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
},
// 创建标签
createAtButton(user) {
const btn = document.createElement('span')
btn.style.display = 'inline-block'
btn.dataset.user = JSON.stringify(user)
btn.className = 'bpm-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)
},
// 插入@标签
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.parentNode
const nextNode = node.nextSibling
const previousTextNode = new Text(preSlice)
const nextTextNode = new Text('\u200b' + restSlice) // 添加 0 宽字符
const atButton = this.createAtButton(user)
parentNode.removeChild(node)
// 插在文本框中
if (nextNode) {
parentNode.insertBefore(previousTextNode, nextNode)
parentNode.insertBefore(atButton, nextNode)
parentNode.insertBefore(nextTextNode, nextNode)
} else {
parentNode.appendChild(previousTextNode)
parentNode.appendChild(atButton)
parentNode.appendChild(nextTextNode)
}
// 重置光标的位置
const range = new Range()
const selection = window.getSelection()
range.setStart(nextTextNode, 0)
range.setEnd(nextTextNode, 0)
selection.removeAllRanges()
selection.addRange(range)
}
},
// 键盘抬起事件
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
}
},
// 键盘按下事件
handleKeyDown(e) {
if (this.showDialog) {
if (e.code === 'ArrowUp' ||
e.code === 'ArrowDown' ||
e.code === 'Enter') {
e.preventDefault()
}
}
},
resetAtDialog() {
this.queryString = ''
this.$refs.index = -1
},
// 插入标签后隐藏选择框
handlePickUser(user) {
this.replaceAtUser(user)
this.user = user
this.showDialog = false
},
// 隐藏选择框
handleHide() {
this.showDialog = false
},
// 显示选择框
handleShow() {
this.queryString = ''
this.$refs.index = -1
this.showDialog = true
},
submit() {
switch (this.title) {
case '驳回到发起人':
this.operateType = 4
break
case '驳回到指定节点':
this.operateType = 5
break
case '驳回到上一节点':
this.operateType = 6
break
case '同意':
this.operateType = 7
break
}
this.$refs.form.validate((valid) => {
if (valid) {
// 判断是否存在文件上传
this.isUploading().then((res) => {
if (res) {
console.log('res', res)
} else {
console.log('')
}
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss">
.bpm-message-dialog {
.message {
min-height: 96px;
display: block;
resize: vertical;
padding: 5px 15px;
line-height: 1.5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
font-size: inherit;
color: #606266;
background-color: #FFFFFF;
background-image: none;
border: 1px solid #DCDFE6;
border-radius: 4px;
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
}
</style>
<style lang="scss" scoped>
@import "~@/views/taskManage/css/dialog.scss";
</style>
<template>
<div
class="wrapper"
:style="{position:'fixed',top:position.y +'px',left:position.x+'px'}"
>
<div v-if="!mockList.length" class="empty">
<p>无搜索结果</p>
</div>
<div
v-for="(item,i) in mockList"
:key="item.id"
ref="usersRef"
class="item"
:class="{'active': i === index}"
@click="clickAt($event,item)"
@mouseenter="hoverAt(i)"
>
<div class="name">{{ item.name }}</div>
</div>
</div>
</template>
<script> const mockData = [ { name: 'HTML', id: 'HTML' }, { name: 'CSS', id: 'CSS' }, { name: 'Java', id: 'Java' }, { name: 'JavaScript', id: 'JavaScript' } ] export default { name: 'AtDialog', props: { visible: { type: Boolean }, position: { type: Object, default: () => {} }, queryString: { type: String, default: '' } }, 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: { closeDialog() { this.index = -1 this.$emit('close') }, keyDownHandler(e) { if (e.code === 'Escape') { this.$emit('onHide') return } // 键盘按下 => ↓ if (e.code === 'ArrowDown') { if (this.index >= this.mockList.length - 1) { this.index = 0 } else { this.index = this.index + 1 } } // 键盘按下 => ↑ if (e.code === 'ArrowUp') { if (this.index <= 0) { this.index = this.mockList.length - 1 } else { this.index = this.index - 1 } } // 键盘按下 => 回车 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 } } } </script>
<style scoped lang="scss"> .wrapper { width: 238px; border: 1px solid #e4e7ed; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-sizing: border-box; padding: 6px 0; } .empty{ font-size: 14px; padding: 0 20px; color: #999; height: 24px; line-height: 24px; position: relative; svg { position: absolute; width: 18px; height: 18px; right: 6px; top: 4px; cursor: pointer; } } .item { font-size: 14px; padding: 0 20px; line-height: 34px; cursor: pointer; color: #606266; &.active { background: #f5f7fa; color: blue; .id { color: blue; } } &:first-child { border-radius: 5px 5px 0 0; } &:last-child { border-radius: 0 0 5px 5px; } .id { font-size: 12px; color: rgb(83, 81, 81); } } </style> 标签：node,index,功能,Vue,const,name,评论,user,return From： https://www.cnblogs.com/zerofan/p/16921266.html