Vue - 满意度调查评价功能,表情图片打分评分组件(非星星评分组件,类似抖音商品满意度好评、中评、差评评价功能)代码干净整洁注释详细无 BUG,无任何第三方插件依赖,完整功能实例源码插件
2023-09-11 14:15:54 时间
前言
网上的教程组件代码写的太多,而且功能不好用,主要都存在图片切换时 “闪烁” 的问题。
实现了 适用于 Vue.js / Nuxt.js 的表情图片满意度评价功能(评分组件),高效无 BUG 没有任何插件依赖,
本文示例代码干净整洁注释详细(代码极少且优雅完成功能),您只需要一键复制代码再把图片换了即可使用,
如下图所示,点击选择时自动切换图片,并且图片不会出现任何卡顿、闪烁的问题:
代码只完成了核心功能,您可以随意进行改造
示例源码
推荐使用一键复制功能,避免漏选。
随便找个新页面,一键复制运行起来查看效果。
<!--
1. 父组件引入时,请监听@result事件,这是用户选择的评价结果(具体请看代码,不需要的话请注释掉)
2. 请一定要看文章最后的【优化体验】小节,为了演示示例目前只能使用网络路径,还能再优化。
3. 本示例的图片可能随时失效,如失效请自行更换。
-->
相关文章
- Vue笔记:vue-router
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue_(Router路由)-vue-router路由的基本用法
- AutoMySQLBackup 3.0 Bug:"du: WARNING: use --si, not -H"
- Nokia S60真机的全屏getHeight()返回值BUG说明
- 【刷题】面筋-测开-如果开发认为测试出来的问题不是bug,怎么办
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- bug_ _ android.view.InflateException: Binary XML file line #2: Error inflating class <unknown
- 如何跟程序员谈一场没有Bug的恋爱
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- 一个典型的Vue应用的App.vue
- paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 如何从头到脚彻底解决一个MySQL Bug
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 程序员如何减少bug?
- 工作技能===开发不改bug?给你支个招
- Oracle 19c RAC 为了避免一些不必要的bug设定参数
- GIT学习----第十四节:BUG分支