vant实现评论笑脸表情

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

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-slottext="文字"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>

实现的效果:

vant实现评论笑脸表情相关推荐

富文本编辑器---笑脸表情（一）
这部分是利用iframe实现我们的富文本编辑器.上面提到激活编辑模式有两个方法,contentEditable="true"与designMode="On".c ...
android 评论发表情,安卓手机怎么在微信朋友圈评论发表情包？
核心提示:目前,微信的最新版本更新了朋友圈评论表情包的功能,也就是说用户可以朋友圈开启"斗图模式"啦!但是有些安卓系统的小伙伴发现,自己更新了微信后似乎也不能在朋友圈发评论,具体是 ...
[深度学习 - 发现有趣项目] masking-gan 人脸生成笑脸表情
参考代码来源于:https://github.com/tgeorgy/mgan 人脸生成笑脸表情 1.有趣的项目之前没事会经出翻github看项目,也会发现很多有趣的项目.迫于没什么时间,就过一眼就 ...
怎么用matlab画一个笑脸,基于pca特征提取的笑脸表情识别代码（语言工具为matlab）...
[实例简介] 基于pca特征提取的笑脸表情识别代码,语言工具为matlab [实例截图] [核心代码] 表情识别 └── 表情识别 ├── 3.jpg ├── a2.jpg ├── air_dir.m ...
python画笑脸表情_用Matplotlib，妈妈再也不担心我没有表情包斗图了
全文共3003字,预计学习时长6分钟 Netflix.Instagram.YouTube.电影还有电视剧,这些都有什么共同之处呢?它们都是视觉媒介,吸引着形形色色的观众. 今时今日,大部分人逐渐放弃读 ...
用卷积神经网络实现笑脸、非笑脸表情识别
文章目录一.相关介绍二.准备工作 1. 环境搭建 2. 数据集准备三.图片预处理四.划分数据集五.创建模型六.测试七.总结八.参考链接摘要:在日常的沟通与交流过程中,运用面部表情可以 ...
IOS版微信新功能！朋友圈评论支持表情包
12月23日消息,新版微信支持使用表情包来评论朋友圈内容. 为了查看消息真伪去微博搜索了一下,对此,腾讯公关总监张军在微博予以确认. 朋友圈的斗图大赛已经悄然开始了,目前iOS版微信更新到7.0.9后 ...
python画笑脸表情_关于Python：Python-用ASCII字符替换unicode表情符号
我当前的一个周末项目有一个问题. 我正在编写一个Python脚本,该脚本从不同的来源获取一些数据,然后将所有内容吐给esc-pos打印机. 您可能会想到pos打印机与emoji表情不完全一样... 所 ...
html评论输入表情,HTML带表情的评论框
HTML带表情的评论框,表情通过Json数据加载,可以根据自己的喜好改变表情.本评论框代码为HTML,CSS,JQ三个方面的代码. 效果图: Html确定 CSS.Input_Box { width: ...

vant实现评论笑脸表情

vant实现评论笑脸表情相关推荐

最新文章

热门文章