官網按提供的插槽圖片可以放在內容之后,但是我是想放在之前。
正常情況下,圖片永遠顯示在文字的后面
<div class="item-box"> <van-cell title="銀行" :value="checkBank.bankName"> <template #right-icon> <img :src="bankBg" class="bank-img"/> </template> </van-cell> <van-button class="but-copy" size="small" type="info" v-clipboard:copy="bankInfo.bankId" v-clipboard:success="onCopy" v-clipboard:error="onError" > 復制 </van-button> </div>
為了把圖片改到前面,把顯示的內容做了一點點調整
<div class="item-box"> <van-cell title="銀行"> <template #right-icon> <img :src="bankBg" class="bank-img"/> <span class="name">{{ checkBank.bankName }}</span> //把value的內容放到圖片之后 </template> </van-cell> <van-button class="but-copy" size="small" type="info" v-clipboard:copy="bankInfo.bankId" v-clipboard:success="onCopy" v-clipboard:error="onError" > 復制 </van-button> </div>
得到如下效果
一點點小小的調整,記錄下來。