vue.jsを使用してボタンをアイコンに置き換える方法

Question

ボタンの代わりにアイコンまたはイメージを挿入します。 "input type =" file "を取ったので、このボタンをアイコンとして作ることはできません。divボーダー内に（+アイコン）を追加する方法はありますか？その場合、+記号を押すと、 。写真をアップロードすることができるはず

<q-field 
        > 
        <img :src="image" class="user-image" @click="onFileChange"/> 
        <div v-if="!image"> 
         <input type="file" @change="onFileChange"> 
        </div> 
         <div v-else><q-btn icon="delete" color="secondary" round small @click="removeImage"/> 
        </div> 
        </q-field> 

ここにあなたが持っているカスタムボタンを使用して、既定のボタンを置き換えるために私のスクリプト

methods: { 
onFileChange (e) { 
    alert('hema') 
    var files = e.target.files || e.dataTransfer.files 
    if (!files.length) { 
     return 
    } 
    this.createImage(files\[0\]) 
    }, 
    createImage (file) { 
    var reader = new FileReader() 
    var vm = this 
    reader.onload = (e) => { 
     vm.image = e.target.result 
    } 
    reader.readAsDataURL(file) 
    }, 
    removeImage: function (e) { 
    this.image = '' 
    } 
} 

Answer 1

さ：

1. は、デフォルトの入力を非表示にします。
2. カスタムボタンをテンプレートに追加します。
3. カスタムボタンをクリックすると入力が開きます。テンプレートで

：あなたの方法で

<q-field> 
    <img :src="image" class="user-image" @click="onFileChange"/> 
    <div v-if="!image"> 
    <input type="file" @change="onFileChange" class="hidden"> 
    <!-- your custom button or image or any thing else --> 
    <q-btn icon="add" color="primary" round small @click="browse"/> 
    </div> 
    <div v-else> 
    <q-btn icon="delete" color="secondary" round small @click="removeImage"/> 
    </div> 
</q-field> 

：

methods: { 
    browse() { 
    document.querySelector('input[type=file]').click() 
    } 
}