修复BUG，v-lemon-contextmenu支持左键触发
This commit is contained in:
fan
@@ -0,0 +1,200 @@
|
||||
<script>
|
||||
import UserData from "../database/user";
|
||||
import ContactsData from "../database/contacts";
|
||||
import MessagesData from "../database/messages";
|
||||
import EmojiData from "../database/emoji";
|
||||
export default {
|
||||
name: "QqImui",
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div class="qq-lemon-imui">
|
||||
<lemon-imui
|
||||
class="lemon-slot"
|
||||
user={UserData}
|
||||
width={900}
|
||||
avatar-cricle
|
||||
hide-message-time
|
||||
ref="IMUI"
|
||||
on={{
|
||||
"pull-messages": this.handlePullMessages,
|
||||
"change-contact": this.handleChangeContact,
|
||||
send: this.handleSend,
|
||||
}}
|
||||
scopedSlots={{
|
||||
"message-title": contact => {
|
||||
return (
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between">
|
||||
<span>{contact.displayName}</span>
|
||||
<span style="font-size:12px;">
|
||||
<span>打开抽屉：</span>
|
||||
<span
|
||||
class="cursor:pointer;"
|
||||
on-click={() => this.openDrawer("right")}
|
||||
>
|
||||
右侧 |{" "}
|
||||
</span>
|
||||
<span
|
||||
class="cursor:pointer;"
|
||||
on-click={() => this.openDrawer("rightInside")}
|
||||
>
|
||||
右侧内部 |{" "}
|
||||
</span>
|
||||
<span
|
||||
class="cursor:pointer;"
|
||||
on-click={() => this.openDrawer("center")}
|
||||
>
|
||||
居中
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{contact.isGroup && (
|
||||
<div class="slot-group-menu">
|
||||
<span>聊天</span>
|
||||
<span>公告</span>
|
||||
<span>相册</span>
|
||||
<span>文件</span>
|
||||
<span>活动</span>
|
||||
<span
|
||||
v-lemon-contextmenu_click={[
|
||||
{
|
||||
text: "操作一",
|
||||
},
|
||||
{
|
||||
text: "操作二",
|
||||
},
|
||||
]}
|
||||
>
|
||||
设置(左键弹出菜单)
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
"sidebar-contact-fixedtop": contact => {
|
||||
return (
|
||||
<div class="slot-contact-fixedtop">
|
||||
<input class="slot-search" placeholder="搜索通讯录" />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
"message-side": contact => {
|
||||
if (contact.isGroup) {
|
||||
return (
|
||||
<div class="slot-group">
|
||||
<div class="slot-group-title">群通知</div>
|
||||
<div class="slot-group-notice">
|
||||
进群请改备注，格式，工作地点-姓名，请大家配合谢谢
|
||||
</div>
|
||||
<div class="slot-group-title">群成员</div>
|
||||
<div class="slot-group-panel">
|
||||
<input class="slot-search" placeholder="搜索群成员" />
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
<div class="slot-group-member">河南-96-十里青山</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
const IMUI = this.$refs.IMUI;
|
||||
//contactData3.id = "333";
|
||||
IMUI.initContacts(ContactsData);
|
||||
IMUI.changeContact(13);
|
||||
//console.log(IMUI.getContacts());
|
||||
// SlotIMUI.initEmoji(emojiData);
|
||||
},
|
||||
methods: {
|
||||
openDrawer(position) {
|
||||
const IMUI = this.$refs.IMUI;
|
||||
const params = {
|
||||
position,
|
||||
render: contact => {
|
||||
return (
|
||||
<div style="padding:15px">
|
||||
<h5>{contact.displayName}</h5>
|
||||
<span on-click={IMUI.closeDrawer}>关闭抽屉</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
if (position == "center") {
|
||||
params.width = "50%";
|
||||
params.height = "50%";
|
||||
} else if (position == "rightInside") {
|
||||
params.height = "90%";
|
||||
params.offsetY = "10%";
|
||||
}
|
||||
IMUI.openDrawer(params);
|
||||
},
|
||||
handlePullMessages(contact, next) {
|
||||
next(MessagesData[contact.id], true);
|
||||
},
|
||||
handleChangeContact() {},
|
||||
handleSend(message, next, file) {
|
||||
console.log(message, next, file);
|
||||
setTimeout(() => {
|
||||
next();
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
.slot-group
|
||||
width 170px
|
||||
border-left 1px solid #ddd;
|
||||
height 100%
|
||||
box-sizing border-box
|
||||
padding 10px
|
||||
.slot-search
|
||||
margin 5px 0
|
||||
.slot-group-notice
|
||||
color #999
|
||||
padding 6px 0
|
||||
font-size 12px
|
||||
.slot-group-title
|
||||
font-size 12px
|
||||
.slot-group-member
|
||||
font-size 12px
|
||||
line-height 18px
|
||||
.slot-group-menu span
|
||||
display inline-block
|
||||
cursor pointer
|
||||
color #888
|
||||
margin 4px 10px 0 0
|
||||
border-bottom 2px solid transparent;
|
||||
&:hover
|
||||
color #000
|
||||
border-color #333
|
||||
.slot-contact-fixedtop
|
||||
padding 10px
|
||||
border-bottom 1px solid #ddd
|
||||
.slot-search
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
font-size 14px
|
||||
border 1px solid #bbb
|
||||
padding 5px 10px
|
||||
</style>
|
||||
Reference in New Issue
Block a user