Usando o Shepherdjs para fazer tours em uma aplicação nuxt (vue.js) (2부)

계속해서 튜토리얼을 진행하고, 초기 부분을 검토하고, 변경하고, 더 많은 프로젝트를 구성할 수 있도록 변경하십시오aqui .

Para diminuir a largura do elemento do sheep, iremos adicionar a classe width-limit , conme código abaixo. Você pode declarar uma série de classes para que sejam aplicadas no elemento do sheep. Por hora iremos aplicar apenas uma classe. É necessário retirar o scoped declaração de style, então tenha muito cuidado.

Também vamos alterar a opção on dentro de attachTo , que escolhe o posicionamento da flecha/elemento sheep, vamos trocar de 'top' para 'right-end'.

mounted() {
    this.$nextTick(() => {
      const tour = this.$shepherd({
        useModalOverlay: true,
        defaultStepOptions: {
          popperOptions: {
            modifiers: [{ name: 'offset', options: { offset: [0,50] } }]
          }
        }
      });

      tour.addStep({
        classes: 'width-limit',
        attachTo: { element: '#shepherd-teste', on: 'right-end' },
        text: 'Test'
      });

      tour.start();
      });
    }

E a declaração em 스타일

.width-limit {
  max-width: 200px;
}

E assim ficou o nosso elemento, menor e renderizado a direita.



Você deve ter notado que com a mudança de lugar, a seta que aponta para o elemento a ser destacado ficou "fora do esquadro"e isso incomoda um pouco. Para corrigir este tipo de situação usamos o modificador do popper chamado 'arrow', assim a opção popperOptions fica da seguinte forma:

popperOptions: {
  modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
}

E o elemento fica desta forma (bem mais apresentável), com a seta deslocada mais ao centro eo elemento no mesmo lugar. Usei o valor 20 pois é o que faz sentido para o exemplo, mas você pode testar com valores positivos e negative.



Para deixar o elemento mais complete, podemos adicionar um título, e adicionar um botão de cancelamento do tutorial. As opções utilizadas serão cancelIcon e title . Importante notar que a opção cancelIcon se trata de um objeto com a propriedade enabled que é um valor booleano.

O visual e o código ficam da seguinte maneira:

this.$shepherd({
          useModalOverlay: true,
          defaultStepOptions: {
            cancelIcon: {enabled: true},
            popperOptions: {
              modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
            }
         }
});

tour.addStep({
  classes: 'width-limit',
  attachTo: { element: '#shepherd-teste', on: 'right-end' },
  title: 'Test Title',
  text: 'Test'
});

Continua em breve...