123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<template>
|
|
<view
|
|
v-if="!hidden"
|
|
:style="tools._style([customStyle])"
|
|
:class="tClass + ' ' + tools.cls(classPrefix, [['fixed', fixed], theme])"
|
|
aria-role="button"
|
|
@click="toTop"
|
|
>
|
|
<view
|
|
:class="classPrefix + '__icon'"
|
|
aria-hidden
|
|
>
|
|
<slot name="icon" />
|
|
<block
|
|
v-if="_icon"
|
|
name="icon"
|
|
>
|
|
<t-icon
|
|
:custom-style="_icon.style || ''"
|
|
:t-class="tClassIcon"
|
|
:prefix="_icon.prefix"
|
|
:name="_icon.name"
|
|
:size="_icon.size"
|
|
:color="_icon.color"
|
|
:aria-hidden="!!_icon.ariaHidden"
|
|
:aria-label="_icon.ariaLabel"
|
|
:aria-role="_icon.ariaRole"
|
|
@click="_icon.click || ''"
|
|
/>
|
|
</block>
|
|
</view>
|
|
<view
|
|
v-if="!!text"
|
|
:class="classPrefix + '__text--' + theme + ' ' + tClassText"
|
|
>
|
|
{{ text }}
|
|
</view>
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import TIcon from '../icon/icon';
|
|
import { uniComponent } from '../common/src/index';
|
|
import { prefix } from '../common/config';
|
|
import props from './props';
|
|
import { calcIcon } from '../common/utils';
|
|
import tools from '../common/utils.wxs';
|
|
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
|
|
|
|
|
|
const name = `${prefix}-back-top`;
|
|
|
|
export default uniComponent({
|
|
name,
|
|
options: {
|
|
styleIsolation: 'shared',
|
|
},
|
|
externalClasses: [
|
|
`${prefix}-class`,
|
|
`${prefix}-class-icon`,
|
|
`${prefix}-class-text`,
|
|
],
|
|
mixins: [
|
|
ChildrenMixin(RELATION_MAP.BackTop),
|
|
],
|
|
components: {
|
|
TIcon,
|
|
},
|
|
props: {
|
|
...props,
|
|
},
|
|
emits: [
|
|
'to-top',
|
|
],
|
|
watch: {
|
|
icon() {
|
|
this.setIcon();
|
|
},
|
|
scrollTop: {
|
|
handler(value) {
|
|
const { visibilityHeight } = this;
|
|
this.hidden = value < visibilityHeight;
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
const { icon } = this;
|
|
this.setIcon(icon);
|
|
},
|
|
methods: {
|
|
setIcon(v) {
|
|
this._icon = calcIcon(v, 'backtop');
|
|
},
|
|
|
|
toTop() {
|
|
this.$emit('to-top');
|
|
if (this[RELATION_MAP.BackTop]) {
|
|
this[RELATION_MAP.BackTop]?.scrollToTop();
|
|
this.hidden = true;
|
|
} else {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
prefix,
|
|
classPrefix: name,
|
|
_icon: null,
|
|
hidden: true,
|
|
tools,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style scoped>
|
|
@import './back-top.css';
|
|
</style>
|