fix(richedit): 修复移动端富文本编辑器滚动加载和样式问题
修复无限滚动加载逻辑，确保在接近底部时触发加载 调整容器样式解决滚动条显示问题 优化标签切换时的数据重置逻辑
This commit is contained in:
parent
5ebff592cf
commit
11144f2fa7
|
|
@ -1,8 +1,14 @@
|
|||
<template>
|
||||
<div class="all" ref="mescrollRef" v-infinite-scroll="getDataByScoll" style="overflow-y: auto">
|
||||
<!-- v-infinite-scroll="getDataByScoll" -->
|
||||
<div class="all" ref="mescrollRef" style="overflow: auto">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-input v-model="form.keyword" placeholder="输入关键字进行搜索（以空格隔开）" class="input-with-select"
|
||||
@keyup.enter="handleSearch" style="width: 80%">
|
||||
<el-input
|
||||
v-model="form.keyword"
|
||||
placeholder="输入关键字进行搜索（以空格隔开）"
|
||||
class="input-with-select"
|
||||
@keyup.enter="handleSearch"
|
||||
style="width: 80%"
|
||||
>
|
||||
<template #append>
|
||||
<el-button icon="Search" @click="handleSearch" />
|
||||
</template>
|
||||
|
|
@ -11,17 +17,27 @@
|
|||
<el-button style="width: 20%" type="text" @click="restData">清空条件</el-button>
|
||||
</div>
|
||||
|
||||
<el-date-picker style="margin-top: 20px; width: 100%; max-height: 40px" v-model="daterange" type="daterange"
|
||||
range-separator="至" value-format="YYYY-MM-DD" start-placeholder="选择报道时间" end-placeholder="选择报道时间"
|
||||
@change="handleSearch" />
|
||||
<el-date-picker
|
||||
style="margin-top: 20px; width: 100%; max-height: 40px"
|
||||
v-model="daterange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
value-format="YYYY-MM-DD"
|
||||
start-placeholder="选择报道时间"
|
||||
end-placeholder="选择报道时间"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
|
||||
<div class="filter">
|
||||
<div class="r_tabs">
|
||||
<div class="tabItem" v-for="(item, index) in tabsList" :key="index" @click="changeTab(index)">
|
||||
<text :style="{
|
||||
<text
|
||||
:style="{
|
||||
color: tabIndex == index ? '#409eff' : '#333',
|
||||
fontWeight: tabIndex == index ? 'bold' : 'normal',
|
||||
}">{{ item.name }}</text>
|
||||
}"
|
||||
>{{ item.name }}</text
|
||||
>
|
||||
<div class="tab_line" v-if="tabIndex == index"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,8 +51,7 @@
|
|||
<div class="card_header" @click.stop="goDetail(1, item, true)">
|
||||
<text class="card_title" v-html="item.title"></text>
|
||||
<div class="r_point" :style="{ color: '#000' }">
|
||||
<div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }">
|
||||
</div>
|
||||
<div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }"></div>
|
||||
<text v-if="item.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text>
|
||||
<text v-if="item.status == 1" style="color: rgba(0, 0, 0, 0.65)">
|
||||
{{ item.deleted ? '已删除' : '未发布' }}
|
||||
|
|
@ -71,59 +86,54 @@
|
|||
<div style="display: flex; justify-content: space-between; align-items: center; height: 10px">
|
||||
<div></div>
|
||||
<div class="option">
|
||||
<el-button v-if="item.deleted" type="text" style="margin-left: -10px"
|
||||
@click="doRecoverFn(item)">
|
||||
<el-button v-if="item.deleted" type="text" style="margin-left: -10px" @click="doRecoverFn(item)">
|
||||
<text>恢复</text>
|
||||
</el-button>
|
||||
<div v-else
|
||||
style="display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; white-space: nowrap">
|
||||
<div v-else style="display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; white-space: nowrap">
|
||||
<!-- 新闻状态 0-草稿 | 1-未发布 | 2-已发布 | 3-送审 | 4-已二审 | -1-退改中 -->
|
||||
<div v-if="Session.get('userInfoLocal').userType == '00'">
|
||||
<!-- 普通账号 -->
|
||||
<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
|
||||
type="text" @click="goDetail(1, item, false)">编辑</el-button>
|
||||
<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1" type="text" @click="goDetail(1, item, false)"
|
||||
>编辑</el-button
|
||||
>
|
||||
|
||||
<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
|
||||
type="text" @click="doApprovalFn(item, item.status)">送审</el-button>
|
||||
<el-button v-else-if="item.status == 3" type="text"
|
||||
@click="doApprovalFn(item, item.status)">撤审</el-button>
|
||||
<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1" type="text" @click="doApprovalFn(item, item.status)"
|
||||
>送审</el-button
|
||||
>
|
||||
<el-button v-else-if="item.status == 3" type="text" @click="doApprovalFn(item, item.status)">撤审</el-button>
|
||||
|
||||
<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
|
||||
type="text" style="color: #ff1818" @click="doDeleteNewsFn(item)">删除</el-button>
|
||||
<el-button
|
||||
v-if="item.status == 0 || item.status == 1 || item.status == -1"
|
||||
type="text"
|
||||
style="color: #ff1818"
|
||||
@click="doDeleteNewsFn(item)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
<div v-if="Session.get('userInfoLocal').userType == '02'">
|
||||
<el-button v-if="item.status == 4" type="text"
|
||||
@click="doApprovalFn(item, item.status)">撤审</el-button>
|
||||
<el-button v-if="item.status == 4" type="text" @click="doApprovalFn(item, item.status)">撤审</el-button>
|
||||
|
||||
<!-- 二审账号 -->
|
||||
<el-button v-if="item.status == 3" type="text" style="color: #ff1818"
|
||||
@click="doNewReturnFn(item)">退改</el-button>
|
||||
<el-button v-if="item.status == 3" type="text" style="color: #ff1818" @click="doNewReturnFn(item)">退改</el-button>
|
||||
|
||||
<el-button v-if="item.status == 3" type="text"
|
||||
@click="goDetail(1, item, false)">编辑</el-button>
|
||||
<el-button v-if="item.status == 3" type="text" @click="goDetail(1, item, false)">编辑</el-button>
|
||||
|
||||
<el-button v-if="item.status == 3" type="text"
|
||||
@click="doNewCheckFn(item)">复审</el-button>
|
||||
<el-button v-if="item.status == 3" type="text" @click="doNewCheckFn(item)">复审</el-button>
|
||||
|
||||
<el-button type="text" v-if="item.status == 4"
|
||||
@click="doNewsPublishFn(item, 2)">发布</el-button>
|
||||
<el-button type="text" v-if="item.status == 4" @click="doNewsPublishFn(item, 2)">发布</el-button>
|
||||
</div>
|
||||
<div v-if="Session.get('userInfoLocal').userType == '01'">
|
||||
<!-- 终审账号 -->
|
||||
<el-button v-if="item.status == 3 || item.status == 4" type="text"
|
||||
@click="goDetail(1, item, false)">编辑</el-button>
|
||||
<el-button v-if="item.status == 3 || item.status == 4" type="text" @click="goDetail(1, item, false)">编辑</el-button>
|
||||
|
||||
<el-button v-if="item.status == 4" type="text" style="color: #ff1818"
|
||||
@click="doNewReturnFn(item)">退改</el-button>
|
||||
<el-button v-if="item.status == 4" type="text" style="color: #ff1818" @click="doNewReturnFn(item)">退改</el-button>
|
||||
|
||||
<el-button type="text" v-if="item.status == 2"
|
||||
@click="doNewsPublishFn(item, 1)">撤稿</el-button>
|
||||
<el-button type="text" v-else-if="item.status != -1 && item.status == 4"
|
||||
@click="doNewsPublishFn(item, 2)">发布</el-button>
|
||||
<el-button type="text" v-if="item.status == 2" @click="doNewsPublishFn(item, 1)">撤稿</el-button>
|
||||
<el-button type="text" v-else-if="item.status != -1 && item.status == 4" @click="doNewsPublishFn(item, 2)">发布</el-button>
|
||||
|
||||
<el-button v-if="item.status == 3" type="text"
|
||||
style="color: #ff1818; margin-left: 5px"
|
||||
@click="doNewReturnFn(item)">退改</el-button>
|
||||
<el-button v-if="item.status == 3" type="text" style="color: #ff1818; margin-left: 5px" @click="doNewReturnFn(item)"
|
||||
>退改</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- <el-icon size="16" @click="goRecord(scope.row)">
|
||||
|
|
@ -145,9 +155,16 @@
|
|||
</el-icon>
|
||||
</div>
|
||||
<keep-alive>
|
||||
<DetailDrawer v-model="drawer" :data="newsData" :readOnly="readOnly" :type="newstype"
|
||||
@handleEditStatus="handleEditStatus" @doNewsPublishFn="doNewsPublishFn" @doDeleteNewsFn="doDeleteNewsFn"
|
||||
@getData="getData" />
|
||||
<DetailDrawer
|
||||
v-model="drawer"
|
||||
:data="newsData"
|
||||
:readOnly="readOnly"
|
||||
:type="newstype"
|
||||
@handleEditStatus="handleEditStatus"
|
||||
@doNewsPublishFn="doNewsPublishFn"
|
||||
@doDeleteNewsFn="doDeleteNewsFn"
|
||||
@getData="getData"
|
||||
/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -187,6 +204,7 @@ const tabsList = ref([
|
|||
const tabIndex = ref(0);
|
||||
|
||||
function changeTab(index) {
|
||||
tableData.page = 1;
|
||||
tabIndex.value = index;
|
||||
form.value.status = tabsList.value[index].status;
|
||||
getData();
|
||||
|
|
@ -215,6 +233,8 @@ const tableData = reactive({
|
|||
});
|
||||
|
||||
function getDataByScoll() {
|
||||
console.log('🚀 ~ getDataByScoll ~ tableData.data.length :', tableData.data.length);
|
||||
console.log('🚀 ~ getDataByScoll ~ tableData.total:', tableData.total);
|
||||
if (tableData.data.length < tableData.total) {
|
||||
tableData.page++;
|
||||
getData();
|
||||
|
|
@ -319,7 +339,7 @@ async function doNewsPublishFn(item, status) {
|
|||
getData();
|
||||
}
|
||||
})
|
||||
.catch(() => { });
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 管理后台需求文件0519（V1.1） start */
|
||||
|
|
@ -361,7 +381,7 @@ function restData() {
|
|||
form.value.mediaId = null;
|
||||
form.value.deleted = null;
|
||||
|
||||
form.value.status = null;
|
||||
// form.value.status = null;
|
||||
form.value.rating = null;
|
||||
form.value.orderBy = null;
|
||||
|
||||
|
|
@ -388,12 +408,23 @@ function goTop() {
|
|||
}
|
||||
|
||||
const isShowBackTop = ref(false);
|
||||
function handleScroll() {
|
||||
function handleScroll(e) {
|
||||
console.log('🚀 ~ handleScroll ~ e:', e);
|
||||
if (mescrollRef.value.scrollTop > 300) {
|
||||
isShowBackTop.value = true;
|
||||
} else {
|
||||
isShowBackTop.value = false;
|
||||
}
|
||||
|
||||
const { scrollTop, clientHeight, scrollHeight } = mescrollRef.value;
|
||||
|
||||
// 计算是否接近底部（这里设置为距离底部200px时触发）
|
||||
const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50;
|
||||
|
||||
// 如果接近底部且不在加载中，则加载更多
|
||||
if (isNearBottom) {
|
||||
getDataByScoll();
|
||||
}
|
||||
}
|
||||
|
||||
// 复审
|
||||
|
|
@ -445,11 +476,10 @@ async function doApprovalFn(item, status) {
|
|||
getData();
|
||||
}
|
||||
})
|
||||
.catch(() => { });
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
if (Session.get('userInfoLocal').userType == '02') {
|
||||
tabsList.value = [
|
||||
{
|
||||
|
|
@ -472,7 +502,7 @@ onMounted(() => {
|
|||
name: '全部',
|
||||
status: null,
|
||||
},
|
||||
]
|
||||
];
|
||||
} else if (Session.get('userInfoLocal').userType == '01') {
|
||||
tabsList.value = [
|
||||
{
|
||||
|
|
@ -491,14 +521,12 @@ onMounted(() => {
|
|||
name: '全部',
|
||||
status: null,
|
||||
},
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
changeTab(0);
|
||||
mescrollRef.value.addEventListener('scroll', handleScroll);
|
||||
// getData();
|
||||
|
||||
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
@ -510,8 +538,9 @@ onUnmounted(() => {
|
|||
.all {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100vw;
|
||||
// max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
|
|
@ -620,7 +649,7 @@ onUnmounted(() => {
|
|||
.bottom_load_text {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
width: 90vw;
|
||||
// width: 90vw;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue