首页 > 其他分享 >vue vant rate评分组件无法点击取消归零功能处理

vue vant rate评分组件无法点击取消归零功能处理

时间:2023-03-12 12:13:04浏览次数:39  
标签:vue vant validClick rate timer 点击

// 通过监听点击事件去判断是否触发change事件,如果没有则说明数据没变化
<van-rate v-model="modelValue" :disabled="!conf.isEditText" disabled-color="rgba(0,86,255,0.5)" :allow-half="conf['allow-half']" color="#0056FF" @change="changeRate" @click.native="changeValue" />

  methods: {     changeRate() {       this.validClick = true       this.timer && clearTimeout(this.timer)       this.timer = null     },       changeValue() {       if(this.validClick) {         this.validClick = false         return       }       this.timer = setTimeout(() => {         this.modelValue = undefined       }, 80)     }   }

标签:vue,vant,validClick,rate,timer,点击
From: https://www.cnblogs.com/zerofan/p/17207933.html

相关文章

  • VueRouter路由与Vuex状态管理
    路由的基本搭建与嵌套路由模式vue路由的搭建路由在vue中属于第三方插件,需要下载安装后进行使用。版本说明一下,Vue3搭配的是VueRouter4,目前正常安装的话,就是路由4的版本......
  • Vue项目学习
    统一样式/*清除内外边距*/body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,th,td{......
  • vue常用库整理
    富文本wangeditor官网:wangeditor日期处理类moment.js官网:moment.jscss样式重置normalize.css官网:normalize.csssvg图标svg-sprite-loader安装依赖 npminstal......
  • vue项目vuerouter动态添加路由坑中之坑
    出了什么问题请求到的动态路由数据该如何应用?addRoute()?你想的太简单了!!!起因最近在用通过网络请求到的路由记录来进行动态路由渲染后端大佬说路由全部放前端不......
  • vue3 + vite 分析报告 report == rollup-plugin-visualizer
    安装插件 npmirollup-plugin-visualizer-D 配置vite.config.js文件【加入插件】import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'......
  • Day05-Vue脚手架
    Vue脚手架学习目标:理解Node.js基本使用方法理解包资源管理器NPM的使用理解webpack的作用理解vue-cli脚手架(重点)Element-UI组件库1.vue的格式: newVue({......
  • vue3-vite-cesium
     cesium中文网http://cesium.xin/ 优秀的学习资源http://cesium.xin/wordpress/archives/130.html  vite-plugin-cesiumvite社区插件安装cesiumhttps://git......
  • Day03-vue&es6新语法(高级)
    vue的学习网站:https://www.runoob.com/vue2/vue-tutorial.html回顾#1.ajax:完成页面局部刷新,异步交互。#2.axios发送ajax异步请求: 1)引入库<scriptsrc=""></script>......
  • vue&element项目实战
    1.背景2.项目模板2.1.开源模板项目下载与启动课程中使用的模板是实际开发中用得比较多的后端管理项目模板  拉取与下载方式#vue-admin-template#克隆项目gi......
  • vue&element项目实战 之api模块化与公共字典
    4.api模块化配置步骤一:编写字典api即dic.jsimportrequestfrom'@/utils/request'//查询字典列表exportconstgetDicList=(param)=>request({url:'/sys-dic......