robin/lemon-imui
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

增加右键菜单配置

Browse Source 
增加setEditorValue、getEditorValue方法
修改updateContact传参
修复只选择表情发送按钮是灰色的问题
修复send之后toContactId丢失的问题
This commit is contained in:
fan committed 2021-01-30 21:03:15 +08:00
1 parent f56dc40075
commit 3603d0c03b
23 files changed
+825 -184
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

dist/index.common.js
Vendored
+195 -57
View File
@@ -3187,6 +3187,13 @@ module.exports = {
};
/***/ }),
/***/ "8bbf":
/***/ (function(module, exports) {
module.exports = require("vue");
/***/ }),
/***/ "8e60":
@@ -5566,7 +5573,7 @@ var tabs_render, staticRenderFns
/* normalize component */
var component = normalizeComponent(
var tabs_component = normalizeComponent(
components_tabsvue_type_script_lang_js_,
tabs_render,
staticRenderFns,
@@ -5577,7 +5584,7 @@ var component = normalizeComponent(
)
/* harmony default export */ var tabs = (component.exports);
/* harmony default export */ var tabs = (tabs_component.exports);
// EXTERNAL MODULE: ./node_modules/regenerator-runtime/runtime.js
var runtime = __webpack_require__("96cf");
@@ -5712,7 +5719,7 @@ var triggerEvents = {
"style": "position:relative"
}, [h("transition", {
"attrs": {
"name": "slide-top"
"name": "lemon-slide-top"
}
}, [this.visible && h("div", {
"class": "lemon-popover",
@@ -6184,6 +6191,10 @@ function arrayIntersect(a, b) {
function clearHtml(str) {
return str.replace(/<.*?>/ig, "");
} //清除字符串内的所有HTML标签，除了IMG
function clearHtmlExcludeImg(str) {
return str.replace(/<(?!img).*?>/ig, "");
}
function error(text) {
throw new Error(text);
@@ -6249,6 +6260,14 @@ function generateUUID() {
/* harmony default export */ var contactvue_type_script_lang_js_ = ({
name: "LemonContact",
components: {},
inject: {
IMUI: {
from: 'IMUI',
default: function _default() {
return this;
}
}
},
data: function data() {
return {};
},
@@ -6283,24 +6302,16 @@ function generateUUID() {
watch: {},
methods: {
_renderInner: function _renderInner() {
var _this2 = this;
var h = this.$createElement;
var contact = this.contact;
return [h("lemon-badge", {
"attrs": {
"count": !this.simple ? contact.unread : 0,
"native-on-click": function nativeOnClick(e) {
return _this2._handleBubbleClick(e, contact);
}
"count": !this.simple ? contact.unread : 0
},
"class": "lemon-contact__avatar"
}, [h("lemon-avatar", {
"attrs": {
"size": 40,
"native-on-click": function nativeOnClick(e) {
return _this2._handleAvatarClick(e, contact);
},
"src": contact.avatar
}
})]), h("div", {
@@ -6321,14 +6332,6 @@ function generateUUID() {
},
_handleClick: function _handleClick(e, data) {
this.$emit("click", data);
},
_handleAvatarClick: function _handleAvatarClick(e, data) {
e.stopPropagation();
this.$emit("avatar-click", data);
},
_handleBubbleClick: function _handleBubbleClick(e, data) {
e.stopPropagation();
this.$emit("bubble-click", data);
}
}
});
@@ -6662,6 +6665,8 @@ var isInitTool = false;
exec("<img emoji-name=\"".concat(item.name, "\" src=\"").concat(item.src, "\"></img>"));
this._checkSubmitDisabled();
this._saveLastRange();
},
selectFile: function () {
@@ -6724,7 +6729,7 @@ var isInitTool = false;
return toEmojiName(this.$refs.textarea.innerHTML);
},
_checkSubmitDisabled: function _checkSubmitDisabled() {
this.submitDisabled = !this.$refs.textarea.innerText.trim();
this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
},
_handleSend: function _handleSend(e) {
var text = this.getFormatValue();
@@ -6748,6 +6753,11 @@ var isInitTool = false;
initEmoji: function initEmoji(data) {
emojiData = data;
this.$forceUpdate();
},
setValue: function setValue(val) {
this.$refs.textarea.innerHTML = val;
this._checkSubmitDisabled();
}
}
});
@@ -6777,6 +6787,86 @@ var editor_component = normalizeComponent(
)
/* harmony default export */ var editor = (editor_component.exports);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// CONCATENATED MODULE: ./packages/directives/dropdown.js
var dropdown_popover;
var hidePopover = function hidePopover() {
if (dropdown_popover) dropdown_popover.style.display = 'none';
};
var showPopover = function showPopover() {
if (dropdown_popover) dropdown_popover.style.display = 'block';
};
document.addEventListener('click', function (e) {
hidePopover();
});
/* harmony default export */ var dropdown = ({
hide: hidePopover,
bind: function bind(el, binding, vnode) {
el.addEventListener('contextmenu', function (e) {
if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
var component;
var visibleItems = [];
if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
if (!dropdown_popover) {
dropdown_popover = document.createElement('div');
dropdown_popover.className = 'lemon-dropdown';
document.body.appendChild(dropdown_popover);
}
dropdown_popover.innerHTML = binding.value.map(function (item) {
var visible;
if (isFunction(item.visible)) {
visible = item.visible(component);
} else {
visible = item.visible === undefined ? true : item.visible;
}
if (visible) {
visibleItems.push(item);
var icon = item.icon ? "<i class=\"lemon-dropdown__icon ".concat(item.icon, "\"></i>") : '';
return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-dropdown__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
}
return '';
}).join("");
dropdown_popover.style.top = "".concat(e.pageY, "px");
dropdown_popover.style.left = "".concat(e.pageX, "px");
dropdown_popover.childNodes.forEach(function (node, index) {
var _visibleItems$index = visibleItems[index],
click = _visibleItems$index.click,
_render = _visibleItems$index.render;
node.addEventListener('click', function (e) {
e.stopPropagation();
if (isFunction(click)) click(e, component, hidePopover);
});
if (isFunction(_render)) {
var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
render: function render(h) {
return _render(h, component, hidePopover);
}
});
var renderComponent = new ins().$mount();
node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
}
});
showPopover();
});
},
inserted: function inserted(el, binding, vnode) {}
});
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/messages.vue?vue&type=script&lang=js&
@@ -6784,6 +6874,7 @@ var editor_component = normalizeComponent(
/* harmony default export */ var messagesvue_type_script_lang_js_ = ({
name: "LemonMessages",
components: {},
@@ -6907,17 +6998,18 @@ var editor_component = normalizeComponent(
switch (_context2.prev = _context2.next) {
case 0:
target = e.target;
dropdown.hide();
if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
_context2.next = 7;
_context2.next = 8;
break;
}
this._loading = true;
_context2.next = 5;
_context2.next = 6;
return this.$nextTick();
case 5:
case 6:
hst = target.scrollHeight;
this.$emit("reach-top",
/*#__PURE__*/
@@ -6950,7 +7042,7 @@ var editor_component = normalizeComponent(
};
}());
case 7:
case 8:
case "end":
return _context2.stop();
}
@@ -7040,6 +7132,7 @@ var messages_component = normalizeComponent(
}
},
props: {
contextmenu: Array,
message: {
type: Object,
default: function _default() {
@@ -7105,6 +7198,13 @@ var messages_component = normalizeComponent(
}, [this.timeFormat(sendTime)])]), h("div", {
"class": "lemon-message__content-flex"
}, [h("div", {
"directives": [{
name: "dropdown",
value: this.IMUI.contextmenu,
modifiers: {
"message": true
}
}],
"class": "lemon-message__content",
"on": {
"click": function click(e) {
@@ -7131,7 +7231,7 @@ var messages_component = normalizeComponent(
color: "#ff2525",
cursor: "pointer"
}
}), this._renderStatue(status)])])])]);
})])])])]);
},
created: function created() {},
mounted: function mounted() {},
@@ -7140,22 +7240,6 @@ var messages_component = normalizeComponent(
methods: {
_emitClick: function _emitClick(e, key) {
this.IMUI.$emit("message-click", e, key, this.message, this.IMUI);
},
_renderStatue: function _renderStatue(status) {// if (status == "going") {
// return <i class="lemon-icon-loading lemonani-spin" />;
// } else if (status == "failed") {
// return (
// <i
// class="lemon-icon-prompt"
// title="重发消息"
// style={{
// color: "#ff2525",
// cursor: "pointer"
// }}
// />
// );
// }
// return;
}
}
});
@@ -7617,6 +7701,7 @@ function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1
var allMessages = {};
var emojiMap = {};
@@ -7682,6 +7767,8 @@ var renderDrawerContent = function renderDrawerContent() {};
hideMessageTime: Boolean,
sendKey: Function,
sendText: String,
contextmenu: Array,
contactContextmenu: Array,
user: {
type: Object,
default: function _default() {
@@ -7790,7 +7877,8 @@ var renderDrawerContent = function renderDrawerContent() {};
var scrollToBottom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (allMessages[message.toContactId] === undefined) {
this.updateContact(message.toContactId, {
this.updateContact({
id: message.toContactId,
unread: "+1",
lastSendTime: message.sendTime,
lastContent: this.lastContentRender(message)
@@ -7799,6 +7887,7 @@ var renderDrawerContent = function renderDrawerContent() {};
this._addMessage(message, message.toContactId, 1);
var updateContact = {
id: message.toContactId,
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
};
@@ -7811,7 +7900,7 @@ var renderDrawerContent = function renderDrawerContent() {};
updateContact.unread = '+1';
}
this.updateContact(message.toContactId, updateContact);
this.updateContact(updateContact);
}
},
_emitSend: function _emitSend(message, next, file) {
@@ -7836,7 +7925,8 @@ var renderDrawerContent = function renderDrawerContent() {};
this.appendMessage(message, true);
this._emitSend(message, function () {
_this4.updateContact(message.toContactId, {
_this4.updateContact({
id: message.toContactId,
lastContent: _this4.lastContentRender(message),
lastSendTime: message.sendTime
});
@@ -7867,7 +7957,8 @@ var renderDrawerContent = function renderDrawerContent() {};
this.appendMessage(message, true);
this._emitSend(message, function () {
_this5.updateContact(message.toContactId, {
_this5.updateContact({
id: message.toContactId,
lastContent: _this5.lastContentRender(message),
lastSendTime: message.sendTime
});
@@ -8012,7 +8103,14 @@ var renderDrawerContent = function renderDrawerContent() {};
return h("lemon-contact", helper_default()([{
"class": {
"lemon-contact--active": this.currentContactId == props.contact.id
}
},
"directives": [{
name: "dropdown",
value: this.contactContextmenu,
modifiers: {
"contact": true
}
}]
}, {
"props": props
}, {
@@ -8051,7 +8149,10 @@ var renderDrawerContent = function renderDrawerContent() {};
"directives": [{
name: "show",
value: this.activeSidebar == name
}]
}],
"on": {
"scroll": this._handleSidebarScroll
}
}, [children]);
},
_renderDrawer: function _renderDrawer() {
@@ -8151,12 +8252,22 @@ var renderDrawerContent = function renderDrawerContent() {};
}), h("h4", [curact.displayName]), h("lemon-button", {
"on": {
"click": function click() {
if (isEmpty(curact.lastContent)) {
_this12.updateContact({
id: curact.id,
lastContent: ' '
});
}
_this12.changeContact(curact.id, DEFAULT_MENU_LASTMESSAGES);
}
}
}, ["\u53D1\u9001\u6D88\u606F"])]), curact)]));
return nodes;
},
_handleSidebarScroll: function _handleSidebarScroll() {
dropdown.hide();
},
_addContact: function _addContact(data, t) {
var type = {
0: "unshift",
@@ -8252,16 +8363,25 @@ var renderDrawerContent = function renderDrawerContent() {};
case 6:
this.currentContactId = contactId;
if (this.currentContactId) {
_context2.next = 9;
break;
}
return _context2.abrupt("return", false);
case 9:
this.$emit("change-contact", this.currentContact, this);
if (!isFunction(this.currentContact.renderContainer)) {
_context2.next = 10;
_context2.next = 12;
break;
}
return _context2.abrupt("return");
case 10:
case 12:
if (this.CacheMessageLoaded.has(contactId)) {
this.$refs.messages.loaded();
} else {
@@ -8282,7 +8402,7 @@ var renderDrawerContent = function renderDrawerContent() {};
}, 0);
}
case 12:
case 14:
case "end":
return _context2.stop();
}
@@ -8320,10 +8440,11 @@ var renderDrawerContent = function renderDrawerContent() {};
*/
updateMessage: function updateMessage(message) {
if (!message.id) return false;
delete message.toContactId;
var historyMessage = this.findMessage(message.id);
if (!historyMessage) return false;
historyMessage = Object.assign(historyMessage, message);
historyMessage = Object.assign(historyMessage, message, {
toContactId: historyMessage.toContactId
});
return true;
},
@@ -8495,11 +8616,11 @@ var renderDrawerContent = function renderDrawerContent() {};
/**
* 修改联系人数据
* @param {Contact} data 修改的数据，根据 data.id 查找联系人并覆盖传入的值
* @param {Contact} data 修改的数据，根据 Contact.id 查找联系人并覆盖传入的值
*/
updateContact: function updateContact(contactId, data) {
updateContact: function updateContact(data) {
var contactId = data.id;
delete data.id;
delete data.toContactId;
var index = this.findContactIndexById(contactId);
if (index !== -1) {
@@ -8543,6 +8664,12 @@ var renderDrawerContent = function renderDrawerContent() {};
if (message) return message;
}
},
findContact: function findContact(contactId) {
return this.getContacts().find(function (_ref4) {
var id = _ref4.id;
return id == contactId;
});
},
/**
* 返回所有联系人
@@ -8558,6 +8685,12 @@ var renderDrawerContent = function renderDrawerContent() {};
getCurrentMessages: function getCurrentMessages() {
return this.currentMessages;
},
setEditorValue: function setEditorValue(val) {
this.$refs.editor.setValue(this.replaceEmojiName(val));
},
getEditorValue: function getEditorValue() {
return this.$refs.editor.getFormatValue();
},
/**
* 返回所有消息
@@ -8608,6 +8741,10 @@ var components_component = normalizeComponent(
// EXTERNAL MODULE: ./packages/styles/common/index.styl
var common = __webpack_require__("6a2b");
// CONCATENATED MODULE: ./packages/directives/index.js
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dropdown);
// CONCATENATED MODULE: ./packages/index.js
@@ -8626,7 +8763,8 @@ var common = __webpack_require__("6a2b");
var version = "0.1";
var version = "1.4.2";
var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, popover, tabs, basic, message_text, message_image, file, message_event];
var install = function install(Vue) {
dist/index.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;padding:0 15px;font-size:14px;border-radius:4px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);color:rgba(0,0,0,.65);background-color:#fff;-webkit-box-shadow:0 2px 0 rgba(0,0,0,.015);box-shadow:0 2px 0 rgba(0,0,0,.015);text-shadow:0 -1px 0 rgba(0,0,0,.12)}.lemon-button:hover:not([disabled]){border-color:#666;color:#333}.lemon-button:active{background-color:#ddd}.lemon-button[disabled]{cursor:not-allowed;color:#aaa;background:#eee}.lemon-badge{position:relative;display:inline-block}.lemon-badge__label{border-radius:10px;background:#f5222d;color:#fff;text-align:center;font-size:12px;font-weight:400;white-space:nowrap;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;z-index:10;position:absolute;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transform-origin:100%;transform-origin:100%;display:inline-block;padding:0 4px;height:18px;line-height:17px;min-width:10px;top:-4px;right:6px}.lemon-badge__label--dot{width:10px;height:10px;min-width:auto;padding:0;top:-3px;right:2px}.lemon-avatar{font-variant:tabular-nums;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;display:inline-block;text-align:center;background:#ccc;color:hsla(0,0%,100%,.7);white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;border-radius:4px}.lemon-avatar img{width:100%;height:100%;display:block}.lemon-contact{padding:10px 14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;background:#efefef;text-align:left}.lemon-contact p{margin:0}.lemon-contact--active{background:#bebdbd}.lemon-contact:hover:not(.lemon-contact--active){background:#e3e3e3}.lemon-contact:hover:not(.lemon-contact--active) .el-badge__content{border-color:#ddd}.lemon-contact__avatar{float:left;margin-right:10px}.lemon-contact__avatar img{display:block}.lemon-contact__avatar .ant-badge-count{display:inline-block;padding:0 4px;height:18px;line-height:18px;min-width:18px;top:-4px;right:7px}.lemon-contact__label{display:-webkit-box;display:-ms-flexbox;display:flex}.lemon-contact__time{font-size:12px;line-height:18px;padding-left:6px;color:#999;white-space:nowrap}.lemon-contact__name{display:block;width:100%}.lemon-contact__content,.lemon-contact__name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.lemon-contact__content{font-size:12px;color:#999;padding-top:3px;height:14px;line-height:14px}.lemon-contact__content img{height:14px;display:inline-block;vertical-align:top;margin:0 1px}.lemon-contact--name-center .lemon-contact__label{padding-bottom:0;line-height:38px}.lemon-editor{height:200px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.lemon-editor,.lemon-editor__tool{display:-webkit-box;display:-ms-flexbox;display:flex}.lemon-editor__tool{height:40px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0 5px}.lemon-editor__tooLine truncated
.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.08);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.lemon-slide-top-enter-active,.lemon-slide-top-leave-active{-webkit-transition:all .2s cubic-bezier(.645,.045,.355,1);transition:all .2s cubic-bezier(.645,.045,.355,1)}.lemon-slide-top-enter,.lemon-slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;padding:0 15px;font-size:14px;border-radius:4px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);color:rgba(0,0,0,.65);background-color:#fff;-webkit-box-shadow:0 2px 0 rgba(0,0,0,.015);box-shadow:0 2px 0 rgba(0,0,0,.015);text-shadow:0 -1px 0 rgba(0,0,0,.12)}.lemon-button:hover:not([disabled]){border-color:#666;color:#333}.lemon-button:active{background-color:#ddd}.lemon-button[disabled]{cursor:not-allowed;color:#aaa;background:#eee}.lemon-badge{position:relative;display:inline-block}.lemon-badge__label{border-radius:10px;background:#f5222d;color:#fff;text-align:center;font-size:12px;font-weight:400;white-space:nowrap;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;z-index:10;position:absolute;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transform-origin:100%;transform-origin:100%;display:inline-block;padding:0 4px;height:18px;line-height:17px;min-width:10px;top:-4px;right:6px}.lemon-badge__label--dot{width:10px;height:10px;min-width:auto;padding:0;top:-3px;right:2px}.lemon-avatar{font-variant:tabular-nums;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;display:inline-block;text-align:center;background:#ccc;color:hsla(0,0%,100%,.7);white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;border-radius:4px}.lemon-avatar img{width:100%;height:100%;display:block}.lemon-contact{padding:10px 14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;background:#efefef;text-align:left}.lemon-contact p{margin:0}.lemon-contact--active{background:#bebdbd}.lemon-contact:hover:not(.lemon-contact--active){background:#e3e3e3}.lemon-contact:hover:not(.lemon-contact--active) .el-badge__content{border-color:#ddd}.lemon-contact__avatar{float:left;margin-right:10px}.lemon-contact__avatar img{display:block}.lemon-contact__avatar .ant-badge-count{display:inline-block;padding:0 4px;height:18px;line-height:18px;min-width:18px;top:-4px;right:7px}.lemon-contact__label{display:-webkit-box;display:-ms-flexbox;display:flex}.lemon-contact__time{font-size:12px;line-height:18px;padding-left:6px;color:#999;white-space:nowrap}.lemon-contact__name{display:block;width:100%}.lemon-contact__content,.lemon-contact__name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.lemon-contact__content{font-size:12px;color:#999;padding-top:3px;height:14px;line-height:14px}.lemon-contact__content img{height:14px;display:inline-block;vertical-align:top;margin:0 1px}.lemon-contact--name-center .lemon-contact__label{padding-bottom:0;line-height:38px}.lemon-editor{height:200px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.lemon-editor,.lemon-editor__tool{display:-webkit-box;display:-ms-flexbox;display:flex}.lemon-editor__tool{height:40px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:Line truncated
dist/index.umd.js
Vendored
+199 -61
View File
@@ -1,13 +1,13 @@
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["index"] = factory();
exports["index"] = factory(require("vue"));
else
root["index"] = factory();
})((typeof self !== 'undefined' ? self : this), function() {
root["index"] = factory(root["Vue"]);
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__8bbf__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@@ -3196,6 +3196,13 @@ module.exports = {
};
/***/ }),
/***/ "8bbf":
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
/***/ }),
/***/ "8e60":
@@ -5575,7 +5582,7 @@ var tabs_render, staticRenderFns
/* normalize component */
var component = normalizeComponent(
var tabs_component = normalizeComponent(
components_tabsvue_type_script_lang_js_,
tabs_render,
staticRenderFns,
@@ -5586,7 +5593,7 @@ var component = normalizeComponent(
)
/* harmony default export */ var tabs = (component.exports);
/* harmony default export */ var tabs = (tabs_component.exports);
// EXTERNAL MODULE: ./node_modules/regenerator-runtime/runtime.js
var runtime = __webpack_require__("96cf");
@@ -5721,7 +5728,7 @@ var triggerEvents = {
"style": "position:relative"
}, [h("transition", {
"attrs": {
"name": "slide-top"
"name": "lemon-slide-top"
}
}, [this.visible && h("div", {
"class": "lemon-popover",
@@ -6193,6 +6200,10 @@ function arrayIntersect(a, b) {
function clearHtml(str) {
return str.replace(/<.*?>/ig, "");
} //清除字符串内的所有HTML标签，除了IMG
function clearHtmlExcludeImg(str) {
return str.replace(/<(?!img).*?>/ig, "");
}
function error(text) {
throw new Error(text);
@@ -6258,6 +6269,14 @@ function generateUUID() {
/* harmony default export */ var contactvue_type_script_lang_js_ = ({
name: "LemonContact",
components: {},
inject: {
IMUI: {
from: 'IMUI',
default: function _default() {
return this;
}
}
},
data: function data() {
return {};
},
@@ -6292,24 +6311,16 @@ function generateUUID() {
watch: {},
methods: {
_renderInner: function _renderInner() {
var _this2 = this;
var h = this.$createElement;
var contact = this.contact;
return [h("lemon-badge", {
"attrs": {
"count": !this.simple ? contact.unread : 0,
"native-on-click": function nativeOnClick(e) {
return _this2._handleBubbleClick(e, contact);
}
"count": !this.simple ? contact.unread : 0
},
"class": "lemon-contact__avatar"
}, [h("lemon-avatar", {
"attrs": {
"size": 40,
"native-on-click": function nativeOnClick(e) {
return _this2._handleAvatarClick(e, contact);
},
"src": contact.avatar
}
})]), h("div", {
@@ -6330,14 +6341,6 @@ function generateUUID() {
},
_handleClick: function _handleClick(e, data) {
this.$emit("click", data);
},
_handleAvatarClick: function _handleAvatarClick(e, data) {
e.stopPropagation();
this.$emit("avatar-click", data);
},
_handleBubbleClick: function _handleBubbleClick(e, data) {
e.stopPropagation();
this.$emit("bubble-click", data);
}
}
});
@@ -6671,6 +6674,8 @@ var isInitTool = false;
exec("<img emoji-name=\"".concat(item.name, "\" src=\"").concat(item.src, "\"></img>"));
this._checkSubmitDisabled();
this._saveLastRange();
},
selectFile: function () {
@@ -6733,7 +6738,7 @@ var isInitTool = false;
return toEmojiName(this.$refs.textarea.innerHTML);
},
_checkSubmitDisabled: function _checkSubmitDisabled() {
this.submitDisabled = !this.$refs.textarea.innerText.trim();
this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
},
_handleSend: function _handleSend(e) {
var text = this.getFormatValue();
@@ -6757,6 +6762,11 @@ var isInitTool = false;
initEmoji: function initEmoji(data) {
emojiData = data;
this.$forceUpdate();
},
setValue: function setValue(val) {
this.$refs.textarea.innerHTML = val;
this._checkSubmitDisabled();
}
}
});
@@ -6786,6 +6796,86 @@ var editor_component = normalizeComponent(
)
/* harmony default export */ var editor = (editor_component.exports);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// CONCATENATED MODULE: ./packages/directives/dropdown.js
var dropdown_popover;
var hidePopover = function hidePopover() {
if (dropdown_popover) dropdown_popover.style.display = 'none';
};
var showPopover = function showPopover() {
if (dropdown_popover) dropdown_popover.style.display = 'block';
};
document.addEventListener('click', function (e) {
hidePopover();
});
/* harmony default export */ var dropdown = ({
hide: hidePopover,
bind: function bind(el, binding, vnode) {
el.addEventListener('contextmenu', function (e) {
if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
var component;
var visibleItems = [];
if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
if (!dropdown_popover) {
dropdown_popover = document.createElement('div');
dropdown_popover.className = 'lemon-dropdown';
document.body.appendChild(dropdown_popover);
}
dropdown_popover.innerHTML = binding.value.map(function (item) {
var visible;
if (isFunction(item.visible)) {
visible = item.visible(component);
} else {
visible = item.visible === undefined ? true : item.visible;
}
if (visible) {
visibleItems.push(item);
var icon = item.icon ? "<i class=\"lemon-dropdown__icon ".concat(item.icon, "\"></i>") : '';
return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-dropdown__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
}
return '';
}).join("");
dropdown_popover.style.top = "".concat(e.pageY, "px");
dropdown_popover.style.left = "".concat(e.pageX, "px");
dropdown_popover.childNodes.forEach(function (node, index) {
var _visibleItems$index = visibleItems[index],
click = _visibleItems$index.click,
_render = _visibleItems$index.render;
node.addEventListener('click', function (e) {
e.stopPropagation();
if (isFunction(click)) click(e, component, hidePopover);
});
if (isFunction(_render)) {
var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
render: function render(h) {
return _render(h, component, hidePopover);
}
});
var renderComponent = new ins().$mount();
node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
}
});
showPopover();
});
},
inserted: function inserted(el, binding, vnode) {}
});
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/messages.vue?vue&type=script&lang=js&
@@ -6793,6 +6883,7 @@ var editor_component = normalizeComponent(
/* harmony default export */ var messagesvue_type_script_lang_js_ = ({
name: "LemonMessages",
components: {},
@@ -6916,17 +7007,18 @@ var editor_component = normalizeComponent(
switch (_context2.prev = _context2.next) {
case 0:
target = e.target;
dropdown.hide();
if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
_context2.next = 7;
_context2.next = 8;
break;
}
this._loading = true;
_context2.next = 5;
_context2.next = 6;
return this.$nextTick();
case 5:
case 6:
hst = target.scrollHeight;
this.$emit("reach-top",
/*#__PURE__*/
@@ -6959,7 +7051,7 @@ var editor_component = normalizeComponent(
};
}());
case 7:
case 8:
case "end":
return _context2.stop();
}
@@ -7049,6 +7141,7 @@ var messages_component = normalizeComponent(
}
},
props: {
contextmenu: Array,
message: {
type: Object,
default: function _default() {
@@ -7114,6 +7207,13 @@ var messages_component = normalizeComponent(
}, [this.timeFormat(sendTime)])]), h("div", {
"class": "lemon-message__content-flex"
}, [h("div", {
"directives": [{
name: "dropdown",
value: this.IMUI.contextmenu,
modifiers: {
"message": true
}
}],
"class": "lemon-message__content",
"on": {
"click": function click(e) {
@@ -7140,7 +7240,7 @@ var messages_component = normalizeComponent(
color: "#ff2525",
cursor: "pointer"
}
}), this._renderStatue(status)])])])]);
})])])])]);
},
created: function created() {},
mounted: function mounted() {},
@@ -7149,22 +7249,6 @@ var messages_component = normalizeComponent(
methods: {
_emitClick: function _emitClick(e, key) {
this.IMUI.$emit("message-click", e, key, this.message, this.IMUI);
},
_renderStatue: function _renderStatue(status) {// if (status == "going") {
// return <i class="lemon-icon-loading lemonani-spin" />;
// } else if (status == "failed") {
// return (
// <i
// class="lemon-icon-prompt"
// title="重发消息"
// style={{
// color: "#ff2525",
// cursor: "pointer"
// }}
// />
// );
// }
// return;
}
}
});
@@ -7626,6 +7710,7 @@ function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1
var allMessages = {};
var emojiMap = {};
@@ -7691,6 +7776,8 @@ var renderDrawerContent = function renderDrawerContent() {};
hideMessageTime: Boolean,
sendKey: Function,
sendText: String,
contextmenu: Array,
contactContextmenu: Array,
user: {
type: Object,
default: function _default() {
@@ -7799,7 +7886,8 @@ var renderDrawerContent = function renderDrawerContent() {};
var scrollToBottom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (allMessages[message.toContactId] === undefined) {
this.updateContact(message.toContactId, {
this.updateContact({
id: message.toContactId,
unread: "+1",
lastSendTime: message.sendTime,
lastContent: this.lastContentRender(message)
@@ -7808,6 +7896,7 @@ var renderDrawerContent = function renderDrawerContent() {};
this._addMessage(message, message.toContactId, 1);
var updateContact = {
id: message.toContactId,
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
};
@@ -7820,7 +7909,7 @@ var renderDrawerContent = function renderDrawerContent() {};
updateContact.unread = '+1';
}
this.updateContact(message.toContactId, updateContact);
this.updateContact(updateContact);
}
},
_emitSend: function _emitSend(message, next, file) {
@@ -7845,7 +7934,8 @@ var renderDrawerContent = function renderDrawerContent() {};
this.appendMessage(message, true);
this._emitSend(message, function () {
_this4.updateContact(message.toContactId, {
_this4.updateContact({
id: message.toContactId,
lastContent: _this4.lastContentRender(message),
lastSendTime: message.sendTime
});
@@ -7876,7 +7966,8 @@ var renderDrawerContent = function renderDrawerContent() {};
this.appendMessage(message, true);
this._emitSend(message, function () {
_this5.updateContact(message.toContactId, {
_this5.updateContact({
id: message.toContactId,
lastContent: _this5.lastContentRender(message),
lastSendTime: message.sendTime
});
@@ -8021,7 +8112,14 @@ var renderDrawerContent = function renderDrawerContent() {};
return h("lemon-contact", helper_default()([{
"class": {
"lemon-contact--active": this.currentContactId == props.contact.id
}
},
"directives": [{
name: "dropdown",
value: this.contactContextmenu,
modifiers: {
"contact": true
}
}]
}, {
"props": props
}, {
@@ -8060,7 +8158,10 @@ var renderDrawerContent = function renderDrawerContent() {};
"directives": [{
name: "show",
value: this.activeSidebar == name
}]
}],
"on": {
"scroll": this._handleSidebarScroll
}
}, [children]);
},
_renderDrawer: function _renderDrawer() {
@@ -8160,12 +8261,22 @@ var renderDrawerContent = function renderDrawerContent() {};
}), h("h4", [curact.displayName]), h("lemon-button", {
"on": {
"click": function click() {
if (isEmpty(curact.lastContent)) {
_this12.updateContact({
id: curact.id,
lastContent: ' '
});
}
_this12.changeContact(curact.id, DEFAULT_MENU_LASTMESSAGES);
}
}
}, ["\u53D1\u9001\u6D88\u606F"])]), curact)]));
return nodes;
},
_handleSidebarScroll: function _handleSidebarScroll() {
dropdown.hide();
},
_addContact: function _addContact(data, t) {
var type = {
0: "unshift",
@@ -8261,16 +8372,25 @@ var renderDrawerContent = function renderDrawerContent() {};
case 6:
this.currentContactId = contactId;
if (this.currentContactId) {
_context2.next = 9;
break;
}
return _context2.abrupt("return", false);
case 9:
this.$emit("change-contact", this.currentContact, this);
if (!isFunction(this.currentContact.renderContainer)) {
_context2.next = 10;
_context2.next = 12;
break;
}
return _context2.abrupt("return");
case 10:
case 12:
if (this.CacheMessageLoaded.has(contactId)) {
this.$refs.messages.loaded();
} else {
@@ -8291,7 +8411,7 @@ var renderDrawerContent = function renderDrawerContent() {};
}, 0);
}
case 12:
case 14:
case "end":
return _context2.stop();
}
@@ -8329,10 +8449,11 @@ var renderDrawerContent = function renderDrawerContent() {};
*/
updateMessage: function updateMessage(message) {
if (!message.id) return false;
delete message.toContactId;
var historyMessage = this.findMessage(message.id);
if (!historyMessage) return false;
historyMessage = Object.assign(historyMessage, message);
historyMessage = Object.assign(historyMessage, message, {
toContactId: historyMessage.toContactId
});
return true;
},
@@ -8504,11 +8625,11 @@ var renderDrawerContent = function renderDrawerContent() {};
/**
* 修改联系人数据
* @param {Contact} data 修改的数据，根据 data.id 查找联系人并覆盖传入的值
* @param {Contact} data 修改的数据，根据 Contact.id 查找联系人并覆盖传入的值
*/
updateContact: function updateContact(contactId, data) {
updateContact: function updateContact(data) {
var contactId = data.id;
delete data.id;
delete data.toContactId;
var index = this.findContactIndexById(contactId);
if (index !== -1) {
@@ -8552,6 +8673,12 @@ var renderDrawerContent = function renderDrawerContent() {};
if (message) return message;
}
},
findContact: function findContact(contactId) {
return this.getContacts().find(function (_ref4) {
var id = _ref4.id;
return id == contactId;
});
},
/**
* 返回所有联系人
@@ -8567,6 +8694,12 @@ var renderDrawerContent = function renderDrawerContent() {};
getCurrentMessages: function getCurrentMessages() {
return this.currentMessages;
},
setEditorValue: function setEditorValue(val) {
this.$refs.editor.setValue(this.replaceEmojiName(val));
},
getEditorValue: function getEditorValue() {
return this.$refs.editor.getFormatValue();
},
/**
* 返回所有消息
@@ -8617,6 +8750,10 @@ var components_component = normalizeComponent(
// EXTERNAL MODULE: ./packages/styles/common/index.styl
var common = __webpack_require__("6a2b");
// CONCATENATED MODULE: ./packages/directives/index.js
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dropdown);
// CONCATENATED MODULE: ./packages/index.js
@@ -8635,7 +8772,8 @@ var common = __webpack_require__("6a2b");
var version = "0.1";
var version = "1.4.2";
var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, popover, tabs, basic, message_text, message_image, file, message_event];
var install = function install(Vue) {
dist/index.umd.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["index"]=e():t["index"]=e()})("undefined"!==typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"01f9":function(t,e,n){"use strict";var r=n("2d00"),i=n("5ca1"),o=n("2aba"),c=n("32e9"),a=n("84f2"),s=n("41a0"),u=n("7f20"),f=n("38fd"),l=n("2b4c")("iterator"),d=!([].keys&&"next"in[].keys()),h="@@iterator",p="keys",v="values",m=function(){return this};t.exports=function(t,e,n,g,y,b,x){s(n,e,g);var _,w,S,O=function(t){if(!d&&t in E)return E[t];switch(t){case p:return function(){return new n(this,t)};case v:return function(){return new n(this,t)}}return function(){return new n(this,t)}},C=e+" Iterator",j=y==v,k=!1,E=t.prototype,T=E[l]||E[h]||y&&E[y],M=T||O(y),I=y?j?O("entries"):M:void 0,P="Array"==e&&E.entries||T;if(P&&(S=f(P.call(new t)),S!==Object.prototype&&S.next&&(u(S,C,!0),r||"function"==typeof S[l]||c(S,l,m))),j&&T&&T.name!==v&&(k=!0,M=function(){return T.call(this)}),r&&!x||!d&&!k&&E[l]||c(E,l,M),a[e]=M,a[C]=m,y)if(_={values:j?M:O(v),keys:b?M:O(p),entries:I},x)for(w in _)w in E||o(E,w,_[w]);else i(i.P+i.F*(d||k),e,_);return _}},"02f4":function(t,e,n){var r=n("4588"),i=n("be13");t.exports=function(t){return function(e,n){var o,c,a=String(i(e)),s=r(n),u=a.length;return s<0||s>=u?t?"":void 0:(o=a.charCodeAt(s),o<55296||o>56319||s+1===u||(c=a.charCodeAt(s+1))<56320||c>57343?t?a.charAt(s):o:t?a.slice(s,s+2):c-56320+(o-55296<<10)+65536)}}},"0390":function(t,e,n){"use strict";var r=n("02f4")(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},"04f4":function(t,e,n){"use strict";var r=n("26f7"),i=n.n(r);i.a},"07e3":function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},"0a49":function(t,e,n){var r=n("9b43"),i=n("626a"),o=n("4bf8"),c=n("9def"),a=n("cd1c");t.exports=function(t,e){var n=1==t,s=2==t,u=3==t,f=4==t,l=6==t,d=5==t||l,h=e||a;return function(e,a,p){for(var v,m,g=o(e),y=i(g),b=r(a,p,3),x=c(y.length),_=0,w=n?h(e,x):s?h(e,0):void 0;x>_;_++)if((d||_ in y)&&(v=y[_],m=b(v,_,g),t))if(n)w[_]=m;else if(m)switch(t){case 3:return!0;case 5:return v;case 6:return _;case 2:w.push(v)}else if(f)return!1;return l?-1:u||f?f:w}}},"0af2":function(t,e,n){},"0bfb":function(t,e,n){"use strict";var r=n("cb7c");t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},"0d58":function(t,e,n){var r=n("ce10"),i=n("e11e");t.exports=Object.keys||function(t){return r(t,i)}},"0e15":function(t,e,n){"use strict";var r=n("9768"),i=n.n(r);i.a},"0fc9":function(t,e,n){var r=n("3a38"),i=Math.max,o=Math.min;t.exports=function(t,e){return t=r(t),t<0?i(t+e,0):o(t,e)}},1021:function(t,e,n){},"107a":function(t,e,n){},1169:function(t,e,n){var r=n("2d95");t.exports=Array.isArray||function(t){return"Array"==r(t)}},1173:function(t,e){t.exports=function(t,e,n,r){if(!(t instanceof e)||void 0!==r&&r in t)throw TypeError(n+": incorrect invocation!");return t}},"11e9":function(t,e,n){var r=n("52a7"),i=n("4630"),o=n("6821"),c=n("6a99"),a=n("69a8"),s=n("c69a"),u=Object.getOwnPropertyDescriptor;e.f=n("9e1e")?u:function(t,e){if(t=o(t),e=c(e,!0),s)try{return u(t,e)}catch(n){}if(a(t,e))return i(!r.f.call(t,e),t[e])}},1495:function(t,e,n){var r=n("86cc"),i=n("cb7c"),o=n("0d58");t.exports=n("9e1e")?Object.defineProperties:function(t,e){i(t);var n,c=o(e),a=c.length,s=0;while(a>s)r.f(t,n=c[s++],e[n]);return t}},"15cf":function(t,e,n){},1654:function(t,e,n){"use strict";var r=n("71c1")(!0);n("30f1")(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},1663:function(t,e,n){"use strict";var r=n("e86c"),i=n.n(r);i.a},1691:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},"1af6":function(t,e,n){var r=n("63b6");r(r.S,"Array",{isArray:n("9003")})},"1bc3":function(t,eLine truncated
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["index"]=e(require("vue")):t["index"]=e(t["Vue"])})("undefined"!==typeof self?self:this,function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"01f9":function(t,e,n){"use strict";var r=n("2d00"),i=n("5ca1"),o=n("2aba"),c=n("32e9"),a=n("84f2"),s=n("41a0"),u=n("7f20"),f=n("38fd"),l=n("2b4c")("iterator"),d=!([].keys&&"next"in[].keys()),h="@@iterator",p="keys",v="values",m=function(){return this};t.exports=function(t,e,n,g,y,b,x){s(n,e,g);var _,w,S,O=function(t){if(!d&&t in M)return M[t];switch(t){case p:return function(){return new n(this,t)};case v:return function(){return new n(this,t)}}return function(){return new n(this,t)}},C=e+" Iterator",j=y==v,E=!1,M=t.prototype,k=M[l]||M[h]||y&&M[y],T=k||O(y),I=y?j?O("entries"):T:void 0,L="Array"==e&&M.entries||k;if(L&&(S=f(L.call(new t)),S!==Object.prototype&&S.next&&(u(S,C,!0),r||"function"==typeof S[l]||c(S,l,m))),j&&k&&k.name!==v&&(E=!0,T=function(){return k.call(this)}),r&&!x||!d&&!E&&M[l]||c(M,l,T),a[e]=T,a[C]=m,y)if(_={values:j?T:O(v),keys:b?T:O(p),entries:I},x)for(w in _)w in M||o(M,w,_[w]);else i(i.P+i.F*(d||E),e,_);return _}},"02f4":function(t,e,n){var r=n("4588"),i=n("be13");t.exports=function(t){return function(e,n){var o,c,a=String(i(e)),s=r(n),u=a.length;return s<0||s>=u?t?"":void 0:(o=a.charCodeAt(s),o<55296||o>56319||s+1===u||(c=a.charCodeAt(s+1))<56320||c>57343?t?a.charAt(s):o:t?a.slice(s,s+2):c-56320+(o-55296<<10)+65536)}}},"0390":function(t,e,n){"use strict";var r=n("02f4")(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},"04f4":function(t,e,n){"use strict";var r=n("26f7"),i=n.n(r);i.a},"07e3":function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},"0a49":function(t,e,n){var r=n("9b43"),i=n("626a"),o=n("4bf8"),c=n("9def"),a=n("cd1c");t.exports=function(t,e){var n=1==t,s=2==t,u=3==t,f=4==t,l=6==t,d=5==t||l,h=e||a;return function(e,a,p){for(var v,m,g=o(e),y=i(g),b=r(a,p,3),x=c(y.length),_=0,w=n?h(e,x):s?h(e,0):void 0;x>_;_++)if((d||_ in y)&&(v=y[_],m=b(v,_,g),t))if(n)w[_]=m;else if(m)switch(t){case 3:return!0;case 5:return v;case 6:return _;case 2:w.push(v)}else if(f)return!1;return l?-1:u||f?f:w}}},"0af2":function(t,e,n){},"0bfb":function(t,e,n){"use strict";var r=n("cb7c");t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},"0d58":function(t,e,n){var r=n("ce10"),i=n("e11e");t.exports=Object.keys||function(t){return r(t,i)}},"0e15":function(t,e,n){"use strict";var r=n("9768"),i=n.n(r);i.a},"0fc9":function(t,e,n){var r=n("3a38"),i=Math.max,o=Math.min;t.exports=function(t,e){return t=r(t),t<0?i(t+e,0):o(t,e)}},1021:function(t,e,n){},"107a":function(t,e,n){},1169:function(t,e,n){var r=n("2d95");t.exports=Array.isArray||function(t){return"Array"==r(t)}},1173:function(t,e){t.exports=function(t,e,n,r){if(!(t instanceof e)||void 0!==r&&r in t)throw TypeError(n+": incorrect invocation!");return t}},"11e9":function(t,e,n){var r=n("52a7"),i=n("4630"),o=n("6821"),c=n("6a99"),a=n("69a8"),s=n("c69a"),u=Object.getOwnPropertyDescriptor;e.f=n("9e1e")?u:function(t,e){if(t=o(t),e=c(e,!0),s)try{return u(t,e)}catch(n){}if(a(t,e))return i(!r.f.call(t,e),t[e])}},1495:function(t,e,n){var r=n("86cc"),i=n("cb7c"),o=n("0d58");t.exports=n("9e1e")?Object.defineProperties:function(t,e){i(t);var n,c=o(e),a=c.length,s=0;while(a>s)r.f(t,n=c[s++],e[n]);return t}},"15cf":function(t,e,n){},1654:function(t,e,n){"use strict";var r=n("71c1")(!0);n("30f1")(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},1663:function(t,e,n){"use strict";var r=n("e86c"),i=n.n(r);i.a},1691:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},"1af6":function(t,e,n){var r=n("63b6");r(r.S,"Array",{isALine truncated
examples/App.vue
+236 -5
View File
@@ -18,6 +18,8 @@
<lemon-imui
:user="user"
ref="IMUI"
:contextmenu="contextmenu"
:contact-contextmenu="contactContextmenu"
:theme="theme"
:hide-menu="hideMenu"
:hide-menu-avatar="hideMenuAvatar"
@@ -30,6 +32,12 @@
@menu-avatar-click="handleMenuAvatarClick"
@send="handleSend"
>
<template #cover>
<div class="cover">
<i class="lemon-icon-message"></i>
<p><b>自定义封面 Lemon</b> IMUI</p>
</div>
</template>
<template #message-title="contact">
<span>{{ contact.displayName }}</span>
<small class="more" @click="changeDrawer(contact,$refs.IMUI)">{{($refs.IMUI ? $refs.IMUI.drawerVisible : false) ? '关闭' : '打开'}}抽屉</small>
@@ -266,6 +274,58 @@
</tr>
</table>
<div class="title">右键菜单 ContextmenuItem</div>
<table class="table">
<tr class="table-head">
<th>名称</th>
<th>说明</th>
<th>类型</th>
<th>示例</th>
</tr>
<tr>
<td width="150">text</td>
<td width="350">显示文字</td>
<td width="150">String</td>
<td width="100">-</td>
<td></td>
</tr>
<tr>
<td width="150">color</td>
<td width="350">颜色</td>
<td width="150">String</td>
<td width="100">-</td>
<td></td>
</tr>
<tr>
<td width="150">icon</td>
<td width="350">图标 class</td>
<td width="150">String</td>
<td width="100">-</td>
<td></td>
</tr>
<tr>
<td width="150">click</td>
<td width="350">点击事件，调用hide方法隐藏右键菜单。</td>
<td width="150">Function(e,instance,hide)</td>
<td width="100">-</td>
<td></td>
</tr>
<tr>
<td width="150">visible</td>
<td width="350">是否显示的判断函数</td>
<td width="150">Function(instance)</td>
<td width="100">-</td>
<td></td>
</tr>
<tr>
<td width="150">render</td>
<td width="350">负责样式的渲染函数，使用render的时候text属性会失去作用，调用hide方法隐藏右键菜单。</td>
<td width="150">Function(e,instance,hide)</td>
<td width="100">-</td>
<td></td>
</tr>
</table>
<div class="title">组件属性</div>
<table class="table">
<tr class="table-head">
@@ -374,6 +434,20 @@
<td>false</td>
<td></td>
</tr>
<tr>
<td>contextmenu</td>
<td>聊天消息右键菜单配置</td>
<td>[ContextmenuItem]</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>contactContextmenu</td>
<td>联系人右键菜单配置</td>
<td>[ContextmenuItem]</td>
<td>-</td>
<td></td>
</tr>
</table>
<div class="title">组件方法</div>
@@ -592,6 +666,21 @@
<td>-</td>
<td></td>
</tr>
<tr>
<td>setEditorValue</td>
<td>设置编辑框内容</td>
<td>Function(string)</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>getEditorValue</td>
<td>获取编辑框内容</td>
<td>Function()=>string</td>
<td>-</td>
<td></td>
</tr>
</table>
<div class="title">组件插槽</div>
@@ -820,6 +909,7 @@ import LemonMessageVoice from './lemon-message-voice';
import packageData from '../package.json';
Vue.component(LemonMessageVoice.name,LemonMessageVoice);
const tip = `export default {
//组件的name必须以lemonMessage开头，后面跟上 Message.type
name: "lemonMessageVoice",
@@ -891,6 +981,102 @@ export default {
data() {
return {
theme:'default',
contactContextmenu:[{
text:'删除该聊天',
click:(e,instance,hide)=>{
const {IMUI,contact} = instance;
IMUI.updateContact({
id:contact.id,
lastContent:null,
});
if(IMUI.currentContactId == contact.id) IMUI.changeContact(null);
hide();
},
},{
text:'设置备注和标签',
},{
text:'投诉',
},{
icon:'lemon-icon-message',
render:(h,instance,hide)=>{
return <div style="display:flex;justify-content:space-between;align-items:center;width:130px">
<span>加入黑名单</span>
<span>
<input type="checkbox" id="switch" />
<label id="switch-label" for="switch">Toggle</label>
</span>
</div>;
},
},{
click(e,instance,hide){
const {IMUI,contact} = instance;
IMUI.removeContact(contact.id);
if(IMUI.currentContactId == contact.id) IMUI.changeContact(null);
hide();
},
color:'red',
text:'删除好友',
}],
contextmenu:[{
click:(e,instance,hide)=>{
const { IMUI,message } = instance;
const data = {
id:generateRandId(),
type:'event',
//使用 jsx 时 click必须使用箭头函数（使上下文停留在vue内）
content:<span>你撤回了一条消息 <span v-show={message.type == 'text'} style="color:#333;cursor:pointer" content={message.content} on-click={(e)=>{
IMUI.setEditorValue(e.target.getAttribute('content'));
}}>重新编辑</span></span>,
toContactId:message.toContactId,
sendTime:getTime(),
};
IMUI.removeMessage(message.id);
IMUI.appendMessage(data,true);
hide();
},
visible:(instance)=>{
return instance.message.fromUser.id == this.user.id;
},
text:'撤回消息',
},
{
visible:(instance)=>{
return instance.message.fromUser.id != this.user.id;
},
text:'举报',
},
{
text:'转发',
},
{
visible:(instance)=>{
return instance.message.type == 'text';
},
text:'复制文字',
},
{
visible:(instance)=>{
return instance.message.type == 'image';
},
text:'下载图片',
},
{
visible:(instance)=>{
return instance.message.type == 'file';
},
text:'下载文件',
},
{
click:(e,instance,hide)=>{
const { IMUI,message } = instance;
IMUI.removeMessage(message.id);
hide();
},
icon:'lemon-icon-folder',
color:'red',
text:'删除',
}],
tip:tip,
packageData,
hideMenuAvatar: false,
@@ -950,7 +1136,6 @@ export default {
};
const { IMUI } = this.$refs;
setTimeout(()=>{
console.log(IMUI.hasContact('cont1act-3'));
},2000);
@@ -962,7 +1147,7 @@ export default {
let contactList = [
{ ...contactData1 },
{ ...contactData2 },
{ ...contactData3 }
{ ...contactData3 },
//...Array(100).fill(contactData1)
];
@@ -1479,14 +1664,15 @@ export default {
const message = {
id:generateRandId(),
type:'event',
content:<span>邀请你加入群聊 <b style="color:#333;cursor:pointer" on-click={()=>alert('OK')}>接受</b></span>,
content:<span>邀请你加入群聊 <span style="color:#333;cursor:pointer" on-click={()=>alert('OK')}>接受</span></span>,
toContactId:'contact-3',
sendTime:getTime(),
};
IMUI.appendMessage(message,true);
},
updateContact() {
this.$refs.IMUI.updateContact("contact-3", {
this.$refs.IMUI.updateContact({
id:"contact-3",
unread: 10,
displayName: generateRandWord(),
lastSendTime: getTime(),
@@ -1507,7 +1693,8 @@ export default {
},
handleChangeContact(contact,instance) {
console.log("Event:change-contact");
instance.updateContact(contact.id, {
instance.updateContact({
id:contact.id,
//displayName: "123",
unread: 0
});
@@ -1710,4 +1897,48 @@ pre
.lemon-simple .lemon-drawer{
z-index:4
}
input#switch[type=checkbox]{
height: 0;
width: 0;
display:none;
}
label#switch-label {
cursor: pointer;
text-indent: -9999px;
width: 34px;
height: 20px;
background: #aaa;
display: block;
border-radius: 100px;
position: relative;
}
label#switch-label:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 20px;
transition: 0.3s;
}
input#switch:checked + label {
background: #0fd547;
}
input#switch:checked + label:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
label#switch-label:active:after {
width: 20px;
}
</style>
examples/dist/css/index.8db04478.css
Vendored
-1
View File
@@ -1 +0,0 @@
.lemon-message.lemon-message-voice{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lemon-message.lemon-message-voice .lemon-message__content{border:2px solid #000;font-size:12px;cursor:pointer}.lemon-message.lemon-message-voice .lemon-message__content:before{display:none}::-moz-selection{background:#000;color:#fff}::selection{background:#000;color:#fff}body{font-family:Microsoft YaHei;background:#f6f6f6!important}#app{width:90%;margin:0 auto;padding-bottom:100px}#app .scroll-top{cursor:pointer;position:fixed;bottom:40px;left:50%;border-radius:50%;background:#fff;font-size:18px;overflow:hidden;width:40px;height:40px;line-height:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;-webkit-transform:rotate(-45deg) translateX(-50%);transform:rotate(-45deg) translateX(-50%);-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}#app .scroll-top:hover{font-size:22px}a{color:#0c5ed9;text-decoration:none;font-size:12px}.action{margin-top:20px}.action .lemon-button{margin-right:10px;margin-bottom:10px}.link{font-size:14px;margin-top:15px}.link a{margin:0 5px;text-decoration:none;background:#ffba00;border-radius:4px;padding:5px 10px;color:rgba(0,0,0,.8)}.link a,.logo{display:inline-block}.logo{position:relative;margin:60px auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.logo-text{font-size:38px}.logo-sub{font-size:18px;color:#999;font-weight:300}.logo-badge{position:absolute;top:-10px;left:230px;background:#000;border-radius:16px;color:#f9f9f9;font-size:12px;padding:4px 8px}.title{font-size:24px;line-height:26px;border-left:1px solid #ffba00;padding-left:15px;margin-bottom:15px;margin-top:30px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.table{width:100%;border-radius:10px;background:#fff;border-collapse:collapse}.table tr{cursor:pointer}.table tr:not(.table-head):hover{background:#ffba00!important}.table tr:nth-of-type(2n){background:#f9f9f9}.table th{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.table td,.table th{text-align:left;padding:10px 15px;font-size:14px;font-weight:400}.imui-center{margin-bottom:60px}.imui-center .lemon-wrapper,.imui-center .lemon-wrapper--drawer-show .lemon-drawer{-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}.drawer-content{padding:15px}.more{font-size:12px;line-height:24px;height:24px;position:absolute;top:14px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#f1f1f1;display:inline-block;border-radius:4px;background:#111;padding:0 8px}.more:active{background:#999}.bar{line-height:30px;background:#fff;margin:15px;color:#666;font-size:12px}.bar,.cover{text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cover{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cover i{font-size:84px;color:#e6e6e6}.cover p{font-size:18px;color:#ddd;line-height:50px}.article-item{line-height:34px;cursor:pointer}.article-item:hover{text-decoration:underline;color:#318efd}pre{background:#fff;border-radius:8px;padding:15px}.lemon-simple .lemon-container{z-index:5}.lemon-simple .lemon-drawer{z-index:4}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touLine truncated
examples/dist/css/index.fed1a091.css
Vendored
+1
View File
@@ -0,0 +1 @@
.lemon-message.lemon-message-voice{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lemon-message.lemon-message-voice .lemon-message__content{border:2px solid #000;font-size:12px;cursor:pointer}.lemon-message.lemon-message-voice .lemon-message__content:before{display:none}::-moz-selection{background:#000;color:#fff}::selection{background:#000;color:#fff}body{font-family:Microsoft YaHei;background:#f6f6f6!important}#app{width:90%;margin:0 auto;padding-bottom:100px}#app .scroll-top{cursor:pointer;position:fixed;bottom:40px;left:50%;border-radius:50%;background:#fff;font-size:18px;overflow:hidden;width:40px;height:40px;line-height:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;-webkit-transform:rotate(-45deg) translateX(-50%);transform:rotate(-45deg) translateX(-50%);-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}#app .scroll-top:hover{font-size:22px}a{color:#0c5ed9;text-decoration:none;font-size:12px}.action{margin-top:20px}.action .lemon-button{margin-right:10px;margin-bottom:10px}.link{font-size:14px;margin-top:15px}.link a{margin:0 5px;text-decoration:none;background:#ffba00;border-radius:4px;padding:5px 10px;color:rgba(0,0,0,.8)}.link a,.logo{display:inline-block}.logo{position:relative;margin:60px auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.logo-text{font-size:38px}.logo-sub{font-size:18px;color:#999;font-weight:300}.logo-badge{position:absolute;top:-10px;left:230px;background:#000;border-radius:16px;color:#f9f9f9;font-size:12px;padding:4px 8px}.title{font-size:24px;line-height:26px;border-left:1px solid #ffba00;padding-left:15px;margin-bottom:15px;margin-top:30px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.table{width:100%;border-radius:10px;background:#fff;border-collapse:collapse}.table tr{cursor:pointer}.table tr:not(.table-head):hover{background:#ffba00!important}.table tr:nth-of-type(2n){background:#f9f9f9}.table th{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.table td,.table th{text-align:left;padding:10px 15px;font-size:14px;font-weight:400}.imui-center{margin-bottom:60px}.imui-center .lemon-wrapper,.imui-center .lemon-wrapper--drawer-show .lemon-drawer{-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}.drawer-content{padding:15px}.more{font-size:12px;line-height:24px;height:24px;position:absolute;top:14px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#f1f1f1;display:inline-block;border-radius:4px;background:#111;padding:0 8px}.more:active{background:#999}.bar{line-height:30px;background:#fff;margin:15px;color:#666;font-size:12px}.bar,.cover{text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cover{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cover i{font-size:84px;color:#e6e6e6}.cover p{font-size:18px;color:#ddd;line-height:50px}.article-item{line-height:34px;cursor:pointer}.article-item:hover{text-decoration:underline;color:#318efd}pre{background:#fff;border-radius:8px;padding:15px}.lemon-simple .lemon-container{z-index:5}.lemon-simple .lemon-drawer{z-index:4}input#switch[type=checkbox]{height:0;width:0;display:none}label#switch-label{cursor:pointer;text-indent:-9999px;width:34px;height:20px;background:#aaa;display:block;border-radius:100px;position:relative}label#switch-label:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:20px;-webkit-transition:.3s;transition:.3s}input#switch:checked+label{background:#0fd547}input#switch:checked+label:after{left:calc(100% - 2px);-webkit-transform:translateX(-100%);transform:translateX(-100%)}label#switch-label:active:after{width:20px}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.08);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);positLine truncated
examples/dist/index.html
Vendored
+1 -1
View File
@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.8db04478.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.dfad42c7.js rel=preload as=script><link href=css/index.8db04478.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.dfad42c7.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.fed1a091.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.4318ecd4.js rel=preload as=script><link href=css/index.fed1a091.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.4318ecd4.js></script></body></html>
examples/dist/js/index.4318ecd4.js
Vendored
+1
View File
@@ -0,0 +1 @@
(function(t){function e(e){for(var i,r,o=e[0],c=e[1],d=e[2],u=0,m=[];u<o.length;u++)r=o[u],s[r]&&m.push(s[r][0]),s[r]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=c[i]);l&&l(e);while(m.length)m.shift()();return a.push.apply(a,d||[]),n()}function n(){for(var t,e=0;e<a.length;e++){for(var n=a[e],i=!0,o=1;o<n.length;o++){var c=n[o];0!==s[c]&&(i=!1)}i&&(a.splice(e--,1),t=r(r.s=n[0]))}return t}var i={},s={index:0},a=[];function r(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var d=0;d<o.length;d++)e(o[d]);var l=c;a.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("c31f")},"04f4":function(t,e,n){"use strict";var i=n("26f7"),s=n.n(i);s.a},"0af2":function(t,e,n){},"0e15":function(t,e,n){"use strict";var i=n("9768"),s=n.n(i);s.a},1021:function(t,e,n){},"107a":function(t,e,n){},"15cf":function(t,e,n){},1663:function(t,e,n){"use strict";var i=n("e86c"),s=n.n(i);s.a},"1e45":function(t,e,n){"use strict";var i=n("83d7"),s=n.n(i);s.a},"26f7":function(t,e,n){},3423:function(t,e,n){"use strict";var i=n("107a"),s=n.n(i);s.a},"428f":function(t,e,n){},"436f":function(t,e,n){"use strict";var i=n("0af2"),s=n.n(i);s.a},"476d":function(t,e,n){"use strict";var i=n("428f"),s=n.n(i);s.a},"49c2":function(t,e,n){"use strict";var i=n("acce"),s=n.n(i);s.a},"4d21":function(t,e,n){"use strict";var i=n("917b"),s=n.n(i);s.a},"6a2b":function(t,e,n){},"6da9":function(t,e,n){},7802:function(t,e,n){},"820e":function(t,e,n){},"83d7":function(t,e,n){},"909e":function(t,e,n){"use strict";var i=n("1021"),s=n.n(i);s.a},"917b":function(t,e,n){},9224:function(t){t.exports={name:"lemon-imui",version:"1.5.0",main:"dist/index.umd.min.js",description:"基于 VUE2.0 的 IM 聊天组件",homepage:"https://github.com/fanjyy/lemon-imui",repository:{type:"git",url:"git+https://github.com/fanjyy/lemon-imui.git"},scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build --target lib --name index packages/index.js","build-examples":"vue-cli-service build --dest examples/dist examples/main.js",lint:"vue-cli-service lint"},dependencies:{vue:"^2.6.10"},devDependencies:{"@vue/cli-plugin-babel":"^3.6.0","@vue/cli-plugin-eslint":"^3.6.0","@vue/cli-service":"^3.6.0","@vue/eslint-config-prettier":"^4.0.1","babel-eslint":"^10.0.2",eslint:"^5.16.0","eslint-plugin-vue":"^5.2.3",stylus:"^0.54.5","stylus-loader":"^3.0.2","vue-template-compiler":"^2.5.21"},author:"fanjun",license:"MIT"}},9768:function(t,e,n){},9800:function(t,e,n){},"9b01":function(t,e,n){"use strict";var i=n("6da9"),s=n.n(i);s.a},"9c9b":function(t,e,n){"use strict";var i=n("9800"),s=n.n(i);s.a},a215:function(t,e,n){},acce:function(t,e,n){},c31f:function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),s=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"scroll-top",on:{click:t.scrollToTop}},[t._v("🚀")]),n("div",{staticClass:"logo"},[n("div",{staticClass:"logo-text"},[n("b",[t._v("Lemon")]),t._v(" IMUI"),n("span",{staticClass:"logo-badge"},[t._v(t._s(this.packageData.version))])]),n("div",{staticClass:"logo-sub"},[t._v(t._s(this.packageData.description))]),t._m(0),n("br"),t._m(1),t._m(2)]),n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:t.user,contextmenu:t.contextmenu,"contact-contextmenu":t.contactContextmenu,theme:t.theme,"hide-menu":t.hideMenu,"hide-menu-avatar":t.hideMenuAvatar,"hide-message-name":t.hideMessageName,"hide-message-time":t.hideMessageTime},on:{"change-menu":t.handleChangeMenu,"change-contact":t.handleChangeContact,"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,"menu-avatar-click":t.handleMenuAvatarClick,send:t.handleSend},scopedSlots:t._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[t._v("自定义封面 Lemon")]),t._v(" IMUI")])])]},proxy:!0},{key:"message-title",fn:function(e){return[n("span",[t._v(t._s(e.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return t.changeDrawer(e,t.$refs.IMUI)}}},[tLine truncated
examples/dist/js/index.dfad42c7.js
Vendored
-1
View File
@@ -1 +0,0 @@
(function(t){function e(e){for(var s,r,o=e[0],c=e[1],d=e[2],u=0,m=[];u<o.length;u++)r=o[u],a[r]&&m.push(a[r][0]),a[r]=0;for(s in c)Object.prototype.hasOwnProperty.call(c,s)&&(t[s]=c[s]);l&&l(e);while(m.length)m.shift()();return i.push.apply(i,d||[]),n()}function n(){for(var t,e=0;e<i.length;e++){for(var n=i[e],s=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(s=!1)}s&&(i.splice(e--,1),t=r(r.s=n[0]))}return t}var s={},a={index:0},i=[];function r(e){if(s[e])return s[e].exports;var n=s[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=s,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)r.d(n,s,function(e){return t[e]}.bind(null,s));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var d=0;d<o.length;d++)e(o[d]);var l=c;i.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("c31f")},"04f4":function(t,e,n){"use strict";var s=n("26f7"),a=n.n(s);a.a},"0af2":function(t,e,n){},"0e15":function(t,e,n){"use strict";var s=n("9768"),a=n.n(s);a.a},1021:function(t,e,n){},"107a":function(t,e,n){},"15cf":function(t,e,n){},1663:function(t,e,n){"use strict";var s=n("e86c"),a=n.n(s);a.a},"1e45":function(t,e,n){"use strict";var s=n("83d7"),a=n.n(s);a.a},"26f7":function(t,e,n){},3423:function(t,e,n){"use strict";var s=n("107a"),a=n.n(s);a.a},"428f":function(t,e,n){},"436f":function(t,e,n){"use strict";var s=n("0af2"),a=n.n(s);a.a},"476d":function(t,e,n){"use strict";var s=n("428f"),a=n.n(s);a.a},"49c2":function(t,e,n){"use strict";var s=n("acce"),a=n.n(s);a.a},"4d21":function(t,e,n){"use strict";var s=n("917b"),a=n.n(s);a.a},"6a2b":function(t,e,n){},"6da9":function(t,e,n){},7802:function(t,e,n){},"820e":function(t,e,n){},"83d7":function(t,e,n){},"909e":function(t,e,n){"use strict";var s=n("1021"),a=n.n(s);a.a},"917b":function(t,e,n){},9224:function(t){t.exports={name:"lemon-imui",version:"1.4.2",main:"dist/index.umd.min.js",description:"基于 VUE2.0 的 IM 聊天组件",homepage:"https://github.com/fanjyy/lemon-imui",repository:{type:"git",url:"git+https://github.com/fanjyy/lemon-imui.git"},scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build --target lib --name index packages/index.js","build-examples":"vue-cli-service build --dest examples/dist examples/main.js",lint:"vue-cli-service lint"},dependencies:{vue:"^2.6.10"},devDependencies:{"@vue/cli-plugin-babel":"^3.6.0","@vue/cli-plugin-eslint":"^3.6.0","@vue/cli-service":"^3.6.0","@vue/eslint-config-prettier":"^4.0.1","babel-eslint":"^10.0.2",eslint:"^5.16.0","eslint-plugin-vue":"^5.2.3",stylus:"^0.54.5","stylus-loader":"^3.0.2","vue-template-compiler":"^2.5.21"},author:"fanjun",license:"MIT"}},9768:function(t,e,n){},9800:function(t,e,n){},"9b01":function(t,e,n){"use strict";var s=n("6da9"),a=n.n(s);a.a},"9c9b":function(t,e,n){"use strict";var s=n("9800"),a=n.n(s);a.a},a215:function(t,e,n){},acce:function(t,e,n){},c31f:function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var s=n("2b0e"),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"scroll-top",on:{click:t.scrollToTop}},[t._v("🚀")]),n("div",{staticClass:"logo"},[n("div",{staticClass:"logo-text"},[n("b",[t._v("Lemon")]),t._v(" IMUI"),n("span",{staticClass:"logo-badge"},[t._v(t._s(this.packageData.version))])]),n("div",{staticClass:"logo-sub"},[t._v(t._s(this.packageData.description))]),t._m(0),n("br"),t._m(1),t._m(2)]),n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:t.user,theme:t.theme,"hide-menu":t.hideMenu,"hide-menu-avatar":t.hideMenuAvatar,"hide-message-name":t.hideMessageName,"hide-message-time":t.hideMessageTime},on:{"change-menu":t.handleChangeMenu,"change-contact":t.handleChangeContact,"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,"menu-avatar-click":t.handleMenuAvatarClick,send:t.handleSend},scopedSlots:t._u([{key:"message-title",fn:function(e){return[n("span",[t._v(t._s(e.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return t.changeDrawer(e,t.$refs.IMUI)}}},[t._v(t._s(t.$refs.IMUI&&t.$refs.IMUI.drawerVisible?"关闭":"打开")+"抽屉")])]}}])}),n("a",{staticStyle:{"font-size":"14px"},attrs:{target:"_blank",href:"https://codesandbox.io/s/sweet-chaplygin-s24mb?fontsize=14&hidenavigation=1&theme=dark"}},[t._vLine truncated
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "lemon-imui",
"version": "1.4.2",
"version": "1.5.0",
"main": "dist/index.umd.min.js",
"description": "基于 VUE2.0 的 IM 聊天组件",
"homepage": "https://github.com/fanjyy/lemon-imui",
packages/components/contact.vue
+8 -10
View File
@@ -4,6 +4,14 @@ import { timeFormat,useScopedSlot } from "utils";
export default {
name: "LemonContact",
components: {},
inject: {
IMUI: {
from:'IMUI',
default (){
return this;
}
}
},
data() {
return {};
},
@@ -39,11 +47,9 @@ export default {
<lemon-badge
count={!this.simple ? contact.unread : 0}
class="lemon-contact__avatar"
native-on-click={e => this._handleBubbleClick(e, contact)}
>
<lemon-avatar
size={40}
native-on-click={e => this._handleAvatarClick(e, contact)}
src={contact.avatar}
/>
</lemon-badge>,
@@ -71,14 +77,6 @@ export default {
_handleClick(e, data) {
this.$emit("click", data);
},
_handleAvatarClick(e, data) {
e.stopPropagation();
this.$emit("avatar-click", data);
},
_handleBubbleClick(e, data) {
e.stopPropagation();
this.$emit("bubble-click", data);
}
}
};
</script>
packages/components/editor.vue
+8 -3
View File
@@ -1,5 +1,5 @@
<script>
import { toEmojiName,useScopedSlot,clearHtml } from "utils";
import { toEmojiName,useScopedSlot,clearHtmlExcludeImg } from "utils";
const exec = (val, command = "insertHTML") => {
document.execCommand(command, false, val);
};
@@ -212,6 +212,7 @@ export default {
_handleSelectEmoji(item) {
this._focusLastRange();
exec(`<img emoji-name="${item.name}" src="${item.src}"></img>`);
this._checkSubmitDisabled();
this._saveLastRange();
},
async selectFile(accept) {
@@ -248,7 +249,7 @@ export default {
return toEmojiName(this.$refs.textarea.innerHTML);
},
_checkSubmitDisabled() {
this.submitDisabled = !this.$refs.textarea.innerText.trim();
this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
},
_handleSend(e) {
const text = this.getFormatValue();
@@ -269,7 +270,11 @@ export default {
initEmoji(data) {
emojiData = data;
this.$forceUpdate();
}
},
setValue(val){
this.$refs.textarea.innerHTML = val;
this._checkSubmitDisabled();
},
}
};
</script>
packages/components/index.vue
+75 -10
View File
@@ -1,6 +1,7 @@
<script>
import { useScopedSlot, funCall, generateUUID,cloneDeep } from "utils";
import { isFunction, isString, isEmpty } from "utils/validate";
import dropdown from "../directives/dropdown";
import {
DEFAULT_MENUS,
DEFAULT_MENU_LASTMESSAGES,
@@ -68,6 +69,8 @@ export default {
hideMessageTime:Boolean,
sendKey:Function,
sendText:String,
contextmenu:Array,
contactContextmenu:Array,
user: {
type: Object,
default: () => {
@@ -153,7 +156,8 @@ export default {
*/
appendMessage(message,scrollToBottom = false) {
if(allMessages[message.toContactId] === undefined){
this.updateContact(message.toContactId, {
this.updateContact({
id:message.toContactId,
unread: "+1",
lastSendTime: message.sendTime,
lastContent: this.lastContentRender(message)
@@ -161,6 +165,7 @@ export default {
}else{
this._addMessage(message,message.toContactId, 1);
const updateContact = {
id:message.toContactId,
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
}
@@ -171,7 +176,7 @@ export default {
}else{
updateContact.unread = '+1';
}
this.updateContact(message.toContactId,updateContact);
this.updateContact(updateContact);
}
},
_emitSend(message, next, file) {
@@ -189,7 +194,8 @@ export default {
const message = this._createMessage({ content: text });
this.appendMessage(message,true);
this._emitSend(message, () => {
this.updateContact(message.toContactId, {
this.updateContact({
id:message.toContactId,
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
});
@@ -216,7 +222,8 @@ export default {
this._emitSend(
message,
() => {
this.updateContact(message.toContactId, {
this.updateContact({
id:message.toContactId,
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
});
@@ -356,6 +363,7 @@ export default {
class={{
"lemon-contact--active": this.currentContactId == props.contact.id
}}
v-dropdown_contact={this.contactContextmenu}
props={props}
on-click={click}
scopedSlots={{default:slot}}
@@ -394,7 +402,7 @@ export default {
},
_renderSidebar(children, name) {
return (
<div class="lemon-sidebar" v-show={this.activeSidebar == name}>
<div class="lemon-sidebar" v-show={this.activeSidebar == name} on-scroll={this._handleSidebarScroll}>
{children}
</div>
);
@@ -487,6 +495,12 @@ export default {
<h4>{curact.displayName}</h4>
<lemon-button
on-click={() => {
if(isEmpty(curact.lastContent)){
this.updateContact({
id:curact.id,
lastContent:' ',
});
}
this.changeContact(curact.id, DEFAULT_MENU_LASTMESSAGES);
}}
>
@@ -499,6 +513,9 @@ export default {
);
return nodes;
},
_handleSidebarScroll(){
dropdown.hide();
},
_addContact(data, t) {
const type = {
0: "unshift",
@@ -566,6 +583,7 @@ export default {
}
this.currentContactId = contactId;
if(!this.currentContactId) return false;
this.$emit("change-contact", this.currentContact,this);
if (isFunction(this.currentContact.renderContainer)) {
return;
@@ -606,12 +624,14 @@ export default {
*/
updateMessage(message) {
if(!message.id) return false;
delete message.toContactId;
let historyMessage = this.findMessage(message.id);
if(!historyMessage) return false;
historyMessage = Object.assign(
historyMessage,
message
message,
{
toContactId:historyMessage.toContactId
}
);
return true;
},
@@ -769,11 +789,11 @@ export default {
},
/**
* 修改联系人数据
* @param {Contact} data 修改的数据，根据 data.id 查找联系人并覆盖传入的值
* @param {Contact} data 修改的数据，根据 Contact.id 查找联系人并覆盖传入的值
*/
updateContact(contactId, data) {
updateContact(data) {
const contactId = data.id;
delete data.id;
delete data.toContactId;
const index = this.findContactIndexById(contactId);
if (index !== -1) {
@@ -812,6 +832,9 @@ export default {
if(message) return message;
}
},
findContact(contactId){
return this.getContacts().find(({id})=>id == contactId);
},
/**
* 返回所有联系人
* @return {Array<Contact>}
@@ -826,6 +849,12 @@ export default {
getCurrentMessages() {
return this.currentMessages;
},
setEditorValue(val){
this.$refs.editor.setValue(this.replaceEmojiName(val));
},
getEditorValue(){
return this.$refs.editor.getFormatValue();
},
/**
* 返回所有消息
* @return {Object<Contact.id,Message>}
@@ -985,4 +1014,40 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
.lemon-menu
.lemon-sidebar
display none
+b(lemon-dropdown)
border-radius 4px
font-size 14px
font-variant tabular-nums
line-height 1.5
color rgba(0, 0, 0, 0.65)
z-index 10
background-color #fff
border-radius 4px
box-shadow 0 2px 8px rgba(0, 0, 0, 0.06)
position absolute
transform-origin 50% 150%
box-sizing border-box
user-select none
overflow hidden
+e(item)
font-size 12px
line-height 14px
padding 8px 10px
cursor pointer
display flex
align-items center
color #444
> span
display inline-block
flex none
//max-width 100px
ellipsis()
&:hover
background #f3f3f3
color #000
&:active
background #e9e9e9
+e(icon)
font-size 16px
margin-right 4px
</style>
packages/components/message/basic.vue
+2 -18
View File
@@ -11,6 +11,7 @@ export default {
}
},
props: {
contextmenu:Array,
message: {
type: Object,
default: () => {
@@ -66,6 +67,7 @@ export default {
</div>
<div class="lemon-message__content-flex">
<div
v-dropdown_message={this.IMUI.contextmenu}
class="lemon-message__content"
on-click={e => {
this._emitClick(e, "content");
@@ -93,7 +95,6 @@ export default {
cursor: "pointer"
}}
/>
{this._renderStatue(status)}
</div>
</div>
</div>
@@ -108,23 +109,6 @@ export default {
_emitClick(e, key) {
this.IMUI.$emit("message-click", e, key, this.message,this.IMUI);
},
_renderStatue(status) {
// if (status == "going") {
// return <i class="lemon-icon-loading lemonani-spin" />;
// } else if (status == "failed") {
// return (
// <i
// class="lemon-icon-prompt"
// title="重发消息"
// style={{
// color: "#ff2525",
// cursor: "pointer"
// }}
// />
// );
// }
// return;
},
}
};
</script>
packages/components/messages.vue
+2
View File
@@ -1,5 +1,6 @@
<script>
import { hoursTimeFormat } from "utils";
import dropdown from "../directives/dropdown";
export default {
name: "LemonMessages",
components: {},
@@ -110,6 +111,7 @@ export default {
},
async _handleScroll(e) {
const { target } = e;
dropdown.hide();
if (
target.scrollTop == 0 &&
this._loading == false &&
packages/components/popover.vue
+5 -5
View File
@@ -51,7 +51,7 @@ export default {
render() {
return (
<span style="position:relative">
<transition name="slide-top">
<transition name="lemon-slide-top">
{this.visible && (
<div
class="lemon-popover"
@@ -117,7 +117,7 @@ export default {
z-index 10
background-color #fff
border-radius 4px
box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
box-shadow 0 2px 8px rgba(0, 0, 0, 0.08)
position absolute
transform-origin 50% 150%
+e(content)
@@ -135,9 +135,9 @@ export default {
width 8px
height 8px
background #fff
.slide-top-leave-active ,.slide-top-enter-active
transition all .3s cubic-bezier(0.645, 0.045, 0.355, 1)
.slide-top-enter, .slide-top-leave-to
.lemon-slide-top-leave-active ,.lemon-slide-top-enter-active
transition all .2s cubic-bezier(0.645, 0.045, 0.355, 1)
.lemon-slide-top-enter, .lemon-slide-top-leave-to
transform translateY(-10px) scale(.8)
opacity 0
</style>
packages/directives/dropdown.js
+70
View File
@@ -0,0 +1,70 @@
import Vue from 'vue';
import {isFunction,isEmpty} from 'utils/validate';
let popover;
const hidePopover = ()=>{
if(popover) popover.style.display = 'none'
}
const showPopover = ()=>{
if(popover) popover.style.display = 'block'
}
document.addEventListener('click',(e)=>{
hidePopover()
});
export default{
hide:hidePopover,
bind(el, binding, vnode){
el.addEventListener('contextmenu',(e)=>{
if(isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
let component;
let visibleItems = []
if(binding.modifiers.message) component = vnode.context;
else if(binding.modifiers.contact) component = vnode.child;
if(!popover){
popover = document.createElement('div');
popover.className = 'lemon-dropdown';
document.body.appendChild(popover);
}
popover.innerHTML = binding.value.map((item)=>{
let visible;
if(isFunction(item.visible)){
visible = item.visible(component);
}else{
visible = item.visible === undefined ? true : item.visible;
}
if(visible){
visibleItems.push(item);
const icon = item.icon ? `<i class="lemon-dropdown__icon ${item.icon}"></i>` : '';
return `<div style="color:${item.color}" title="${item.text}" class="lemon-dropdown__item">${icon}<span>${item.text}</span></div>`;
}
return '';
}).join("");
popover.style.top = `${e.pageY}px`;
popover.style.left = `${e.pageX}px`;
popover.childNodes.forEach((node,index)=>{
const {click,render} = visibleItems[index];
node.addEventListener('click',(e)=>{
e.stopPropagation();
if(isFunction(click)) click(e,component,hidePopover);
});
if(isFunction(render)){
const ins = Vue.extend({render:(h)=>{
return render(h,component,hidePopover);
}});
const renderComponent = new ins().$mount();
node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
}
});
showPopover();
});
},
inserted(el, binding, vnode){
}
}
packages/directives/index.js
+3
View File
@@ -0,0 +1,3 @@
import Vue from 'vue';
import Dropdown from './dropdown';
Vue.directive('dropdown',Dropdown);
packages/index.js
+2 -1
View File
@@ -14,7 +14,8 @@ import lemonMessageEvent from "./components/message/event";
import LemonIMUI from "./components/index";
import "./styles/common/index.styl";
const version = "0.1";
import './directives';
const version = "1.4.2";
const components = [
LemonIMUI,
LemonContact,
packages/styles/common/icons.styl
+10 -7
View File
@@ -1,12 +1,15 @@
// @font-face {
// font-family: 'lemon-icons';
// src: url('//at.alicdn.com/t/font_1312162_neqltsj20an.eot');
// src: url('//at.alicdn.com/t/font_1312162_neqltsj20an.eot?#iefix') format('embedded-opentype'),
// url('//at.alicdn.com/t/font_1312162_neqltsj20an.woff2') format('woff2'),
// url('//at.alicdn.com/t/font_1312162_neqltsj20an.woff') format('woff'),
// url('//at.alicdn.com/t/font_1312162_neqltsj20an.ttf') format('truetype'),
// url('//at.alicdn.com/t/font_1312162_neqltsj20an.svg#iconfont') format('svg');
// }
@font-face {
font-family: 'lemon-icons';
src: url('//at.alicdn.com/t/font_1312162_neqltsj20an.eot');
src: url('//at.alicdn.com/t/font_1312162_neqltsj20an.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1312162_neqltsj20an.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1312162_neqltsj20an.woff') format('woff'),
url('//at.alicdn.com/t/font_1312162_neqltsj20an.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1312162_neqltsj20an.svg#iconfont') format('svg');
src:url('../fonts/icon.woff') format('woff');
}
[class^='lemon-icon-'],
[class*=' lemon-icon-']
packages/styles/fonts/icon.woff
BIN
View File
Binary file not shown.
packages/utils/index.js
+4 -1
View File
@@ -74,7 +74,10 @@ export function arrayIntersect(a, b) {
export function clearHtml(str){
return str.replace(/<.*?>/ig,"");
}
//清除字符串内的所有HTML标签，除了IMG
export function clearHtmlExcludeImg(str){
return str.replace(/<(?!img).*?>/ig, "");
}
export function error(text) {
throw new Error(text);
}