Skip to content

修改一些问题 #21

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions src/components/form/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,45 @@ new Vue({
}
})
```
## 跳过组件验证

在复杂的业务场景下,我们自定义了一些表单组件以便于组件的复用,我们在自定义组件中做了验证规则,然后我们在各处调用该组件,但在某些场景下调用该组件并不需要执行验证操作,这时我们可以添加skipValidate属性来跳过本次组件的验证功能

```html
<c-form @submit.prevent="onSubmit" ref="form">
<c-form-item label="用户名:" required>
<c-input v-model="username" :rules="rules" />
</c-form-item>
<c-form-item label="密码:" required>
<c-input v-model="password" skipValidate :rules="rules" />
</c-form-item>
<c-button type="submit" primary>提交</c-button>
</c-form>

<script>
export default {
data () {
return {
password: '',
username: '',
rules: {
customFunction: () => {
return {
valid: false,
msg: '未通过验证'
}
}
}
}
},
methods: {
onSubmit () {
return this.$refs.form.isValid()
}
}
}
</script>
```

## 属性说明

Expand Down
5 changes: 4 additions & 1 deletion src/components/select/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -491,20 +491,23 @@ export default {
某些场景下,你会需要根据用户的输入从服务器端获取相关选项。你可以指定 `filter` 函数返回一个 `Promise` 即可。使用 `filter` 函数时,可以通过 `filterThrottle` 指定最小触发间隔,其默认值为 `0`。

```html
<!-- multiple -->
<c-select
v-model="choice"
:options="options"
:filter="search"
:filterThrottle="1000"
autocomplete
@change="onChange"
multiple
>
</c-select>

<script>
const rdn = _ => Math.random().toString(36).substr(-3)
let num = 0
const defaultOptions = ['option 1', 'option 2', 'option 3']
.map(value => ({label: value, value}))
.map(value => ({label: value, value: num++}))
export default {
data () {
return {
Expand Down
7 changes: 6 additions & 1 deletion src/components/select/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,9 @@ export default {
selectedValues () {
return this.selectedOptions.map(option => option.value)
},
selectedLabel () {
return this.selectedOptions.map(option => option.label)
},
showPlaceholder () {
const empty = !this.selectedOptions.length
return empty && !this.isOpen
Expand Down Expand Up @@ -502,7 +505,9 @@ export default {

emitChange () {
const value = this.multiple ? this.selectedValues : this.selectedValues[0]
this.$emit('change', value)
const label = this.multiple ? this.selectedLabel : this.selectedLabel[0]
console.log(value, label)
Copy link
Contributor

Choose a reason for hiding this comment

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

console 去掉。。。

this.$emit('change', value, label)
}
}
}
Expand Down
7 changes: 4 additions & 3 deletions src/scripts/mixins/validatable/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export default {
validateThrottle: {
type: Number,
default: 0
}
},
skipValidate: Boolean
Copy link
Contributor

Choose a reason for hiding this comment

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

建议遵守“动词+名词”的命名规则。skipvalidate 都是动词。
PS ——

  1. validateThrottle这个属性,“名词+动词”,很拗口,以后尽量避免。
  2. 怎么解决这个问题呢?validateThrottleTime 太长,throttleTime 似乎又不能完全体现其作用。所以,是不是把所有和 validate 这一行为相关的属性,统一到一个 Object 下面更好?

},

data () {
Expand All @@ -26,7 +27,7 @@ export default {
msg: '',
dirty: false
},
isValidatable: true,
isValidatable: !this.skipValidate,
// id of the latest validation
validationId: 0
}
Expand Down Expand Up @@ -83,7 +84,7 @@ export default {
validate () {
this.validity.dirty = true
const { $formItem, builtinRules } = this
const required = $formItem && !this.$parent.isValidatable && $formItem.required
const required = $formItem && !this.$parent.isValidatable && $formItem.required && this.isValidatable
const rules = Object.assign({ required }, builtinRules, this.rules)
if (!rules.msg) rules.msg = {}
if (typeof rules.msg === 'object' && !rules.msg.required) {
Expand Down