官网按提供的插槽图片可以放在内容之后,但是我是想放在之前。

vant Cell单元格 图标放在内容之前

正常情况下,图片永远显示在文字的后面

vant Cell单元格 图标放在内容之前

 

           <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>

 

 得到如下效果

vant Cell单元格 图标放在内容之前

 

 一点点小小的调整,记录下来。

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-09-13
  • 2022-12-23
  • 2021-11-23
  • 2021-12-19
  • 2021-12-29
猜你喜欢
  • 2022-01-14
  • 2021-10-11
  • 2021-11-25
  • 2021-09-09
  • 2022-12-23
  • 2021-12-26
  • 2022-12-23
相关资源
相似解决方案