Commit 01156d43 authored by wlxuqu's avatar wlxuqu

1. 优化search组件的maxlength下的问题

2. 修复radio组件的change时间不触发的问题
parent 15f867f9
......@@ -6,7 +6,7 @@
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsC/test/index", //启动页面,必选
"path": "pages/componentsB/search/index", //启动页面,必选
"query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
}]
},
......
<template>
<view class="">
<u-radio-group v-model="value" @change="radioGroupChange">
<u-radio
@change="radioChange"
<u-checkbox-group @change="checkboxGroupChange">
<u-checkbox
@change="checkboxChange"
v-model="item.checked"
v-for="(item, index) in list" :key="index"
:name="item.name"
:disabled="item.disabled"
>
{{item.name}}
</u-radio>
</u-radio-group>
>{{item.name}}</u-checkbox>
</u-checkbox-group>
<u-button @click="checkedAll">全选</u-button>
</view>
</template>
......@@ -19,30 +18,37 @@ export default {
return {
list: [
{
name: 1,
name: 'apple',
checked: false,
disabled: false
},
{
name: 2,
name: 'banner',
checked: false,
disabled: false
},
{
name: 3,
name: 'orange',
checked: false,
disabled: false
}
],
// u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
value: 1,
]
};
},
methods: {
// 选中某个单选框时,由radio时触发
radioChange(e) {
// console.log(e);
// 选中某个复选框时,由checkbox时触发
checkboxChange(e) {
console.log(e);
},
// 选中任一radio时,由radio-group触发
radioGroupChange(e) {
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
// 全选
checkedAll() {
this.list.map(val => {
val.checked = true;
})
}
}
};
......
......@@ -183,11 +183,7 @@
},
emitEvent() {
// u-radio的name不等于父组件的v-model的值时(意味着未选中),才发出事件,避免多次点击触发事件
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
// 头条需要延时的时间比较长,这里给比较大的值
setTimeout(() => {
if(this.parentData.value != this.name) this.$emit('change', this.name);
}, 80);
if(this.parentData.value != this.name) this.$emit('change', this.name);
},
// 改变组件选中状态
// 这里的改变的依据是,更改本组件的parentData.value值为本组件的name值,同时通过父组件遍历所有u-radio实例
......
......@@ -22,8 +22,8 @@
@input="inputChange"
:disabled="disabled"
@focus="getFocus"
:maxlength="getMaxlength"
:focus="focus"
:maxlength="maxlength"
placeholder-class="u-placeholder-class"
:placeholder="placeholder"
:placeholder-style="`color: ${placeholderColor}`"
......@@ -164,7 +164,7 @@ export default {
// 输入框最大能输入的长度,-1为不限制长度(来自uniapp文档)
maxlength: {
type: [Number, String],
default: -1
default: '-1'
},
// 搜索图标的颜色,默认同输入框字体颜色
searchIconColor: {
......@@ -227,10 +227,6 @@ export default {
if (this.borderColor) return `1px solid ${this.borderColor}`;
else return 'none';
},
// 将maxlength转为数值
getMaxlength() {
return Number(this.maxlength);
}
},
methods: {
// 目前HX2.6.9 v-model双向绑定无效,故监听input事件获取输入框内容的变化
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment