mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge pull request #104 from chenjiahan/dev
Checkbox: support listen to change event
This commit is contained in:
neverland
GitHub
commit
fb768bbb4a
@ -45,8 +45,7 @@ Vue.component(Checkbox.name, Checkbox);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
|
||||
通过`v-model`绑定 checkbox 的勾选状态
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -187,14 +186,20 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| name | 根据这个来判断radio是否选中 | `Boolean` | `false` | - |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
|
||||
@ -133,19 +133,19 @@ Vue.component(Field.name, Field);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `string` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` |
|
||||
| placeholder | 输入框placeholder | `string` | | |
|
||||
| value | 输入框的值 | `string` | | |
|
||||
| label | 输入框标签 | `string` | | |
|
||||
| disabled | 是否禁用输入框 | `boolean` | `false` | |
|
||||
| error | 输入框是否有错误 | `boolean` | `false` | |
|
||||
| readonly | 输入框是否只读 | `boolean` | `false` | |
|
||||
| maxlength | 输入框maxlength | `string`, `number` | | |
|
||||
| rows | textarea rows | `string`, `number` | | |
|
||||
| cols | textarea cols | `string`, `number` | | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | `boolean` | `false` | `true`, `false` |
|
||||
| icon | 输入框尾部图标 | `string` | | icon中支持的类型 |
|
||||
| onIconClick | 点击图标的回调函数 | `function` | | |
|
||||
| type | 输入框类型 | `String` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` |
|
||||
| placeholder | 输入框placeholder | `String` | | |
|
||||
| value | 输入框的值 | `String` | | |
|
||||
| label | 输入框标签 | `String` | | |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | |
|
||||
| readonly | 输入框是否只读 | `Boolean` | `false` | |
|
||||
| maxlength | 输入框maxlength | `String`, `Number` | | |
|
||||
| rows | textarea rows | `String`, `Number` | | |
|
||||
| cols | textarea cols | `String`, `Number` | | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | `Boolean` | `false` | `true`, `false` |
|
||||
| icon | 输入框尾部图标 | `String` | | icon中支持的类型 |
|
||||
| onIconClick | 点击图标的回调函数 | `Function` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -11,13 +11,17 @@
|
||||
height: 100px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
|
||||
.van-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
display: none;
|
||||
font-size: 32px;
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
span {
|
||||
@ -28,7 +32,7 @@
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Icon } from 'packages';
|
||||
import { Icon, Col } from 'packages';
|
||||
|
||||
const icons = [
|
||||
'close',
|
||||
@ -108,16 +112,17 @@ const icons = [
|
||||
'coupon'
|
||||
];
|
||||
|
||||
Vue.component('van-icon-inner', Icon);
|
||||
Vue.component('van-icon', {
|
||||
props: ['name'],
|
||||
|
||||
const IconListConstructor = Vue.extend({
|
||||
components: {
|
||||
[Col.name]: Col,
|
||||
[Icon.name]: Icon
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<div>
|
||||
{icons.map(icon => (
|
||||
<van-col span="8">
|
||||
<van-icon-inner name={icon}></van-icon-inner>
|
||||
<van-icon name={icon}></van-icon>
|
||||
<span>{icon}</span>
|
||||
</van-col>
|
||||
))}
|
||||
@ -126,7 +131,17 @@ Vue.component('van-icon', {
|
||||
}
|
||||
});
|
||||
|
||||
export default {};
|
||||
export default {
|
||||
mounted() {
|
||||
const IconList = new IconListConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
const block = document.querySelector('.zan-doc-demo-block');
|
||||
if (block) {
|
||||
block.appendChild(IconList.$el);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Icon 图标
|
||||
@ -143,10 +158,9 @@ Vue.component(Icon.name, Icon);
|
||||
#### 基础用法
|
||||
|
||||
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
|
||||
|
||||
:::demo 基础用法
|
||||
:::demo 图标列表
|
||||
```html
|
||||
<van-icon name="success"></van-icon>
|
||||
<van-icon name="success" />
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -157,11 +157,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| loading | 加载时的图片 | `string` | | |
|
||||
| error | 错误时的图片 | `string` | | |
|
||||
| preload | 预加载高度的比例 | `string` | | |
|
||||
| attempt | 尝试次数 | `number` | `3` | |
|
||||
| loading | 加载时的图片 | `String` | | |
|
||||
| error | 错误时的图片 | `String` | | |
|
||||
| preload | 预加载高度的比例 | `String` | | |
|
||||
| attempt | 尝试次数 | `Number` | `3` | |
|
||||
| listenEvents | 监听的事件 | `Array` | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` | |
|
||||
| adapter | 适配器 | `Object` | | |
|
||||
| filter | 图片url过滤 | `Object` | | |
|
||||
| lazyComponent | 是否能懒加载模块 | `boolean` | `false` | |
|
||||
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | |
|
||||
|
||||
@ -40,5 +40,5 @@ Vue.component(Loading.name, Loading);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | 颜色 | `string` | `black` | `black` `white` |
|
||||
| type | 类型 | `string` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
| color | 颜色 | `String` | `black` | `black` `white` |
|
||||
| type | 类型 | `String` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
|
||||
@ -143,8 +143,8 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `number` | `44` | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `Number` | `44` | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
|
||||
| title | 在toolbar上显示的标题文字 | `String` | | |
|
||||
|
||||
@ -57,8 +57,8 @@ Vue.component(Progress.name, Progress);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否置灰 | `boolean` | `false` | |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
||||
| inactive | 是否置灰 | `Boolean` | `false` | |
|
||||
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `String` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `String` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |
|
||||
|
||||
@ -66,9 +66,15 @@ Vue.component(Quantity.name, Quantity);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| min | 最小值 | `string`, `number` | `1` | |
|
||||
| max | 最大值 | `string`, `number` | | |
|
||||
| step | 步数 | `string`, `number` | `1` | |
|
||||
| disabled | 是否被禁用了 | `boolean` | `false` | |
|
||||
| defaultValue | 默认值 | `string`, `number` | `1` | |
|
||||
| min | 最小值 | `String | Number` | `1` | - |
|
||||
| max | 最大值 | `String | Number` | - | - |
|
||||
| defaultValue | 默认值 | `String | Number` | `1` | - |
|
||||
| step | 步数 | `String | Number` | `1` | - |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| overlimit | 点击不可用的按钮时触发 | - |
|
||||
|
||||
@ -134,14 +134,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `Boolean` | `false` | |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
|
||||
@ -83,8 +83,8 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | `input`的`placeholder`文案 | `string` | | |
|
||||
| type | 搜索样式类型 | `string` | `normal` | `normal`：普通样式，`showcase`：微杂志页样式 |
|
||||
| placeholder | `input`的`placeholder`文案 | `String` | | |
|
||||
| type | 搜索样式类型 | `String` | `normal` | `normal`：普通样式，`showcase`：微杂志页样式 |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -135,8 +135,8 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| autoPlay | 是否自动轮播 | `boolean` | `false` | `true`, `false` |
|
||||
| showIndicators | 是否显示指示器 | `boolean` | `true` | `true`, `false` |
|
||||
| autoPlay | 是否自动轮播 | `Boolean` | `false` | `true`, `false` |
|
||||
| showIndicators | 是否显示指示器 | `Boolean` | `true` | `true`, `false` |
|
||||
|
||||
### 事件
|
||||
|
||||
|
||||
@ -158,7 +158,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
|
||||
| onChange | 开关状态切换回调(默认则改变开关状态) | `function` | - | - |
|
||||
| v-model | 开关状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| onChange | 开关状态切换回调(默认则改变开关状态) | `Function` | - | - |
|
||||
|
||||
@ -233,18 +233,18 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `string` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `string`, `number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `string` | | |
|
||||
| duration | 切换tab的动画时间 | `number` | `0.3` | | |
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | | |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
|
||||
|
||||
|
||||
### van-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `string` | | |
|
||||
| disabled | 是否禁用这个tab | `boolean` | `false` | |
|
||||
| title | tab的标题 | `String` | | |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
|
||||
@ -52,8 +52,8 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string` | `dataUrl` | `dataUrl`, `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean` | `false` | |
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `dataUrl`, `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
|
||||
| after-read | 文件读完之后回调此函数，参数为{file:'选择的文件',content:'读的内容'} | `Function` | | |
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled: function() {
|
||||
isWaterfallDisabled() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
@ -123,8 +123,8 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `function` | - | |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `function` | - | |
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `number` | `300` | |
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | |
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `String` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | |
|
||||
|
||||
|
||||
@ -31,22 +31,23 @@ export default {
|
||||
mixins: [findParent],
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {},
|
||||
disabled: Boolean,
|
||||
name: [String, Number]
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.$emit('change', val);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* `checkbox`是否在`van-checkbox-group`中
|
||||
*/
|
||||
// checkbox 是否在 van-checkbox-group 中
|
||||
isGroup() {
|
||||
return !!this.findParentByComponentName('van-checkbox-group');
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`当前值
|
||||
*/
|
||||
currentValue: {
|
||||
get() {
|
||||
return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
|
||||
@ -75,9 +76,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`是否被选中
|
||||
*/
|
||||
isChecked() {
|
||||
const currentValue = this.currentValue;
|
||||
if ({}.toString.call(currentValue) === '[object Boolean]') {
|
||||
@ -87,9 +85,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`是否被禁用
|
||||
*/
|
||||
isDisabled() {
|
||||
return this.isGroup && this.parentGroup
|
||||
? this.parentGroup.disabled
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user