Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 添加auto-fill属性 #47

Merged
merged 5 commits into from
Sep 10, 2019

Conversation

donaldshen
Copy link
Contributor

@donaldshen donaldshen commented Sep 6, 2019

Why

有项目不要自动填充的功能

How

一、抽离纯函数到utils

方便添加测试和理解函数用途;简化vue文件

二、变values为计算属性

indexes是选中的索引;values是选中的值。这两个需要同时维护,非常容易出错。
这里将values变为indexes的计算属性。只需要维护indexes即可,简化大量代码

三、添加autoFill属性

这个属性其实影响了两个功能:

  1. 关闭自动补全
  2. 只保留一个未选项。即:
    a. 都没选时,只有一个省选择框
    b. 选了省,则多一个市选择框
    c. 选了市,则多一个区选择框
    d. 此时重新选省,则区选择框消失,只剩市选择框

但目前项目同时需要这两个功能,这里先把它们都归于autoFill属性
当设置autoFill为false时,会影响两处:

  1. displayColumns会同时受“只保留一个未选项”和level属性的影响,取较小值
  2. 用户选择省、市时,不会自动选择下一项(市、区)

但此时出现了bug,经排查是setValue的问题

四、整理setValue逻辑

这个函数本质是将value里的省、市、区值,反映到三个选择框的可选项和已选中项

  1. 设置省列表
  2. 判断value中“省”的code是否合法
    a. 如果不合法,设置市、区列表为空,设置省、市、区选中项为空。函数立即return
    b. 如果合法,设置省选中项,设置对应市列表,并继续
  3. 判断“市”code是否合法
    a. 如果不合法,设置区列表为空,设置市、区选中项为空。函数立即return
    b. 如果合法,设置市选中项,设置对应区列表,并继续
  4. 判断“区”code是否合法
    a. 如果不合法,设置区选中项为空
    b. 如果合法,设置区选中项

逻辑整理完毕,也就fix #46

Test

auto-fill
image

  1. yarn test通过
  2. 在preview中,测试所有案例运行正常,v-model正常
  3. 测试边角情况:auto-fill与level共存;与默认值共存
  4. gif发给项目成员,得到认可

Docs

新增auto-fill文档和示例

@auto-add-label auto-add-label bot added the enhancement New feature or request label Sep 6, 2019
@netlify
Copy link

netlify bot commented Sep 6, 2019

Deploy preview for el-select-area ready!

Built with commit 3290204

https://deploy-preview-47--el-select-area.netlify.com

@donaldshen
Copy link
Contributor Author

image
已在项目中验证

src/utils.js Outdated
@@ -0,0 +1,21 @@
export function isCode(value = '') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

补充一下注释,说明函数做啥的,以及目前存在的缺陷

@levy9527 levy9527 merged commit 7b97120 into FEMessage:dev Sep 10, 2019
@donaldshen donaldshen deleted the feature/custom-select branch September 10, 2019 09:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants