vue左右循环滑动_前端开发思路超详解（Vue组件篇）

其实不管是什么框架&＃xff0c;在开发中都有一些比较常规和通用的东西&＃xff0c;那就是思想&＃xff0c;接下来我将从以下三个点并基于vue开发一个Slider&＃xff08;滑条&＃xff09;组件&＃xff0c;在这里我默认大家都会基本使用vue&＃xff0c;若对vue相关概念还不是很清楚的可以转到&＃xff0c;知乎的文档展示貌似对markdown不是很友好&＃xff0c;大家可以直接转到Bennnis/slider查看文档

概览

步骤
1. 组件抽象 (api设计)
2. 页面实现 (组件的html实现和css样式&＃xff09;
3. 建立关联 (组装)
项目构建
这里我们使用TUI-CLI快速搭建构建项目

我们只需要关心src下的App.vue和components目录即可- src- App.vue- components/
一.组件抽象

首先在开发之前&＃xff0c;我们需要对组件进行一个抽象操作&＃xff0c;不需要关心页面如何去实现。
如何去抽象&＃xff1f;很简单&＃xff0c;两个点&＃xff0c;属性和方法&＃xff0c;比如我们现在抽象一个人&＃xff1a;
1. 属性&＃xff1a;身高&＃xff0c;体重&＃xff0c;爱好&＃xff0c;头发颜色&＃xff0c;脚的尺寸等等
2. 方法&＃xff1a;吃饭&＃xff0c;说话&＃xff0c;打游戏&＃xff0c;敲代码等等
我们再来抽象一个灯泡&＃xff1a;
1. 属性&＃xff1a;亮度&＃xff0c;灯的颜色&＃xff0c;灯的形状&＃xff08;圆的&＃xff0c;细长的&＃xff09;&＃xff0c;灯的耗能等待
2. 方法&＃xff1a;开&＃xff0c;关 &＃xff08;当然这里还可以抽象成一个方法&＃xff0c;就是“切换”&＃xff09;
抽象的程度决定了代码的复杂度和拓展性
好了言归正传&＃xff0c;现在我们要抽象一个滑条组件需要怎么做呢&＃xff1f;按我们上面的顺序来试试&＃xff0c;在这里我们能想到多少就写多少&＃xff0c;功能设计上有考虑不足是很正常的&＃xff0c;因为我确实就没想到啊&＃xff01;不过没关系&＃xff0c;我们先试试
1. 属性&＃xff1a;宽度&＃xff0c;填充色&＃xff0c;打底色&＃xff0c;最大值&＃xff0c;最小值&＃xff0c;单位值&＃xff0c;当前选中值
2. 方法&＃xff1a;改变值方法
好了&＃xff0c;我现在就想到这些&＃xff0c;先试试看呢&＃xff01;在设计api的时候也要考虑好属性的类型和初始值&＃xff0c;比如这里这里的min和max还有value&＃xff0c;我们严格要求成数字&＃xff0c;并默认min为0&＃xff0c;max为100&＃xff0c;value为0
ps&＃xff1a;如果用户传入了对应的属性值&＃xff0c;那default将会被覆盖
在components目录下新建一个 slider.vue 文件&＃xff0c;并添加以下代码

二.页面实现

页面实现实际上去实现页面元素的布局&＃xff0c;当然在写代码之前我们也可以做一下简单的页面元素的抽象。一个滑条由什么元素组成呢&＃xff1f;

1. 一个类进度条&＃xff08;拥有背景元素和填充元素&＃xff09;
2. 一个可左右拖动的触发元素。

话不多说上代码

至此&＃xff0c;我们的滑条组件的页面基本构造已经完成了。接下来我们将组件注册并在页面使用即可&＃xff0c;看看接下来我们会遇到什么问题。

我们在App.vue引入slider组件或者使用Vue.component()全局注册&＃xff0c;具体用法请参照Vue官方文档

修改App.vue为下列内容 &＃xff08;本例结合TUI组件库的部分组件进行页面的快速布局&＃xff0c;TUI-CLI自动安装好了TUI&＃xff0c;想了解更多请见Bennnis/TUI 喜欢的话顺便给个 star 哦&＃xff01;)

三.组装
我们在页面上注册并使用了 组件&＃xff0c;接下来我们需要做什么呢&＃xff1f;既然是输入组件&＃xff0c;那双向绑定自然是少不了的。
ps:
* outM: 组件外部Model
* outV: 组件外部View
* inM: 组件内部Model
* inV: 组件内部View
对于这种输入组件我的开发思路一般是&＃xff1a;
1. outM ↔ inM
2. outM ↔ outV&＃xff0c; inM ↔ inV
### 1.outM ↔ inM
实现第一步&＃xff0c;组件外部Model->组件内部Model&＃xff0c;修改App.vue

再实现第二步&＃xff0c;组件内部Model->组件外部Model, 修改slider.vue&＃xff0c;这里并没有涉及到view的操作&＃xff0c;我们下面会继续分析

是不是很简单&＃xff1f;outM ↔ inM实现完成。
那接下来我们继续拓展
outM ↔ inM &＃61;> outV ↔ outM, inM ↔ inV
其实能走到这里后面的开发问题都不大了&＃xff0c;只需要Model和View建立关联即可
我们从 inM ↔ inV 开始
### 2. M ↔ V
#### 1. inM -> inV
我们首先要靠考虑我们需要在视图上怎么去展现&＃xff0c;不同于input组件&＃xff0c;slider组件的展现形式更像是一个进度条&＃xff0c;那我们肯定就要通过一些特殊操作了。
数据流向&＃xff1a;M -> width -> V &＃xff08;通过value计算出一个width相关值并在视图上去设置样式&＃xff09;
我们修改一下slider.vue中的 "demo-slider__cover-line",并添加计算 “进度” 的属性coverPercent

打开看看&＃xff0c;好像漏了点什么&＃xff0c;触发按钮好像也需要根据值的改变而改变位置&＃xff0c;我们再修改一下"demo-slider__trigger"

庆祝一下&＃xff0c;inM -> inV 完成&＃xff0c;您可以手动改变value的绑定值来看一下效果
### 2. inV -> inM
对于slider组件来说&＃xff0c;比较普遍的操作当然就是拖动触发按钮改变值了&＃xff0c;或者直接点击under-line的某个位置改变值。这里我们从 "点击改变" 开始讲。

点击操作就已经完成了&＃xff0c;我们的 inV -> inM 也拼接好了&＃xff0c;其实到这里&＃xff0c;咱们的组件也开发得差不多了&＃xff0c;最后我们一起来实现一下拖动按钮改变值。原理大概分为以下几步
1. 鼠标按下&＃xff08;触发按钮&＃xff09;&＃xff1a;mousedown
2. 鼠标移动&＃xff08;任意位置&＃xff09;&＃xff1a;mousemove, 这里我们可以把每一次细微的改变都看成一次直接跳转&＃xff0c;只是距离足够小&＃xff0c;改变足够快&＃xff0c;看起来就像在滑动&＃xff0c;直接复用jumpAhead方法。但是这里有个问题&＃xff0c;因为鼠标移动可能在页面的任何地方&＃xff0c;所以需要在window上添加mousemove的监听&＃xff0c;并在鼠标放开时移除即可
3. 鼠标放开&＃xff08;任意位置&＃xff09;&＃xff1a;mouseup
直接贴代码了

拖动的时候可能会超出宽度范围&＃xff0c;没关系&＃xff0c;我们在setValue方法上限制一下即可

至此&＃xff0c;我们的slider组件就开发完成了&＃xff0c;大家也可以试试传入其他值不仅仅是value。对了&＃xff0c;上面还有几个属性没有组装哦&＃xff0c;小伙伴们可以尝试一下&＃xff0c;接着我的demo继续往下做&＃xff0c;看能不能开发出更实用或者更有趣的功能。
源码已上传至 Github

再次贴上个人开发的组件库&＃xff08;您的star和issue是对我最大的支持&＃xff09;

非常感谢您能看完这篇文章&＃xff01;