ScrollToBottom.vue 570 B

123456789101112131415161718192021222324252627282930313233
  1. <script setup lang="ts">
  2. import { ref, onMounted, onUnmounted } from 'vue'
  3. import { CaretBottom } from '@element-plus/icons-vue'
  4. const showButton = ref(false)
  5. const props = defineProps({
  6. target: {
  7. required: true
  8. }
  9. })
  10. defineExpose({
  11. showButton
  12. })
  13. </script>
  14. <template>
  15. <el-button v-show="showButton" :icon="CaretBottom" circle
  16. @click="props.target.setScrollTop(99999)"
  17. class="back_bottom" />
  18. </template>
  19. <style scoped lang="scss">
  20. .back_bottom {
  21. position: absolute;
  22. bottom: 12px;
  23. right: 12px;
  24. font-size: 20px
  25. }
  26. </style>