刻度尺组件vue-scale，并绑定输入框

一、安装

npm i vue-scale -S

二、引入

三、使用
首先，了解一下vue-scale的一些API：

接着，开始使用：其中用到:key="countKey"，当我们需要重新渲染组件时，只需要更新key的值即可，这个属性可以实现刻度尺与输入框绑定。

<div><v-row><v-col cols="12"><vue-scale-swiper :key="countKey" flip-vertical :mask="false" v-model="count" :interval="9" style="touch-action: none" :max="70" ></vue-scale-swiper></v-col></v-row><v-row><v-col class="p-t-10" cols="12" align="center"><v-text-field @keydown="inputCount($event)" color="grey" style="font-weight: bold;font-size: 20px; width: 100px"  prepend-inner-icon="null" v-model="counts" dense outlined  type="number" ></v-text-field></v-col></v-row>
</div>

watch: {count (val) {this.counts = val}
},
methods: {inputCount ($event) {if ($event.keyCode === 13) {this.count = Number(this.counts)this.countKey += 1}}
}

别忘了组件初始化的时候也要给countKey赋值，否则刻度尺的value还是上次渲染时的值：

四、效果图

五、以上效果还存在一定的问题：在滑动时可以选到超出刻度范围的情况(它会弹回到min或max值)，而在刻度值0左边的值不显示负数。要解决上述问题，需采用patch-package手动修改node_modules中的依赖包：
①安装patch-package

npm install patch-package --save-dev

②修改项目根目录下的package.json文件

"postinstall": "patch-package"

③手动修改node_modules依赖包中的源码
首先，找到node_modules文件夹中的vue-scale文件夹，再找到其目录下的package.json文件，找到"main"所指的入口文件

该依赖包的入口文件就是component文件夹下的index.js文件，我们找到它进行修改，将

r=Math.abs(n*this.ratio)+this.min;

改为

r=(-1)*(n*this.ratio)+this.min;

④修改完成后，手动执行命令npx patch-package package-name创建补丁文件，其中命令中的 package-name指的是被修改的依赖包的名字(不是被修改的文件的名字)，例如，我们应该执行命令：

npx patch-package vue-scale

执行完成后会在项目根目录中自动创建一个patches文件夹，该文件夹中会出现一个补丁文件：

⑤生成补丁文件后，还需要执行命令：

npm install

重新安装依赖后，查看node_modules依赖包中的文件是否是修改后的代码，如果是，则表明补丁文件已生效。
⑥效果图：

刻度尺组件vue-scale，并绑定输入框相关推荐

vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中,我们有涉及到要从子组件中把数据传递给父组件,当时我用的方法是,让父组件给子组件传递一个函数,然后子组件把要传过来的数据放在那 ...
vue：组件自定义事件、绑定、解绑事件
vue:组件自定义事件.绑定.解绑事件自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...
Vue之组件间的双向绑定
何为组件间双向绑定我们都知道当父组件改变了某个值后,如果这个值传给了子组件,那么子组件也会自动跟着改变,但是这是单向的,使用v-bind的方式,即子组件可以使用父组件的值,但是不能改变这个值.组件间 ...
uniapp 扫描枪获取条码不全解决办法，vue组件，使用双向绑定，回车事件触发，获取文本不全问题
原因分析: uniapp使用vue,双向绑定组件,在input标签loop事件循环获取文本的过程中,读取文本信息不是顺序读取,如果条码中包含了回车键,比如扫描枪,扫描文本后会追加回车键,监控文本读取还 ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
Vue组件+Vue动画
目录 Vue选项自定义指令过滤,管道filters 全局组件局部组件 props传递参数 props细节组件传参父传子组件传值总结组件的插槽(嵌套) 具名插槽弹框组件的使用htt ...
深入理解vue.js双向绑定的实现原理
vue.js是MVVM(模型到视图和视图到模型)结构的,同类的还有AngularJs:至于MVC.MVP.MVVM的比较网上已经有很多了,这样不再重复.这篇文章将给大家深入的介绍vue.js双向绑定的 ...

刻度尺组件vue-scale，并绑定输入框

刻度尺组件vue-scale，并绑定输入框相关推荐

最新文章

热门文章