SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Список вопросов Печать

Пример подключения компонента Vue

Метки: vue.js bootstrap axios 

Ответы

RemiZOffAlex  Создано: 2019-01-29 10:55:42.761670  Обновлено: 2019-01-29 10:55:42.761670

Файл index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SpecialistOff.NET</title>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" />
    <script src="/static/js/vue.global.prod.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>

<section id="app">
...
<backtotop-component></backtotop-component>
</section>

<script type="text/javascript" src="/static/components/backtotop.js"></script>
<link rel="stylesheet" href="/static/components/backtotop.css"></link>

<script>
const app = Vue.createApp({
    data: function() {
        return {
            message: 'SpecialistOff.NET'
        }
    }
});
app.mount('#app');
</script>
</body>
</html>

Файл backtotop.js

var backtotopTemplate = `
<div>
<span class="scrollToTop" style="z-index: 10;" v-show="visible" v-on:click="backToTop">
<div class="card">
<div class="card-body py-2 px-2">
<i class="fa fa-chevron-up"></i>
</div>
</div>
</span>
</div>`;

Vue.component('backtotop-component', {
    props: {
        visibleoffset: {
            type: [String, Number],
            default: 600
        },
    },
    template: backtotopTemplate,
    data () {
        return {
            visible: false
        }
    },
    mounted () {
        var vm = this;
        window.addEventListener('scroll', this.catchScroll);
        let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
        vm.visible = (currentScroll > 100);
    },
    destroyed () {
        window.removeEventListener('scroll', this.catchScroll)
    },
    methods: {
        catchScroll () {
            var vm = this;
            vm.visible = (window.pageYOffset > 100);
        },
        backToTop () {
            var vm = this;
            vm.scrollAnimate();
        },
        scrollAnimate: function() {
            var vm = this;
            let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
            if (currentScroll > 0) {
                //alert(currentScroll);
                window.requestAnimationFrame(vm.scrollAnimate)
                window.scrollTo(0, Math.floor(currentScroll - (currentScroll / 5)))
            }
        }
    }
});

Файл backtotop.css

.scrollToTop{
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    position: fixed;
    bottom: 10px;
    left: 10px;
    opacity: 0.3;
    display: inline;
}
.scrollToTop:hover{
    text-decoration: none;
    opacity: 1.0;
}
.scrollToTop .card{
    margin-bottom: 0;
    border-color: #7ca8b1;
}

Возможно будут интересны и другие вопросы