vue 修改vant样式之van-field中的图标，使用插槽方式

1、首先安装vant，安装方法点击查看

2、vant中的van-field中的插槽名称如下：具体地址点击进入

3、使用插槽说明：在app.vue中写入如下代码：

<template>
  <van-field v-model="text" label="文本" />
  <van-field v-model="mytext" class="my-edit">
    <template #left-icon>
      <i class="iconfont icon-bianji my-i"></i>
    </template>
  </van-field>
</template>
<script setup>
import {ref} from "vue";

const text = ref('你好呀')
const mytext = ref('我不是很好')

</script>

<style scoped lang="less">
:deep(.van-field__left-icon){
  border-right: 1px solid darkgray;
  .my-i{
    padding: 0px 20px;
  }
}
.my-test{
  width: 375px;
  background-color: deeppink;
  height: 50px;
}
.my_icon{
  font-size: 30px;
  background-color: pink;
}
</style>

其实使用方法就是在<van-field></van-field>字段内容直接写<template #上边的名称></template>这种具名插槽

显示结果如下：