实习日记 03 写下拉多选组件
侧边栏壁纸
  • 累计撰写 22 篇文章
  • 累计收到 1 条评论

实习日记 03 写下拉多选组件

admin
2022-06-02 / 0 评论 / 10 阅读 / 正在检测是否收录...

使用vant写一个下拉多选的框架,如图(第一次写组件)

l3woq75l.png
组件看着很简单,以为自己可以很快搞定,没想到出现了很多问题!
观察样图后觉得就是简单的下拉框,然后vant官网查找样式直接使用,遇到了第一个问题:我使用的vant没有样式,仅仅能识别成最简单的结构。后查找发现是样式没导入成功,因为是看着公司项目中的导入方式进行的导入,但是少导入了一些东西,所以一定要看官网的官方教程!
具体实现思路:

  1. 选项的展示:官网的是使用了自闭和的<van-dropdown-item/>标签,在其中使用options绑定需要展示的每一项,但是这样只能单选。可以将自闭和标签写分开即xxx<van-dropdown-item/>形式,这样可以在中间写多个div,在使用v-for循环将数据全部展示出来。多选是在每个数据对象添加一个是否勾选的属性。
  2. 事件:点击事件一:更改选中状态 点击事件二、三(重置、完成):for in循环遍历判断勾选状态
  3. 样式:vant可以使用less样式进行快捷更改,要对less样式进行学习!

最终自己实现效果

l3wonk6t.png
具体样式慢慢改!

两天的主要任务就是这个组件和写一个用户使用手册。

0

评论 (0)

取消