0

Como construir uma Diretiva Personalizada que funcione como v-on?

Resumidamente a diretiva precisa ter a mesma funcionalidade que o v-on:click

eu tentei coisas do tipo:

//App.vue:
<h1 v-arthur:click="myfunction">Directives Exercise</h1>

//main.js:
Vue.directive('arthur', {
  myfunction(){
    alert('minha diretiva personalizada v-on funcionou!');
  }
});

<script>
    export default {
        methods: {
            myfunction();
        }
    }
</script>

Mas não foi, porque eu não sei como fazer, é errado chamar uma função dentro de methods, mas já tentei de tudo, alguém pode me ajudar?

4
  • Cara isso só não é possível como é fora de propósito o que está tentando fazer. Diretivas personalizadas não funcionam dessa forma e nem foram criadas para tal.
    – LeAndrade
    Commented 26/06/2019 às 13:44
  • eu estou fazendo um curso na udemy e tem uns exercicios... Em um deles tem a seguinte atividade " Construa uma Diretiva Personalizada que funcione como v-on (Escute para Eventos)"
    – Arthur
    Commented 26/06/2019 às 13:54
  • Talvez eu tenha entendido errado mas pelo que entendi, é pra fazer uma diretiva que tenha a mesma funcionalidade que o v-on ........
    – Arthur
    Commented 26/06/2019 às 13:54
  • Bom não vejo como realizá-lo e se houver com certeza será gambiarra. Mas, caso seja feito pode postar o código como resposta caso alguém tenha alguma dúvida parecida.
    – LeAndrade
    Commented 26/06/2019 às 14:00

2 Respostas 2

3

Edit01 Se entendi certo oque você precisa, temos isso na documentação do VueJs

https://br.vuejs.org/v2/guide/custom-directive.html

Seria algo como isso:

<div v-arthur="{ color: 'green', text: 'Verde' }"></div>

Vue.directive('arthur', function (el, binding) {
  console.log(binding.value.color)
  console.log(binding.value.text)
})

Não reparei que vc queria fazer especificamente um v-on

Segue exemplo no CodePen.

https://codepen.io/anon/pen/xoXWgL?editors=1111

Descrição:

<div id="el">
  <button v-dup:click="alertMe">BlaBlaBla</button>
</div>

Directive

Vue.directive('dup', {
   bind(el, binding) {
     let type = binding.arg
     let myFunction = binding.value
     el.addEventListener(type, myFunction)
  }
})

Aqui você faz o ligamento, recebendo o elemento.

 bind(el, binding)

Aqui você pega a função que esta passando como argumento.

 let myFunction = binding.value

Depois liga a função ao elemento.

el.addEventListener(type, myFunction)
2
  • Creio não ser bem isso o que ele precise, ele quer executar a ação de clique através da diretiva.
    – LeAndrade
    Commented 26/06/2019 às 17:54
  • Mas é soh modificar pra como quiser, passar o evento de Click, e atrelar ele a uma função, perai vou fazer em um codePen. (Se for isso mesmo que ele quer)
    – Dup
    Commented 26/06/2019 às 18:10
0

A solução é esta

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Directives Exercise</h1>
                <!-- Exercise -->
                <!-- Build a Custom Directive which works like v-on (Listen for Events) -->
                <button v-customOn:click="clicked" class="btn btn-primary">Click Me</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        directives: {
            customOn: {
                bind(el, binding) {
                    el.onclick = function() {
                        binding.value();
                    }
                }
            }
        },
        methods: {
            clicked() {
                alert('I was clicked!');
            }
        }
    }
</script>

<style>
</style>

1
  • Desculpe não entendi, tem alguma diferença da solução que lhe informei ?
    – Dup
    Commented 2/07/2019 às 13:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .