md/src/components/CodemirrorEditor/rightClickMenu.vue

119 lines
2.3 KiB
Vue
Raw Normal View History

2020-07-13 00:26:29 +08:00
<template>
<ul v-show="value" id="menu" class="menu" :style="`left: ${left}px;top: ${top}px;`">
2020-07-26 18:39:27 +08:00
<li v-for="item of list" :key="item.key" class="menu_item" @mousedown="onMouseDown(item.key)">
2020-08-30 20:21:15 +08:00
<span>{{item.text}}</span>
2020-07-13 00:26:29 +08:00
</li>
</ul>
</template>
<script>
import {
2020-07-13 20:58:38 +08:00
uploadImgFile,
} from '../../assets/scripts/uploadImageFile';
2020-07-13 00:26:29 +08:00
export default {
props: {
value: {
type: Boolean,
default: false
},
top: {
type: Number,
default: 0
},
left: {
type: Number,
default: 0
}
},
data() {
return {
list: [
2020-08-29 11:55:16 +08:00
{
text: '上传图片',
key: 'insertPic'
},
2020-07-13 00:26:29 +08:00
{
text: '插入表格',
key: 'insertTable'
},
{
text: '页面重置',
key: 'pageReset'
},
{
text: '下载MD文档',
key: 'downLoad'
}
]
}
},
methods: {
closeCB() {
this.$emit('input', false);
},
2020-07-26 18:39:27 +08:00
onMouseDown(key){
2020-08-30 20:21:15 +08:00
this.$emit('menuTick', key)
this.$emit('closeMenu', false)
2020-07-26 18:39:27 +08:00
}
2020-07-13 00:26:29 +08:00
},
}
</script>
<style lang="less" scoped>
.menu {
position: absolute;
padding: 6px 0;
border-radius: 4px;
border: 1px solid #aaaaaa;
background-color: #ffffff;
z-index: 9999;
}
.menu_item {
margin-top: 10px;
min-width: 125px;
font-size: 14px;
line-height: 20px;
color: #303133;
cursor: pointer;
&:first-of-type {
margin-top: 0;
}
&:hover {
color: white;
background: rgb(139, 146, 148);
}
2020-07-26 18:39:27 +08:00
span,.btn-upload {
2020-07-13 00:26:29 +08:00
text-align: center;
display: inline-block;
padding: 4px 0;
width: 100%;
}
2020-07-26 18:39:27 +08:00
.btn-upload {
margin: 0;
border:none;
outline: none;
background: transparent;
}
.btn-upload:hover {
color: white;
background: rgb(139, 146, 148);
}
2020-07-13 00:26:29 +08:00
/deep/ .el-upload {
width: 100%;
}
}
li:hover {
background-color: #1790ff;
color: white;
}
li {
font-size: 15px;
list-style: none;
}
</style>