<template>
<div>
<el-input
v-model="value"
placeholder="请输入..."
style="width: 300px;"
ref="commonDivContent"
@contextmenu.native="openMenu($event)"
//组件api失焦事件
@on-blur= "blurEvent($event)"
></el-input>
<div
v-if="menuFlag"
ref="commonMouseRightMenu"
:id="rightMenuId"
class="hws-right-menu"
:style="style"
>
<!-- <div class="hws-copy" v-if="copyData && isNeedCopyContent">
<div class="hws-copy-title">剪切板</div>
<div class="hws-copy-content" @click="insert(copyData)">{{copyData}}</div>
</div> -->
<ul>
<li
v-for="item in list"
:key="item.id || item.value"
:ref="item.id || item.value"
@click="insert(item.value)"
>
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
components: {CommonMouseMenu},
data() {
return {
templateParamData: 'fsdfhaksdjhf',
list: [
{
name: '插入年份<yyyy>(如2009)',
value: '<yyyy>'
},
{
name: '插入年份<yy>(如09)',
value: '<yy>'
},
{
name: '插入月份<mm>(如02)',
value: '<mm>'
},
{
name: '插入月份<fmmm>(如2)',
value: '<fmmm>'
},
{
name: '插入日<dd>(如05日)',
value: '<dd>'
},
{
name: '插入日<fmdd>(如5日)',
value: '<fmdd>'
}
],
menuFlag: false,
value: '你今天也超级棒',
style: {
left: 0,
top: 0
},
rightMenuRange: {},
//失焦之后记录坐标位置值
blurIndex: null
}
},
computed: {
rightMenuId() {
return 'rightMenuId-' + this.id
}
},
methods: {
openMenu(e) {
e.preventDefault()
// console.log(e)
this.menuFlag = true
// this.menuFlag = true
// // 当前浏览器窗口宽度跟高度
const clientWidth = document.body.clientWidth
const clientHeight = document.body.clientHeight
// // 打开右键菜单
this.$nextTick(() => {
const commonMouseRightMenu = document.getElementById(this.rightMenuId)
const rightMenuWidth = commonMouseRightMenu.offsetWidth || 210
// // 鼠标点的坐标
// clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标
const oX = e.clientX + rightMenuWidth > clientWidth ? e.clientX - rightMenuWidth : e.clientX
const oY = e.clientY + 200 > clientHeight ? e.clientY - 100 : e.clientY
// let el = this.$refs.commonDivContent
// console.log(el)
// 记录鼠标光标的位置
this.rightMenuRange = window.getSelection().getRangeAt(0)
// 右键菜单出现后的位置
this.style.left = oX + 'px'
this.style.top = oY + 'px'
})
},
// 鼠标插入数据操作
insert(text) {
this.$nextTick(() => {
let str = this.value.toString()
this.value = str.slice(0, this.blurIndex) + text + str.slice(this.blurIndex)
})
},
blurEvent(e) {
this.blurIndex = e.srcElement.selectionStart
}
}
}
</script>
<style lang="scss" scoped>
.hws-right-menu {
position: fixed;
left: 0;
top: 0;
height: auto;
max-height: 200px;
min-width: 210px;
background-color: white;
box-shadow: 2px 5px 6px #c2c1c2;
display: block;
border-radius: 2px;
overflow-y: auto;
border: 1px solid lightgrey;
}
</style>
