Corpo da template
A template se divide realmente em duas: "app1" e "app2". Veja no código abaixo:
<div id="app1" class="container" align="center">
<div v-for="slide in slides">
<div v-bind:id="'d'+slide.campo" v-show="slide.mostra" class="sld">{{ slide.campo}}</div>
</div>
</div>
<div id="app2" class="container" align="center">
<div v-for="slide in banners">
<div v-bind:id="'d'+slide.campo" v-show="slide.mostra" class="sld">{{ slide.tag}}</div>
</div>
</div>
Como a ativação de visibilidade (v-show) se dá pelo estado de uma propriedade contida em arranjo, não podemos utilizar o mesmo arranjo para ambas as instâncias, exceto se os tempos de sincronismo forem iguais. Portanto, precisamos de dois arranjos: slides e banners.
Definição inicial dos dados
Apesar de existirem duas instâncias, podemos, sem problema algum, ter as mesmas variáveis definidas em ambas:
var data = {
negrito: 'bold',
slides: arrSlides,
banners: arrBanners,
cabecalhos : arrCabecalhos,
cabecalho: 'SUPORTE',
largura: '20px',
tfonte: '10px',
tftevr: '10px',
action:'graf'
};
Se uma variável não for utilizada em uma instância, não existe problema algum. O contrário é que não vale. Se uma instância chamar uma variável e esta não tiver sido definida, o Vue aponta o erro.
Instanciações
Existem algumas variáveis globais, com o intuito de prover a necessária configuração do comportamento das instâncias:
var ACTIVE_SLIDE1 = -1;
var ACTIVE_SLIDE2 = -1;
var TIME_OF_SLIDE1 = 3000;
var TIME_OF_SLIDE2 = 1000;
var NUMBER_OF_SLIDES = arrSlides.length;
Em nosso exemplo o número de slides de ambas as instâncias é igual. Se não for o seu caso, defina, como foi feito para as outras constantes, NUMBER_OF_SLIDES1 e NUMBER_OF_SLIDES2 e substitua de acordo com a lógica em seu código.
As instâncias são definidas como segue:
Primeira instância
var v1 = new Vue({
el: '#app1',
data: data,
mounted: function () {
this.viraPagina1();
},
methods: {
viraPagina1: function(){
if(ACTIVE_SLIDE1 > -1) {
this.slides[ACTIVE_SLIDE1].mostra = false;
} else {
this.slides[ACTIVE_SLIDE1+1].mostra = true;
}
ACTIVE_SLIDE1++;
if( ACTIVE_SLIDE1 >= NUMBER_OF_SLIDES ){
ACTIVE_SLIDE1 = 0;
}
this.slides[ACTIVE_SLIDE1].mostra = true;
setTimeout(this.viraPagina1, TIME_OF_SLIDE1);
}
},
watch: {
slides: {
handler: function (linque) {
console.log("w: "+arguments.callee.name)
},
deep: true
}
},
});
Segunda instância
var v2 = new Vue({
el: '#app2',
data: data,
mounted: function () {
this.viraPagina2();
},
methods: {
viraPagina2: function(){
if(ACTIVE_SLIDE2 > -1) {
this.banners[ACTIVE_SLIDE2].mostra = false;
} else {
this.banners[ACTIVE_SLIDE2+1].mostra = true;
}
ACTIVE_SLIDE2++;
if( ACTIVE_SLIDE2 >= NUMBER_OF_SLIDES ){
ACTIVE_SLIDE2 = 0;
}
this.banners[ACTIVE_SLIDE2].mostra = true;
setTimeout(this.viraPagina2, TIME_OF_SLIDE2);
}
},
watch: {
banners: {
handler: function (linque) {
console.log("w: "+arguments.callee.name)
},
deep: true
}
},
});
Obtendo o sincronismo ou dessincronismo
Repare que a diferença na cadência da contagem é obtida configurando as constantes TIME_OF_SLIDE1 e TIME_OF_SLIDE2. É fornecendo valores diferentes para ambas que podemos constatar que cada uma tem o seu comportamento próprio. Imagine a utilidade desta característica para o sincronismo.
Código completo
Para não incorrer no erro de alguns foruns, que apresentam trechos de códigos sem mostrá-lo no corpo global, apresentamos a seguir o código completo deste exemplo, inclusive para o saudável Copiar e Colar:
<html>
<head>
<title>SLD 021</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
/* Animação de slide*/
CAPTION {font-family: Arial;font-size:18px;padding-bottom: 50px;}
DIV.sld {
font-family: Verdana;
color: skyblue;
overflow-x: hidden;
width: 450px;
/* float:left; */
font-size:120px;
font-family: Arial;
}
DIV.fig {float:left;font-size:72px;font-family: Arial;transition: width 4s;background-color:salmon;}
LABEL {font-family: Arial;font-size:12px;}
</style>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="SLD_Opcoes.js"></script>
<script type="text/javascript">
var ACTIVE_SLIDE1 = -1;
var ACTIVE_SLIDE2 = -1;
var TIME_OF_SLIDE1 = 3000;
var TIME_OF_SLIDE2 = 1000;
var NUMBER_OF_SLIDES = arrSlides.length;
function init(){
// Comando 1
var data = {
negrito: 'bold',
slides: arrSlides,
banners: arrBanners,
cabecalhos : arrCabecalhos,
cabecalho: 'SUPORTE',
largura: '20px',
tfonte: '10px',
tftevr: '10px',
action:'graf'
};
// Comando 2
var v1 = new Vue({
el: '#app1',
data: data,
mounted: function () {
this.viraPagina1();
},
methods: {
viraPagina1: function(){
if(ACTIVE_SLIDE1 > -1) {
this.slides[ACTIVE_SLIDE1].mostra = false;
} else {
this.slides[ACTIVE_SLIDE1+1].mostra = true;
}
ACTIVE_SLIDE1++;
if( ACTIVE_SLIDE1 >= NUMBER_OF_SLIDES ){
ACTIVE_SLIDE1 = 0;
}
this.slides[ACTIVE_SLIDE1].mostra = true;
setTimeout(this.viraPagina1, TIME_OF_SLIDE1);
}
},
watch: {
slides: {
handler: function (linque) {
console.log("w: "+arguments.callee.name)
},
deep: true
}
},
});
var v2 = new Vue({
el: '#app2',
data: data,
mounted: function () {
this.viraPagina2();
},
methods: {
viraPagina2: function(){
if(ACTIVE_SLIDE2 > -1) {
this.banners[ACTIVE_SLIDE2].mostra = false;
} else {
this.banners[ACTIVE_SLIDE2+1].mostra = true;
}
ACTIVE_SLIDE2++;
if( ACTIVE_SLIDE2 >= NUMBER_OF_SLIDES ){
ACTIVE_SLIDE2 = 0;
}
this.banners[ACTIVE_SLIDE2].mostra = true;
setTimeout(this.viraPagina2, TIME_OF_SLIDE2);
}
},
watch: {
banners: {
handler: function (linque) {
console.log("w: "+arguments.callee.name)
},
deep: true
}
},
});
}
</script>
</head>
<body onload="init();">
<div id="app1" class="container" style="float:clear;" align="center">
<div v-for="slide in slides">
<div v-bind:id="'d'+slide.campo" v-show="slide.mostra" class="sld">{{ slide.campo}}</div>
</div>
</div>
<div id="app2" class="container" style="float:clear;" align="center">
<div v-for="slide in banners">
<div v-bind:id="'d'+slide.campo" v-show="slide.mostra" class="sld">{{ slide.tag}}</div>
</div>
</div>
</body>
</html>
Nenhum comentário:
Postar um comentário