Примечание: я новичок в Vue, но до публикации я ознакомился с документами и искал другие вопросы.Я не мог найти ответ.У меня также есть инструмент Vue dev, установленный для отладки, и я не смог решить эту, казалось бы, простую проблему.
Я хотел создать простой однофайловый компонент Vue для тестирования и проверки работоспособности моей установки связывания с накопительным пакетом.(например, чтобы убедиться, что мое понимание компонента vue как модулей и экспорта было правильным).
Таким образом, мой простой компонент состоит из двух меньших компонентов - либо кнопки с шевроном вверх, либо шевроном вниз.Идея состояла в том, чтобы разместить это место в середине страницы и по щелчку перейти к следующему тегу section.
До сих пор я понял, что функция работает довольно хорошо (см. demo ).
Однако я хотел передать свойство двум дочерним компонентам - offsetSelector.Независимо от того, как я пытаюсь установить свойство, я не могу установить его даже на родительском уровне (например, v-bind:offsetSelector=".navbar", :offsetSelector=".navbar", offsetSelector=".navbar" и т. Д.).
Может кто-нибудь помочь мне, пожалуйставыяснить, почему это не становится ограниченным?
arrow-to-section.vue
<template>
<div>
<up :offsetSelector="offsetSelector"></up>
<down :offsetSelector="offsetSelector"></down>
</div>
</template>
<script>
import down from './section-down.vue';
import up from './section-up.vue';
export default {
components: { down, up },
props: [ 'offsetSelector' ],
data: function () {
return { }
}
}
</script>
<style scoped>
div {
position: fixed;
top:50%;
margin-left: 10px;
}
div > button {
display: block;
margin-bottom: 10px !important;
}
</style>
section-down.vue
<template>
<button type="button" name="button" v-on:click="animateScrollTo">
<i class="fa fa-chevron-down"></i>
</button>
</template>
<script>
export default {
props: [ 'offsetSelector' ],
data: function () {
return {
offset: 0
}
},
computed: {
},
methods: {
setOffset: function() {
this.offset = this.offsetSelector == undefined
? 0
: $(this.offsetSelector).outerHeight() == undefined
? 0
: $(this.offsetSelector).outerHeight()
},
animateScrollTo: function() {
this.setOffset()
var sections = document.querySelectorAll("section")
var current = undefined;
var curOffset = this.offset
console.log('vue-down-offset', curOffset, this.offsetSelector)
sections.forEach(function(s, i){
var winScroll = $(window).scrollTop() - curOffset
var curScroll = $(s).offset().top
if ( winScroll < curScroll && current == undefined)
{ current = s }
})
if (current != undefined) {
$('html, body').animate({
scrollTop: $(current).offset().top - curOffset
}, 1000, function() {});
}
}
}
}
</script>
<style scoped>
button {
background: radial-gradient(rgb(0, 198, 255), rgb(0, 114, 255));
background-color: transparent;
border: transparent 0px solid;
margin: 0;
padding: 0px;
width:32px;
height:32px;
border-radius: 50%;
}
i { font-size: 16px; }
button:focus {
outline: transparent 0px solid;
}
</style>
section-up.vue
<template>
<button type="button" name="button" v-on:click="animateScrollTo">
<i class="fa fa-chevron-up"></i>
</button>
</template>
<script>
export default {
props: [ 'offsetSelector' ],
data: function () {
return { offset: 0 }
},
computed: { },
methods: {
setOffset: function() {
this.offset = this.offsetSelector == undefined
? 0
: $(this.offsetSelector).outerHeight() == undefined
? 0
: $(this.offsetSelector).outerHeight()
},
animateScrollTo: function() {
this.setOffset()
var sections = document.querySelectorAll("section")
var current = undefined;
var curOffset = this.offset
console.log('vue-up-offset', curOffset, this.offsetSelector)
sections.forEach(function(s, i){
var winScroll = $(window).scrollTop()
var curScroll = $(s).offset().top - curOffset
if ( winScroll > curScroll)
{ current = s }
})
if (current == undefined) {
current = document.querySelector("body")
}
if (current != undefined) {
$('html, body').animate({
scrollTop: $(current).offset().top - curOffset
}, 1000, function() {});
}
}
}
}
</script>
<style scoped>
button {
background: radial-gradient(rgb(0, 198, 255), rgb(0, 114, 255));
background-color: transparent;
border: transparent 0px solid;
margin: 0;
padding: 0px;
width:32px;
height:32px;
border-radius: 50%;
}
button:focus {
outline: transparent 0px solid;
}
i { font-size: 16px; }
</style>
demo.html
<style media="screen">
section {
height: 100vh;
}
</style>
<body>
<nav class="navbar navbar-light sticky-top">
<a class="navbar-brand" href="../../">
<img src="../../data/vdsm.svg" alt="logo" style="width:150px;">
<h4 class="lead"> vue components </h4>
</a>
<crumbs id="crumbs"></crumbs>
</nav>
<arrowToSection id="arrowToSection" offset-selector=".navbar"></arrowToSection>
<section style="background-color:#5433FF;"></section>
<section style="background-color:#20BDFF;"></section>
<section style="background-color:#A5FECB;"></section>
<section style="background-color:#86fde8;"></section>
</body>
<script type="text/javascript" src="component.js"></script>
component.js
let arrowToSection = vdsm.arrowToSection
new Vue({
el: '#arrowToSection',
template: '<arrowToSection/>',
components: { arrowToSection }
})
База кода
Репо можно найти здесь .
Два дочерних компонента:
- / src / scripts / modules / section-up.vue
- / src / scripts /modules / section-down.vue
Компонент, над которым я работаю:
- / src / scripts / modules / arrow-to-section.vue
Демонстрация компонента:
- / demos / arrow-to-section / index.html