vant实现评论笑脸表情

最新推荐文章于 2023-07-21 22:20:57 发布

香草味糖葫芦

最新推荐文章于 2023-07-21 22:20:57 发布

阅读量687

点赞数

分类专栏： vant 文章标签： html

本文链接：https://blog.csdn.net/u013682258/article/details/120199853

版权

vant 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

找文档没有找到自己想要的效果.索性自己写.

1.先找美工设计好笑脸图片.

有选中的,有未选中的.

代码:定义好列表方便循环.

cardList: [
        {
          code: "满意",
          IcUrl: require("@/assets/repair/my.png"),
          IcUrlNo: require("@/assets/repair/myNo.png"),
          value: 5
        },
        {
          code: "较满意",
          IcUrl: require("@/assets/repair/bjmy.png"),
          IcUrlNo: require("@/assets/repair/bjmyNo.png"),
          value: 4
        },
        {
          code: "一般",
          IcUrl: require("@/assets/repair/yb.png"),
          IcUrlNo: require("@/assets/repair/ybNo.png"),
          value: 3
        },
        {
          code: "比较差",
          IcUrl: require("@/assets/repair/bjc.png"),
          IcUrlNo: require("@/assets/repair/bjcNo.png"),
          value: 2
        },
        {
          code: "差",
          IcUrl: require("@/assets/repair/c.png"),
          IcUrlNo: require("@/assets/repair/cNo.png"),
          value: 1
        }
      ],

循环代码:(都有注释,一看就懂)

<van-grid gutter="0rem"
                column-num="5"
                :border="false"
                square>
        <!-- for循环 -->
        <van-grid-item use-slot
                       text="文字"
                       v-for="(i,index) in cardList"
                       :key="index">
          <!-- 引入单选组件，选择结果为radio -->
          <van-radio-group @change="dianjis" v-model="radio"
                           class="cardBorder">
            <div class="select">
              <!-- 选择结果为i.code -->
              <van-radio style="height:40px;" @click="dianji" :name="i.value"
                         id="radio">
                <!-- 用template插槽自定义图标 -->
                <template #icon="props">
                  <!-- checked是单选按钮自带属性，值为true和false -->
                  <!-- activeIcon:选择图标、inactiveIcon:未选择图标 -->
                  <img style="width:30px;height:30px;" class="img_icon"
                       :src="props.checked ? i.IcUrl : i.IcUrlNo" />
                </template>
              </van-radio>
            </div>
            <div style="text-align:center" class="content_div">
              <img style="width: 0.1rem;height:0.1rem;margin-left:-7px;"
                   :src="i.src" />
               <span style="font-size:10px;" >{{i.code}}</span> 
            </div>
          </van-radio-group>
        </van-grid-item>
      </van-grid>

实现的效果: