Skip to content

Commit 37dc78e

Browse files
mutoemutoe
committed
fix(PC): 全局评论at失效的问题
issue zhiyicx/plus-component-pc#1121
1 parent 32108ec commit 37dc78e

File tree

9 files changed

+66
-41
lines changed

9 files changed

+66
-41
lines changed

‎packages/zhiyicx-plus-pc/resources/assets/web/css/common.css‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
298298
.comment_line>.tr2:after {border-bottom:7px solid #fff;}
299299
.comment_body {font-size:12px;color:#999;}
300300
.comment_textarea {margin:10px 0 10px;}
301-
.comment_textarea textarea {width:100%;height:78px;padding:12px;border:1px solid #ededed;background:#f3f6f7;color:#333;outline:none;resize:none;overflow:hidden;}
301+
/* .comment_textarea .input-wrap textarea {width:100%;height:78px;padding:12px;border:1px solid #ededed;background:#f3f6f7;color:#333;outline:none;resize:none;overflow:hidden;} */
302302
.comment_post {line-height:31px;height:37px;position:relative;}
303303
.comment_post .dy_cs {position:absolute;right:5px;top:-40px;}
304304
.comment_post .post_button {line-height:32px;float:right;width:85px;height:32px;text-align:center;color:#fff;border:0;cursor:pointer;border-radius:3px;background:#59b6d7;}
@@ -309,7 +309,14 @@ to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
309309
.comment_box .comment_con a.mouse {cursor:pointer;display:none;margin-left:5px;}
310310
/*详情评论*/.comment_title {margin-top:40px;margin-bottom:20px;}
311311
.comment_count {font-size:22px;color:#59b6d7;}
312-
.comment_box .comment_editor {font-size:14px;width:100%;min-height:77px;margin-bottom:10px;padding:10px;resize:none;color:#666;border:1px solid #ededed;outline:none;background:#f3f6f7;}
312+
.comment_box .input-wrap {position: relative;}
313+
.comment_box .input-wrap .comment_editor {font-size:14px;width:100%;min-height:77px;margin-bottom:10px;padding:10px;resize:none;color:#666;border:1px solid #ededed;outline:none;background:#f3f6f7;z-index: 102;}
314+
.comment_box .input-wrap .mirror {position: absolute;top: 0;display: none;}
315+
.comment_box .input-wrap .ev-mention-list {position: absolute;background-color: #fff;z-index: 105;display: none;padding: 8px;border: 1px solid #ccc;border-radius: 2px;box-shadow: 0 2px 8px 1px rgba(0, 0, 9, .2);}
316+
.comment_box .input-wrap .ev-mention-list .list-content,
317+
.comment_box .input-wrap .ev-mention-list .list-title {font-size: 12px;cursor: pointer;list-style: none;}
318+
.comment_box .input-wrap .ev-mention-list .list-content.active {color: #59b6d7; background-color: #fff;}
319+
313320
.comment_box .comment_tool {text-align:right;}
314321
.comment_box .mention-btn {position: relative;display: inline-block;cursor: pointer;}
315322
.dialog-mention-select {position: absolute;display: flex;left: 0;top: 100%;width: 400px;height: 300px;z-index: 10;padding: 20px 40px;background-color: #fff;box-shadow: 0px 2px 9px 0px rgba(22, 23, 23, 0.09);flex-direction: column;cursor: default;}

‎packages/zhiyicx-plus-pc/resources/assets/web/css/feed.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/*动态发布*/
55
.feed_post {width:100%;margin-bottom:20px;padding:30px 40px;border-radius:3px;background:white;}
66
.feed_post .input-wrap {position: relative;width: 100%;min-height: 158px;}
7-
.feed_post .input-wrap .post_textarea {display: inline-block;position: absolute;width:100%;height:100%;overflow: hidden auto;outline: none;resize: none;white-space: pre-wrap;cursor: auto;padding: 10px;z-index: 101;top: 0;border: 1px solid #ededed;background-color: #f3f6f7;}
7+
.feed_post .input-wrap .post_textarea {display: block;position: absolute;width:100%;height:100%;overflow: hidden auto;outline: none;resize: none;white-space: pre-wrap;cursor: auto;padding: 10px;z-index: 101;top: 0;border: 1px solid #ededed;background-color: #f3f6f7;}
88
.feed_post .input-wrap #mirror {z-index: 101;}
99
.feed_post .input-wrap #feed_content {z-index: 102;}
1010
.feed_post .input-wrap .dy_cs {position:absolute;right:15px;bottom:10px;font-size:12px;z-index: 109;}

‎packages/zhiyicx-plus-pc/resources/assets/web/js/common.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -825,7 +825,7 @@ var comment = {
825825
this.support.to_uname = name;
826826
this.support.row_id = source_id;
827827
this.support.editor = $('#J-editor-' + type + this.support.row_id);
828-
this.support.editor.text('回复 ' + this.support.to_uname+'：');
828+
this.support.editor.val('回复 ' + this.support.to_uname+'：');
829829
this.support.editor.focus();
830830
},
831831
publish: function(obj) {
@@ -872,7 +872,7 @@ var comment = {
872872
axios.post(comment.urls(_this.support.row_id, _this.support.type), formData)
873873
.then(function (response) {
874874
_this.support.button.text('评论');
875-
_this.support.editor.html('');
875+
_this.support.editor.val('');
876876
_this.support.to_uid = 0;
877877
var res = response.data;
878878
var info = {
@@ -918,7 +918,7 @@ var comment = {
918918
html += ' </ul>'
919919
html += ' </div>'
920920
html += ' </div>';
921-
html += ' <div class="reply_body">'+res.comment.body+'</div>';
921+
html += ' <div class="reply_body">'+original_body+'</div>';
922922
html += ' </dd>';
923923
html += ' </dl>';
924924
html += '</div>';

‎packages/zhiyicx-plus-pc/resources/assets/web/js/module.mention.js‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -74,27 +74,27 @@ var mention = {
7474
var result = res.data.slice(0, 8);
7575
list = []
7676
// 填充列表
77-
result.forEach(function(user) {
78-
list.push(user.name)
79-
});
80-
81-
var dom = ''
82-
if (list.length > 0) {
83-
dom = keyword.length > 1
84-
? '<li class="list-title">选择好友或直接输入</li>'
85-
: '<li class="list-title">选择用户名或轻敲空格完成输入</li>'
86-
list.forEach(function(user) { dom += '<li class="list-content">' + user + '</li>'; })
87-
} else {
88-
dom = '<li class="list-title">没有找到该用户</li>'
89-
}
90-
91-
_this.$atList.html(dom)
92-
93-
var $listClick = _this.$atList.find('li.list-content')
94-
if ($listClick.length > 0) {
95-
$listClick.eq(0).addClass('active')
96-
}
97-
})
77+
result.forEach(function(user) {
78+
list.push(user.name)
79+
});
80+
81+
var dom = ''
82+
if (list.length > 0) {
83+
dom = keyword.length > 1
84+
? '<li class="list-title">选择好友或直接输入</li>'
85+
: '<li class="list-title">选择用户名或轻敲空格完成输入</li>'
86+
list.forEach(function(user) { dom += '<li class="list-content">' + user + '</li>'; })
87+
} else {
88+
dom = '<li class="list-title">没有找到该用户</li>'
89+
}
90+
91+
_this.$atList.html(dom)
92+
93+
var $listClick = _this.$atList.find('li.list-content')
94+
if ($listClick.length > 0) {
95+
$listClick.eq(0).addClass('active')
96+
}
97+
})
9898

9999
} else {
100100
list = []
@@ -130,7 +130,6 @@ var mention = {
130130
this.atLocation = this.beforeCursorString.lastIndexOf('@') // 找到 @ 字符在光标签出现的最近位置
131131
this.indexString = this.objString.substr(this.atLocation, this.cursorPosition - this.atLocation) // 记录光标和@间的字符串，判断是否含有空格
132132
this.positionString = this.objString.substr(0, this.atLocation) // 获取从开始到光标之前@之间的字符串 定位at弹框的位置
133-
134133
if (this.$atList.css('display') === 'block') {
135134
// 显示at中的选项列表
136135
var key = event.keyCode
@@ -167,13 +166,13 @@ var mention = {
167166
this.dynamicDisplayAtList()
168167

169168
this.$atList.show()
170-
this.$hiddenObj.html(this.positionString.replace(/\n/g, '<br>') + '<span id="at">@</span>')
169+
this.$hiddenObj.html(this.positionString.replace(/\n/g, '<br>') + '<span class="at">@</span>')
171170

172-
var $at = $('#at');
171+
var $at = this.$hiddenObj.find('.at');
173172

174173
this.$atList.css({
175174
left: this.getXY($at[0]).left + 2 + 'px',
176-
top: this.getXY($at[0]).top - this.$textarea[0].scrollTop + 18 + 'px'
175+
top: this.getXY($at[0]).top - this.$textarea[0].scrollTop + 28 + 'px'
177176
})
178177
} else {
179178
this.$atList.hide().empty()
@@ -182,16 +181,14 @@ var mention = {
182181

183182
// 返回 obj 位置
184183
getXY: function (obj) {
185-
// getBoundingClientRect()用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性
186-
let rect = obj.getBoundingClientRect()
187184
// 获取滑动条位置
188-
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
189-
let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft
185+
let scrollTop = obj.scrollTop || 0
186+
let scrollLeft = obj.scrollLeft || 0
190187
let isIE = document.all ? 2 : 0
191188

192189
let position = {}
193-
position.left = rect.left - isIE + scrollLeft
194-
position.top = rect.top - isIE + scrollTop
190+
position.left = obj.offsetLeft - isIE + scrollLeft
191+
position.top = obj.offsetTop - isIE + scrollTop
195192

196193
return position
197194
}
@@ -207,6 +204,14 @@ $(function() {
207204
mention.objChange(event)
208205
})
209206

207+
$('.feed_content, .detail_comment, .profile_list').on('keyup mouseup', '.ev-comment-editor', function(event) {
208+
event.preventDefault();
209+
mention.$textarea = $(this)
210+
mention.$hiddenObj = $(this).next('.ev-mirror')
211+
mention.$atList = $(this).parent().children('.ev-mention-list')
212+
mention.objChange(event)
213+
})
214+
210215
// 监听选择框
211216
$('#mention_list').on('click', '.list-content', function(event) {
212217
mention.handleString($(event.target).text())

‎packages/zhiyicx-plus-pc/resources/views/feed/read.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,7 @@
209209

210210
@section('scripts')
211211
<script src="{{ asset('assets/pc/js/module.weibo.js') }}"></script>
212+
<script src="{{ asset('assets/pc/js/module.mention.js') }}"></script>
212213
<script src="{{ asset('assets/pc/js/qrcode.js') }}"></script>
213214
<script type="text/javascript">
214215
$(function(){

‎packages/zhiyicx-plus-pc/resources/views/news/read.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178

179179
@section('scripts')
180180
<script src="{{ asset('assets/pc/js/module.news.js') }}"></script>
181+
<script src="{{ asset('assets/pc/js/module.mention.js') }}"></script>
181182
<script src="{{ asset('assets/pc/js/qrcode.js') }}"></script>
182183
<script>
183184
$(function(){

‎packages/zhiyicx-plus-pc/resources/views/profile/index.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<script src="{{ asset('assets/pc/js/module.profile.js') }}"></script>
3636
<script src="{{ asset('assets/pc/js/module.weibo.js') }}"></script>
3737
<script src="{{ asset('assets/pc/js/module.picshow.js') }}"></script>
38+
<script src="{{ asset('assets/pc/js/module.mention.js') }}"></script>
3839
<script src="{{ asset('assets/pc/js/md5.min.js') }}"></script>
3940
<script>
4041
$(function(){

‎packages/zhiyicx-plus-pc/resources/views/widgets/comments.blade.php‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@
1111
</div>
1212
<div class="comment_body" id="comment_box{{ $id }}">
1313
<div class="comment_textarea">
14-
<div class="comment_editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" contenteditable></div>
14+
<div class="input-wrap">
15+
<textarea class="comment_editor ev-comment-editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" ></textarea>
16+
<div class="comment_editor mirror ev-mirror" contenteditable="true"></div>
17+
{{-- at列表 --}}
18+
<ul class="ev-mention-list"></ul>
19+
</div>
1520
<div class="comment_post">
1621
<span class="dy_cs">可输入<span class="nums" style="color: rgb(89, 182, 215);">255</span>字</span>
1722
<span class="font14 mention-btn">
@@ -87,7 +92,12 @@
8792
@endif
8893
<div class="comment_title"><span class="comment_count cs{{ $id }}">{{ $comments_count }} </span>人评论</div>
8994
<div class="comment_box">
90-
<div class="comment_editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" contenteditable></div>
95+
<div class="input-wrap">
96+
<textarea class="comment_editor ev-comment-editor" id="J-editor-{{ $comments_type }}{{ $id }}" placeholder="说点什么吧" oninput="checkNums(this, 255, 'nums');" ></textarea>
97+
<div class="comment_editor mirror ev-mirror" contenteditable="true"></div>
98+
{{-- at列表 --}}
99+
<ul class="ev-mention-list"></ul>
100+
</div>
91101
<div class="comment_buttons">
92102
<span class="font14 mention-btn">
93103
<div onclick="comment.showMention(true, this);">

‎packages/zhiyicx-plus-pc/resources/views/widgets/postfeed.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<textarea id="feed_content" class="post_textarea" onkeyup="checkNums(this, 255, 'nums');"></textarea>
55
<div id="mirror" class="post_textarea" contenteditable="true"></div>
66
<span class="dy_cs">可输入<span class="nums" style="color: rgb(89, 182, 215);">255</span>字</span>
7+
{{-- at列表 --}}
8+
<ul id="mention_list"></ul>
79
</div>
810

9-
{{-- at列表 --}}
10-
<ul id="mention_list"></ul>
1111

1212
<div class="post_extra">
1313
<span class="font14 ev-btn-feed-pic">

0 commit comments

Comments
 (0)