refactor: 优化公共链接返回顶部功能

This commit is contained in:
wangjiahao 2024-01-24 16:27:40 +08:00
parent 8b2c71c7a7
commit be7db8395e
9 changed files with 36 additions and 22 deletions

View File

@ -9,7 +9,7 @@
v-if="isPublicLink" v-if="isPublicLink"
ref="widget-div" ref="widget-div"
class="function-div" class="function-div"
:class="functionClass" :class="[{['function-back-div']: backToTopBtn},functionClass]"
> >
<el-button-group size="mini"> <el-button-group size="mini">
<el-button <el-button
@ -39,8 +39,8 @@
icon-class="link-down" icon-class="link-down"
/>{{ $t('panel.down') }}</span></el-button> />{{ $t('panel.down') }}</span></el-button>
<el-button <el-button
id="fullscreenElement"
v-if="isPcTerminal" v-if="isPcTerminal"
id="fullscreenElement"
size="mini" size="mini"
@click="toggleFullscreen" @click="toggleFullscreen"
> >
@ -48,15 +48,8 @@
style="width: 12px;height: 12px" style="width: 12px;height: 12px"
:icon-class="fullscreenState?'public_fullscreen_exit':'public_fullscreen'" :icon-class="fullscreenState?'public_fullscreen_exit':'public_fullscreen'"
/>{{ fullscreenState?$t('panel.fullscreen_exit'): $t('panel.fullscreen_preview') }}</span></el-button> />{{ fullscreenState?$t('panel.fullscreen_exit'): $t('panel.fullscreen_preview') }}</span></el-button>
<el-button
v-show="backToTopBtn"
size="mini"
type="warning"
@click="backToTop"
><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
</el-button-group> </el-button-group>
</div> </div>
<div <div
v-else-if="existLinkage || backToTopBtn" v-else-if="existLinkage || backToTopBtn"
class="bar-main-right" class="bar-main-right"
@ -75,6 +68,16 @@
@click="backToTop" @click="backToTop"
><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button> ><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
</div> </div>
<div
v-show="isPublicLink && backToTopBtn"
class="link-public"
>
<el-button
size="mini"
type="warning"
@click="backToTop"
><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
</div>
</div> </div>
</template> </template>
@ -293,4 +296,14 @@ export default {
} }
} }
.link-public {
top: -49px;
right: 8px;
opacity: 0.8;
position: absolute;
}
.function-back-div {
right: 100px!important;
}
</style> </style>

View File

@ -846,6 +846,7 @@ export default {
canvasScroll() { canvasScroll() {
// 100px // 100px
this.backToTopBtnShow = this.$refs[this.previewOutRefId].scrollTop > 200 this.backToTopBtnShow = this.$refs[this.previewOutRefId].scrollTop > 200
console.log('top=' + this.$refs[this.previewOutRefId].scrollTop + ';this.backToTopBtnShow=' + this.backToTopBtnShow)
bus.$emit('onScroll') bus.$emit('onScroll')
}, },
initListen() { initListen() {

View File

@ -55,9 +55,9 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe667;</span> <span class="icon iconfont">&#xe63f;</span>
<div class="name">返回顶部</div> <div class="name">返回顶部</div>
<div class="code-name">&amp;#xe667;</div> <div class="code-name">&amp;#xe63f;</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -828,9 +828,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1705486315942') format('woff2'), src: url('iconfont.woff2?t=1706079293312') format('woff2'),
url('iconfont.woff?t=1705486315942') format('woff'), url('iconfont.woff?t=1706079293312') format('woff'),
url('iconfont.ttf?t=1705486315942') format('truetype'); url('iconfont.ttf?t=1706079293312') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>

View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2459092 */ font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1705486315942') format('woff2'), src: url('iconfont.woff2?t=1706079293312') format('woff2'),
url('iconfont.woff?t=1705486315942') format('woff'), url('iconfont.woff?t=1706079293312') format('woff'),
url('iconfont.ttf?t=1705486315942') format('truetype'); url('iconfont.ttf?t=1706079293312') format('truetype');
} }
.iconfont { .iconfont {
@ -14,7 +14,7 @@
} }
.icon-back-top:before { .icon-back-top:before {
content: "\e667"; content: "\e63f";
} }
.icon-adaptor:before { .icon-adaptor:before {

File diff suppressed because one or more lines are too long

View File

@ -6,11 +6,11 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "831197", "icon_id": "8224825",
"name": "返回顶部", "name": "返回顶部",
"font_class": "back-top", "font_class": "back-top",
"unicode": "e667", "unicode": "e63f",
"unicode_decimal": 58983 "unicode_decimal": 58943
}, },
{ {
"icon_id": "34289857", "icon_id": "34289857",