[笔记] Vuetify 客制化制作弹出 + 滚动选单

章节连结

Vuetify 的 Selection 部分,虽说是节省了建立下拉选单的时间,不过这回遇上要客制化的场合,那么就得抽丝剥茧,将所需要的功能、程式码和CSS取出。
vuetify


实作过程

[CSS]

静态部分

1. dark 和 light 两种模式的颜色有不同,你可以绑订参数。同时,你会发现要绑定的样式条件很多,不适合全部写在 <template> 中,会让维护难度增加。(关键字:v-bind-class, computed)
2. 下拉选单需要用到 position:absolute 来让它相对浮动,不过要设定最大高度和 overflow:auto,这样才不会破版

动态部分

运用 transition:决定动画秒数和移动方向
运用 transform:决定文字移动位置和缩放比例

[其他部分]

1. 为了方便组件的值共用,运用 vuex 是必须的。你可以将最后的选取结果存放到 vuex 里面,然后让 filter 的主字段里显示选取结果就好
2. 各个选项的值,其 “X” 取消部分,可以运用 splice 的方法来删除即可。不过你不能直接删改 vuex 的值,但你可以先将其复制一份之后,再写入删除后的结果到 vuex 就好
3. 当有了前一次的选取结果后,当使用者再度点开选单,你可以监听这个值,并把这些值放回对应的 model 中,这样一来就会有“保留使用者前一次”选取结果的效果 (运用 watch )


Demo 网址

[网址]:https://codesandbox.io/s/custom-filter-with-dropdown-vuetify-114-y6x6d


相关文章

★全文分享★  [笔记] Vuetify + Babel + Vue.config.js 最佳化实践
[笔记] Vuetify + Babel + Vue.config.js 最佳化实践
Vue 搭配 Vuetify 建立专案,在最后打包 Build 的过程中,会有一系列的调教设定过程。这其中包含了 Babel (浏览器向下相容) 、Tree-Shaking (按需加载) 和打包细项 ( Vue-Cli 以 Webpack 为基础,让打包编译变
★全文分享★  [笔记] Vuetify Expansion 客制标题按钮
[笔记] Vuetify Expansion 客制标题按钮
Vuetify 的 Expandsion 套件,对于制作展开选单的需求,可以立即套用。不过在其客制化标题上,要在标题左边加上一些东西(例如 icon, 按钮……)等,只要运用 slot=”header” 的特性,就可以达成。实作过程


按赞加入粉丝团

延伸阅读