Как использовать изображение в качестве кнопки в Vue.js? - PullRequest
Новая
       19

Как использовать изображение в качестве кнопки в Vue.js?

0 голосов
/ 10 июня 2019

Я пытаюсь создать кнопку входа в качестве отдельного файлового компонента в Vue.js (это приложение Rails с внешним интерфейсом Vue.js).Если вы нажмете эту кнопку, она должна перейти на страницу входа внешнего поставщика.

Как использовать изображение в качестве кнопки?Я предполагаю, что вы используете v-on:click для фактического перенаправления, но я застрял там.

Прямо сейчас, этот код ниже показывает жестко закодированную кнопку, которая выглядит как img(src="../assets/img/login_button.png").Вы можете нажать на нее, но это явно не то, что я хочу.Я хочу показать фактическое изображение PNG, а не путь. 

// LoginButton.vue

<template lang="pug">
#login-button
  <button v-on:click="redirect_to_login">img(src="../assets/img/login_button.png")</button>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class LoginButton extends Vue{
  redirect_to_login():void{ // I haven't written this method yet 
  }
}
</script>

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Либо вы можете использовать: 

 <a @click="Redirect">
     <img src='IMAGE_SRC'  />
  </a>

или 

<img @click="Redirect" src='IMAGE_SRC'/>


new Vue({
            el: '#app',
            methods:
            {
               Redirect()
                  {
                     window.location.href = "https://jsfiddle.net/";

                     //or 

                      //this.$router.push('LINK_HERE'); // if ur using router
                  }
               }
      })

Демо-ссылка:

https://jsfiddle.net/snxohqa3/5/

0 голосов
/ 10 июня 2019

Есть ли причина, по которой вы не можете просто использовать обычное изображение HTML внутри своей кнопки? Я раньше не пользовался мопсом. 

<button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button

Хотя вы используете Vue, а не реальную HTML-форму, вам может даже не понадобиться кнопка, вместо этого вы можете просто добавить привязку клика к изображению 

<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />
...