предисловие
Недавно я написал API для новой программы на Python, думая об использованииvueЧтобы быть данными управления системой, эта картина возникает у меня в голове:
Однако на этом стиле управления фоном было сделано слишком много, и он уже эстетически утомлен.Позже я подумал об UI-интерфейсе некой операционной системы:
главным образом双击а также右键Для работы вы можете управлять несколькими модальными окнами, следуйте инструкциямwindowsАналогично далее вынесем в нем функциональный блок для написания статьи, которая自定义系统默认的右键.
Существует пять шагов для настройки действия правой кнопки мыши:
-
阻止Щелкните правой кнопкой мыши по умолчанию. - Получить текущий щелчок правой кнопкой мыши
x/yкоординаты иid. - Настройте стиль и содержимое контекстного меню и отобразите его после размещения в указанной позиции.
- Возвращает события, соответствующие выбранному каталогу, например:
查看,删除,编辑. - При щелчке левой кнопкой мыши в любом месте
隐藏右键菜单.
Ключевой метод:
@contextmenu.prevent
Это метод обратного вызова, встроенный в Vue. Щелкните правой кнопкой мыши (чтобы предотвратить поведение по умолчанию щелчка правой кнопкой мыши по умолчанию). Он возвращает кучу вещей. Вот два, которые я использую (используются для определения положения x, y отображаемое меню)
x_index,y_indexхранится вdata, используемый для определения положения модального окна.
ctrlIdОснова для работы с интерфейсом
showMenuИспользуется для определения, отображать ли контекстное меню.
<!--template-->
<ul>
<li class="role_list"
v-for="(item,index) in role"
:key="index"
@contextmenu.prevent="(e)=>{
x_index = e.layerX;
y_index = e.layerY;
ctrlId = item.id;
showMenu = true;
}">
<img :src="item.head_portrait" alt="">
<p>{{item.name}}</p>
</li>
</ul>
Требуемые параметры (x, y, id) доступны, поскольку операция щелчка правой кнопкой мыши используется во многих местах, поэтому она инкапсулирована в компонент.
Код компонента right_menu.vue
| имя параметра | Примечания |
|---|---|
| x | х координата |
| y | у координата |
| showMenu | Состояние отображения |
<template>
<div v-if="show"
class="menu_style"
:style="{top:y+'px',left:x+'px'}">
<ul>
<!-- 分别传递事件给父元素调用 -->
<li @click="()=>{$emit('open')}">打开</li>
<li @click="()=>{$emit('update')}">编辑</li>
<li @click="()=>{$emit('del')}">删除</li>
</ul>
</div>
</template>
<script>
export default{
name:'right_menu',
props:{
x:{
type:[Number],
default:0
},
y:{
type:[Number],
default:0
},
showMenu:{
type:[Boolean],
default:false
}
},
data(){
return {
show:false,
}
},
methods:{
// 点击别处时隐藏目录，并传递一个关闭事件
closeMenu(e){
this.show = false;
this.$emit("close",false)
},
},
mounted(){
// 监听body上的点击
document.querySelector("body").addEventListener("click",this.closeMenu)
},
beforeDestroy(){
// 移除监听
document.querySelector("body").removeEventListener("click",this.closeMenu)
},
watch:{
// 监听，保持显示状态与父元素一致
showMenu(val){
this.show = val;
}
},
}
</script>
<style scoped>
.menu_style{
position: absolute;
width: 150px;
background-color: #fff;
border-radius: 2px;
box-shadow: 2px 2px 14px #d0d0d0;
}
.menu_style>ul>li{
text-indent: 25px;
height: 38px;
line-height: 38px;
border-bottom: 1px dashed #f0f0f0;
cursor: pointer;
}
.menu_style>ul>li:hover{
background: #E0EEFF;
}
</style>
Использование компонентов
<template>
<div class="modal_data_box">
<ul>
<li class="role_list"
v-for="(item,index) in role"
:key="index"
@contextmenu.prevent="(e)=>{
x_index = e.layerX;
y_index = e.layerY;
ctrlId = item.id;
showMenu = true;
}">
<img :src="item.head_portrait" alt="">
<p>{{item.name}}</p>
</li>
</ul>
<!--组件-->
<right-menu :x="x_index"
:y="y_index"
:showMenu="showMenu"
@close="closeMenu"
@open="openDetail"
@del="delAttr"
@update="updateArr">
</right-menu>
</div>
</template>
<script>
// 导入组件
import rightMenu from '../module/right_menu.vue';
export default{
name:"roleModal",
components:{rightMenu},
data(){
return {
x_index:0,
y_index:0,
ctrlId:'',
showMenu:false,
role:[],
}
},
methods:{
//关闭回调
closeMenu(state){
console.log('关闭')
this.showMenu = state;
},
//打开详情回调
openDetail(){
console.log('编辑')
},
//删除回调
delAttr(){
console.log('删除')
},
//编辑回调
updateArr(){
console.log('编辑')
},
}
}
</script>
исправлять ошибки
d[o_0]bОдноклассники нашли лазейку, то есть при нажатии мышкой в правой части экрана меню будет заблокировано, и здесь внесены некоторые коррективы.
До ремонта:
//原来的代码
<ul>
<li class="role_list"
v-for="(item,index) in role"
:key="index"
@contextmenu.prevent="(e)=>{
x_index = e.layerX;
y_index = e.layerY;
ctrlId = item.id;
showMenu = true;
}">
<img :src="item.head_portrait" alt="">
<p>{{item.name}}</p>
</li>
</ul>
После исправления:
//修改后的代码，（由于要判断，所以单独写了个方法，把e跟item都传过去）
<ul>
<li class="role_list"
v-for="(item,index) in role"
:key="index"
@contextmenu.prevent="(e)=>{
rightClick(e,item)
}">
<img :src="item.head_portrait" alt="">
<p>{{item.name}}</p>
</li>
</ul>
//对应的rightClick方法
rightClick(e,item){
// 屏幕可见宽
let clientWidth = document.body.clientWidth;
// 菜单宽
let menuWidth = 150;
// 点击右键时会返回对应的clientX，用这个值与(clientWidth+菜单宽度)对比，如果大于的话，就把菜单左偏移一个菜单宽
let clickClientX = e.clientX + menuWidth
if(clickClientX > clientWidth){
console.log("菜单超出视线范围")
this.x_index = e.layerX - menuWidth;
}else{
this.x_index = e.layerX;
}
this.y_index = e.layerY;
this.ctrlId = item.id;
this.showMenu = true;
},
Обновление метода:
благодарныйФанта ТзУчащиеся предлагают решение для оптимизации правой кнопкой мыши$event
@contextmenu.prevent="rightClick($event,item)"
Остальные статьи:
Итого общих интерфейсных функций (постоянно обновляется)
css изображения отображаются по длинной стороне