Commit 92669cbf authored by wlxuqu's avatar wlxuqu

1. 优化样式,避免在nvue报错

2. 修复popup在头条小程序上底部有缺失的问题,同时连带使用了popup的keyborad和picker,calendar等组件的问题
3. 修复form组件在头条小程序上的报错问题
parent a2acf7ec
...@@ -120,7 +120,8 @@ ...@@ -120,7 +120,8 @@
"appid" : "17597421" "appid" : "17597421"
}, },
"mp-toutiao" : { "mp-toutiao" : {
"usingComponents" : true "usingComponents" : true,
"appid" : "tt2bc55d78b4ff50bf"
}, },
"h5" : { "h5" : {
"template" : "template.h5.html", "template" : "template.h5.html",
......
...@@ -846,20 +846,20 @@ ...@@ -846,20 +846,20 @@
"borderStyle": "black", "borderStyle": "black",
"list": [{ "list": [{
"pagePath": "pages/example/components", "pagePath": "pages/example/components",
// "iconPath": "static/uview/example/component.png", "iconPath": "static/uview/example/component.png",
// "selectedIconPath": "static/uview/example/component_select.png", "selectedIconPath": "static/uview/example/component_select.png",
"text": "组件" "text": "组件"
}, },
{ {
"pagePath": "pages/example/js", "pagePath": "pages/example/js",
// "iconPath": "static/uview/example/js.png", "iconPath": "static/uview/example/js.png",
// "selectedIconPath": "static/uview/example/js_select.png", "selectedIconPath": "static/uview/example/js_select.png",
"text": "工具" "text": "工具"
}, },
{ {
"pagePath": "pages/example/template", "pagePath": "pages/example/template",
// "iconPath": "static/uview/example/template.png", "iconPath": "static/uview/example/template.png",
// "selectedIconPath": "static/uview/example/template_select.png", "selectedIconPath": "static/uview/example/template_select.png",
"text": "模板" "text": "模板"
} }
] ]
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</u-cell-group> </u-cell-group>
</view> </view>
<u-gap height="70"></u-gap> <u-gap height="70"></u-gap>
<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> <!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
</view> </view>
</template> </template>
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</u-cell-group> </u-cell-group>
</view> </view>
<u-gap height="70"></u-gap> <u-gap height="70"></u-gap>
<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> <!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
</view> </view>
</template> </template>
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</u-cell-group> </u-cell-group>
</view> </view>
<u-gap height="70"></u-gap> <u-gap height="70"></u-gap>
<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> <!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
</view> </view>
</template> </template>
......
...@@ -182,7 +182,9 @@ ...@@ -182,7 +182,9 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-avatar { .u-avatar {
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 28rpx; font-size: 28rpx;
......
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
'u-btn--' + type, 'u-btn--' + type,
disabled ? `u-btn--${type}--disabled` : '', disabled ? `u-btn--${type}--disabled` : '',
]" ]"
:hover-start-time="Number(hoverStartTime)"
:hover-stay-time="Number(hoverStayTime)"
:disabled="disabled" :disabled="disabled"
:form-type="formType" :form-type="formType"
:open-type="openType" :open-type="openType"
...@@ -211,7 +213,17 @@ export default { ...@@ -211,7 +213,17 @@ export default {
throttleTime: { throttleTime: {
type: [String, Number], type: [String, Number],
default: 1000 default: 1000
} },
// 按住后多久出现点击态,单位毫秒
hoverStartTime: {
type: [String, Number],
default: 20
},
// 手指松开后点击态保留时间,单位毫秒
hoverStayTime: {
type: [String, Number],
default: 150
},
}, },
computed: { computed: {
// 当没有传bgColor变量时,按钮按下去的颜色类名 // 当没有传bgColor变量时,按钮按下去的颜色类名
...@@ -339,7 +351,9 @@ export default { ...@@ -339,7 +351,9 @@ export default {
position: relative; position: relative;
border: 0; border: 0;
//border-radius: 10rpx; //border-radius: 10rpx;
display: inline-block; /* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
// 避免边框某些场景可能被“裁剪”,不能设置为hidden // 避免边框某些场景可能被“裁剪”,不能设置为hidden
overflow: visible; overflow: visible;
line-height: 1; line-height: 1;
...@@ -497,7 +511,9 @@ export default { ...@@ -497,7 +511,9 @@ export default {
} }
.u-size-medium { .u-size-medium {
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
width: auto; width: auto;
font-size: 26rpx; font-size: 26rpx;
height: 70rpx; height: 70rpx;
...@@ -506,7 +522,9 @@ export default { ...@@ -506,7 +522,9 @@ export default {
} }
.u-size-mini { .u-size-mini {
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
width: auto; width: auto;
font-size: 22rpx; font-size: 22rpx;
padding-top: 1px; padding-top: 1px;
......
...@@ -568,8 +568,6 @@ ...@@ -568,8 +568,6 @@
&__inner { &__inner {
height: 84rpx; height: 84rpx;
display: -webkit-box;
display: -webkit-flex;
@include vue-flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
......
...@@ -186,7 +186,9 @@ ...@@ -186,7 +186,9 @@
width: 62rpx; width: 62rpx;
flex: 0 0 64rpx; flex: 0 0 64rpx;
height: 80rpx; height: 80rpx;
display: inline-block; /* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
font-size: 36rpx; font-size: 36rpx;
text-align: center; text-align: center;
line-height: 80rpx; line-height: 80rpx;
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<block class="u-cell__value" v-if="value">{{ value }}</block> <block class="u-cell__value" v-if="value">{{ value }}</block>
<slot v-else></slot> <slot v-else></slot>
</view> </view>
<view class="u-flex" v-if="$slots['right-icon']"> <view class="u-flex u-cell_right" v-if="$slots['right-icon']">
<slot name="right-icon"></slot> <slot name="right-icon"></slot>
</view> </view>
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon> <u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
...@@ -301,7 +301,7 @@ export default { ...@@ -301,7 +301,7 @@ export default {
.u-cell--required:before { .u-cell--required:before {
position: absolute; position: absolute;
/* #ifndef APP-PLUS */ /* #ifndef APP-NVUE */
content: '*'; content: '*';
/* #endif */ /* #endif */
left: 8px; left: 8px;
...@@ -309,4 +309,8 @@ export default { ...@@ -309,4 +309,8 @@ export default {
font-size: 14px; font-size: 14px;
color: $u-type-error; color: $u-type-error;
} }
.u-cell_right {
line-height: 1;
}
</style> </style>
...@@ -101,10 +101,11 @@ ...@@ -101,10 +101,11 @@
}) })
this.$emit('change', values); this.$emit('change', values);
// 发出事件,用于在表单组件中嵌入checkbox的情况,进行验证 // 发出事件,用于在表单组件中嵌入checkbox的情况,进行验证
this.$nextTick(() => { // 由于头条小程序执行迟钝,故需要用几十毫秒的延时
setTimeout(() => {
// 将当前的值发送到 u-form-item 进行校验 // 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-change', values); this.dispatch('u-form-item', 'on-form-change', values);
}); }, 60)
} }
} }
} }
...@@ -114,7 +115,7 @@ ...@@ -114,7 +115,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-checkbox-group { .u-checkbox-group {
/* #ifndef MP */ /* #ifndef MP || APP-NVUE */
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
/* #endif */ /* #endif */
......
...@@ -176,7 +176,10 @@ ...@@ -176,7 +176,10 @@
name: this.name name: this.name
}) })
// 执行父组件u-checkbox-group的事件方法 // 执行父组件u-checkbox-group的事件方法
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
setTimeout(() => {
if(this.parent && this.parent.emitEvent) this.parent.emitEvent(); if(this.parent && this.parent.emitEvent) this.parent.emitEvent();
}, 80);
}, },
// 设置input的值,这里通过input事件,设置通过v-model绑定的组件的值 // 设置input的值,这里通过input事件,设置通过v-model绑定的组件的值
setValue() { setValue() {
...@@ -191,17 +194,11 @@ ...@@ -191,17 +194,11 @@
// 如果原来为选中状态,那么可以取消 // 如果原来为选中状态,那么可以取消
if (this.value == true) { if (this.value == true) {
this.$emit('input', !this.value); this.$emit('input', !this.value);
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
this.$nextTick(function() {
this.emitEvent(); this.emitEvent();
})
} else if ((this.parent && checkedNum < this.parent.max) || !this.parent) { } else if ((this.parent && checkedNum < this.parent.max) || !this.parent) {
// 如果原来为未选中状态,需要选中的数量少于父组件中设置的max值,才可以选中 // 如果原来为未选中状态,需要选中的数量少于父组件中设置的max值,才可以选中
this.$emit('input', !this.value); this.$emit('input', !this.value);
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
this.$nextTick(function() {
this.emitEvent(); this.emitEvent();
})
} }
} }
......
...@@ -203,7 +203,9 @@ export default { ...@@ -203,7 +203,9 @@ export default {
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-circle-progress { .u-circle-progress {
position: relative; position: relative;
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
alignItems: uAlignItem, alignItems: uAlignItem,
justifyContent: uJustify, justifyContent: uJustify,
textAlign: textAlign textAlign: textAlign
}" @tap.stop.prevent="click"> }"
@tap.stop.prevent="click">
<slot></slot> <slot></slot>
</view> </view>
</template> </template>
...@@ -63,7 +64,7 @@ ...@@ -63,7 +64,7 @@
mounted() { mounted() {
// 获取父组件实例,并赋值给对应的参数 // 获取父组件实例,并赋值给对应的参数
this.parent = this.$u.$parent.call(this, 'u-row'); this.parent = this.$u.$parent.call(this, 'u-row');
if(this.parent) { if (this.parent) {
this.gutter = this.parent.gutter; this.gutter = this.parent.gutter;
} }
}, },
...@@ -89,9 +90,62 @@ ...@@ -89,9 +90,62 @@
<style lang="scss"> <style lang="scss">
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-col { .u-col {
/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */ /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
float: left; float: left;
/* #endif */ /* #endif */
} }
.u-col-0 {
width: 0;
}
.u-col-1 {
width: calc(100%/12);
}
.u-col-2 {
width: calc(100%/12 * 2);
}
.u-col-3 {
width: calc(100%/12 * 3);
}
.u-col-4 {
width: calc(100%/12 * 4);
}
.u-col-5 {
width: calc(100%/12 * 5);
}
.u-col-6 {
width: calc(100%/12 * 6);
}
.u-col-7 {
width: calc(100%/12 * 7);
}
.u-col-8 {
width: calc(100%/12 * 8);
}
.u-col-9 {
width: calc(100%/12 * 9);
}
.u-col-10 {
width: calc(100%/12 * 10);
}
.u-col-11 {
width: calc(100%/12 * 11);
}
.u-col-12 {
width: calc(100%/12 * 12);
}
</style> </style>
...@@ -222,12 +222,16 @@ export default { ...@@ -222,12 +222,16 @@ export default {
.u-right-icon { .u-right-icon {
margin-left: 12rpx; margin-left: 12rpx;
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
align-items: center; align-items: center;
} }
.u-left-icon { .u-left-icon {
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
align-items: center; align-items: center;
} }
</style> </style>
...@@ -279,7 +279,9 @@ export default { ...@@ -279,7 +279,9 @@ export default {
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-countdown { .u-countdown {
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
align-items: center; align-items: center;
} }
......
...@@ -233,7 +233,9 @@ export default { ...@@ -233,7 +233,9 @@ export default {
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-count-num { .u-count-num {
display: inline-block; /* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
text-align: center; text-align: center;
} }
</style> </style>
...@@ -146,6 +146,8 @@ export default { ...@@ -146,6 +146,8 @@ export default {
.u-divider-text { .u-divider-text {
white-space: nowrap; white-space: nowrap;
padding: 0 16rpx; padding: 0 16rpx;
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
} }
</style> </style>
...@@ -317,7 +317,9 @@ export default { ...@@ -317,7 +317,9 @@ export default {
} }
.u-label-text { .u-label-text {
display: inline-block; /* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
} }
.u-label-left-gap { .u-label-left-gap {
......
...@@ -152,12 +152,9 @@ export default { ...@@ -152,12 +152,9 @@ export default {
validateMessage: '' ,// 校验失败的提示语 validateMessage: '' ,// 校验失败的提示语
// 有错误时的提示方式,message-提示信息,border-如果input设置了边框,变成呈红色, // 有错误时的提示方式,message-提示信息,border-如果input设置了边框,变成呈红色,
errorType: ['message'], errorType: ['message'],
fieldValue: '', // 获取当前子组件input的输入的值
}; };
}, },
created() {
// 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用
this.parent = this.$u.$parent.call(this, 'u-form');
},
watch: { watch: {
validateState(val) { validateState(val) {
this.broadcastInputError(); this.broadcastInputError();
...@@ -174,9 +171,6 @@ export default { ...@@ -174,9 +171,6 @@ export default {
// 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true'),意味着要将label的位置宽度设置为auto // 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true'),意味着要将label的位置宽度设置为auto
return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this.elLabelWidth)) : '100%'; return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this.elLabelWidth)) : '100%';
}, },
fieldValue() {
return this.uForm.model[this.prop];
},
showError() { showError() {
return type => { return type => {
// 如果errorType数组中含有none,或者toast提示类型 // 如果errorType数组中含有none,或者toast提示类型
...@@ -235,7 +229,7 @@ export default { ...@@ -235,7 +229,7 @@ export default {
// 从u-form的rules属性中,取出当前u-form-item的校验规则 // 从u-form的rules属性中,取出当前u-form-item的校验规则
getRules() { getRules() {
// 父组件的所有规则 // 父组件的所有规则
let rules = this.uForm.rules; let rules = this.parent.rules;
rules = rules ? rules[this.prop] : []; rules = rules ? rules[this.prop] : [];
// 保证返回的是一个数组形式 // 保证返回的是一个数组形式
return [].concat(rules || []); return [].concat(rules || []);
...@@ -264,6 +258,8 @@ export default { ...@@ -264,6 +258,8 @@ export default {
// 校验数据 // 校验数据
validation(trigger, callback = () => {}) { validation(trigger, callback = () => {}) {
// 检验之间,先获取需要校验的值
this.fieldValue = this.parent.model[this.prop];
// blur和change是否有当前方式的校验规则 // blur和change是否有当前方式的校验规则
let rules = this.getFilteredRule(trigger); let rules = this.getFilteredRule(trigger);
// 判断是否有验证规则,如果没有规则,也调用回调方法,否则父组件u-form会因为 // 判断是否有验证规则,如果没有规则,也调用回调方法,否则父组件u-form会因为
...@@ -286,7 +282,7 @@ export default { ...@@ -286,7 +282,7 @@ export default {
// 清空当前的u-form-item // 清空当前的u-form-item
resetField() { resetField() {
this.uForm.model[this.prop] = this.initialValue; this.parent.model[this.prop] = this.initialValue;
// 设置为`success`状态,只是为了清空错误标记 // 设置为`success`状态,只是为了清空错误标记
this.validateState = 'success'; this.validateState = 'success';
} }
...@@ -294,11 +290,13 @@ export default { ...@@ -294,11 +290,13 @@ export default {
// 组件创建完成时,将当前实例保存到u-form中 // 组件创建完成时,将当前实例保存到u-form中
mounted() { mounted() {
// 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用
this.parent = this.$u.$parent.call(this, 'u-form');
// 如果没有传入prop,或者uForm为空(如果u-form-input单独使用,就不会有uForm注入),就不进行校验 // 如果没有传入prop,或者uForm为空(如果u-form-input单独使用,就不会有uForm注入),就不进行校验
if (!this.prop || this.uForm === null) return; if (this.prop || this.parent) {
// 发出事件,让父组件将本实例加入到管理数组 // 将本实例添加到父组件
this.dispatch('u-form', 'on-form-item-add', this); this.parent.fields.push(this);
this.errorType = this.uForm.errorType; this.errorType = this.parent.errorType;
// 设置初始值 // 设置初始值
this.initialValue = this.fieldValue; this.initialValue = this.fieldValue;
// 添加表单校验,这里必须要写在$nextTick中,因为u-form的rules是通过ref手动传入的 // 添加表单校验,这里必须要写在$nextTick中,因为u-form的rules是通过ref手动传入的
...@@ -306,11 +304,17 @@ export default { ...@@ -306,11 +304,17 @@ export default {
this.$nextTick(() =>{ this.$nextTick(() =>{
this.setRules(); this.setRules();
}) })
}
}, },
// 组件销毁前,将实例从 Form 的缓存中移除 // 组件销毁前,将实例从u-form的缓存中移除
beforeDestroy() { beforeDestroy() {
this.dispatch('u-form', 'on-form-item-remove', this); // 如果当前没有prop的话表示当前不要进行删除(因为没有注入)
if(this.parent && this.prop) {
this.parent.fields.map((item, index) => {
if(item === this) this.parent.fields.splice(index, 1);
})
}
}, },
}; };
</script> </script>
......
...@@ -85,21 +85,6 @@ export default { ...@@ -85,21 +85,6 @@ export default {
// 存储当前form下的所有u-form-item的实例 // 存储当前form下的所有u-form-item的实例
// 不能定义在data中,否则微信小程序会造成循环引用而报错 // 不能定义在data中,否则微信小程序会造成循环引用而报错
this.fields = []; this.fields = [];
// 存当前实例
let that = this;
// 监听on-form-item-add事件,将子组件添加到fields中
this.$on('on-form-item-add', item => {
if (item) {
that.fields.push(item);
}
});
// 删除当前有的实例
this.$on('on-form-item-remove', item => {
// 如果当前没有prop的话表示当前不要进行删除(因为没有注入)
if (item.prop) {
that.fields.splice(that.fields.indexOf(item), 1);
}
});
}, },
methods: { methods: {
setRules(rules) { setRules(rules) {
......
...@@ -93,7 +93,9 @@ ...@@ -93,7 +93,9 @@
.u-grid-marker-box { .u-grid-marker-box {
position: absolute; position: absolute;
display: inline-block; /* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
line-height: 0; line-height: 0;
} }
......
...@@ -216,6 +216,7 @@ export default { ...@@ -216,6 +216,7 @@ export default {
validateState: false, // 当前input的验证状态,用于错误时,边框是否改为红色 validateState: false, // 当前input的验证状态,用于错误时,边框是否改为红色
focused: false, // 当前是否处于获得焦点的状态 focused: false, // 当前是否处于获得焦点的状态
showPassword: false, // 是否预览密码 showPassword: false, // 是否预览密码
lastValue: '', // 用于头条小程序,判断@input中,前后的值是否发生了变化,因为头条中文下,按下键没有输入内容,也会触发@input时间
}; };
}, },
watch: { watch: {
...@@ -268,16 +269,22 @@ export default { ...@@ -268,16 +269,22 @@ export default {
let value = event.detail.value; let value = event.detail.value;
// 判断是否去除空格 // 判断是否去除空格
if(this.trim) value = this.$u.trim(value); if(this.trim) value = this.$u.trim(value);
// 当前model 赋值
this.defaultValue = value;
// vue 原生的方法 return 出去 // vue 原生的方法 return 出去
this.$emit('input', value); this.$emit('input', value);
// 当前model 赋值
this.defaultValue = value;
// 过一个生命周期再发送事件给u-form-item,否则this.$emit('input')更新了父组件的值,但是微信小程序上 // 过一个生命周期再发送事件给u-form-item,否则this.$emit('input')更新了父组件的值,但是微信小程序上
// 尚未更新到u-form-item,导致获取的值为空,从而校验混论 // 尚未更新到u-form-item,导致获取的值为空,从而校验混论
this.$nextTick(() => { // 这里不能延时时间太短,或者使用this.$nextTick,否则在头条上,会造成混乱
setTimeout(() => {
// 头条小程序由于自身bug,导致中文下,每按下一个键(尚未完成输入),都会触发一次@input,导致错误,这里进行判断处理
// #ifdef MP-TOUTIAO
if(this.$u.trim(value) == this.lastValue) return ;
this.lastValue = value;
// #endif
// 将当前的值发送到 u-form-item 进行校验 // 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-change', value); this.dispatch('u-form-item', 'on-form-change', value);
}); }, 40)
}, },
/** /**
* blur 事件 * blur 事件
...@@ -291,10 +298,15 @@ export default { ...@@ -291,10 +298,15 @@ export default {
}, 100) }, 100)
// vue 原生的方法 return 出去 // vue 原生的方法 return 出去
this.$emit('blur', event.detail.value); this.$emit('blur', event.detail.value);
this.$nextTick(() => { setTimeout(() => {
// 头条小程序由于自身bug,导致中文下,每按下一个键(尚未完成输入),都会触发一次@input,导致错误,这里进行判断处理
// #ifdef MP-TOUTIAO
if(this.$u.trim(value) == this.lastValue) return ;
this.lastValue = value;
// #endif
// 将当前的值发送到 u-form-item 进行校验 // 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-blur', event.detail.value); this.dispatch('u-form-item', 'on-form-blur', event.detail.value);
}); }, 40)
}, },
onFormItemError(status) { onFormItemError(status) {
this.validateState = status; this.validateState = status;
......
...@@ -237,6 +237,8 @@ ...@@ -237,6 +237,8 @@
transform: transition3d(0, 0, 0); transform: transition3d(0, 0, 0);
// 防止图片加载“闪一下” // 防止图片加载“闪一下”
will-change: transform; will-change: transform;
/* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */
} }
</style> </style>
...@@ -106,7 +106,9 @@ ...@@ -106,7 +106,9 @@
.u-progress { .u-progress {
overflow: hidden; overflow: hidden;
height: 15px; height: 15px;
/* #ifndef APP-NVUE */
display: inline-flex; display: inline-flex;
/* #endif */
align-items: center; align-items: center;
width: 100%; width: 100%;
border-radius: 100rpx; border-radius: 100rpx;
......
...@@ -55,7 +55,9 @@ ...@@ -55,7 +55,9 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-loading-circle { .u-loading-circle {
display: inline-block; /* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
vertical-align: middle; vertical-align: middle;
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;
......
...@@ -256,7 +256,9 @@ ...@@ -256,7 +256,9 @@
} }
.u-placeholder-line { .u-placeholder-line {
/* #ifndef APP-NVUE */
display: none; display: none;
/* #endif */
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
......
<template> <template>
<view v-if="visibleSync" :style="[customStyle, { <view v-if="visibleSync" :style="[customStyle, {
zIndex: uZindex - 1 zIndex: uZindex - 1
}]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer" hover-stop-propagation> }]" class="u-drawer" hover-stop-propagation>
<u-mask :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask> <u-mask :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask>
<view <view
class="u-drawer-content" class="u-drawer-content"
......
...@@ -85,13 +85,13 @@ ...@@ -85,13 +85,13 @@
}) })
// 通过emit事件,设置父组件通过v-model双向绑定的值 // 通过emit事件,设置父组件通过v-model双向绑定的值
this.$emit('input', val); this.$emit('input', val);
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
this.$nextTick(function() {
this.$emit('change', val); this.$emit('change', val);
// 发出事件,用于在表单组件中嵌入radio的情况,进行验证 // 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
// 由于头条小程序执行迟钝,故需要用几十毫秒的延时
setTimeout(() => {
// 将当前的值发送到 u-form-item 进行校验 // 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-change', val); this.dispatch('u-form-item', 'on-form-change', val);
}); }, 60)
} }
} }
} }
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-radio-group { .u-radio-group {
/* #ifndef MP */ /* #ifndef MP || APP-NVUE */
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
/* #endif */ /* #endif */
......
...@@ -169,7 +169,11 @@ ...@@ -169,7 +169,11 @@
}, },
emitEvent() { emitEvent() {
// u-radio的name不等于父组件的v-model的值时(意味着未选中),才发出事件,避免多次点击触发事件 // u-radio的name不等于父组件的v-model的值时(意味着未选中),才发出事件,避免多次点击触发事件
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
// 头条需要延时的时间比较长,这里给比较大的值
setTimeout(() => {
if(this.parent && this.parent.value != this.name) this.$emit('change', this.name); if(this.parent && this.parent.value != this.name) this.$emit('change', this.name);
}, 80);
}, },
// 改变组件选中状态 // 改变组件选中状态
// 这里的改变的依据是,更改本组件的parentValue值为本组件的name值,同时通过父组件遍历所有u-radio实例 // 这里的改变的依据是,更改本组件的parentValue值为本组件的name值,同时通过父组件遍历所有u-radio实例
......
...@@ -223,7 +223,9 @@ export default { ...@@ -223,7 +223,9 @@ export default {
} }
.u-left-icon { .u-left-icon {
display: inline-flex; /* #ifndef APP-NVUE */
display: none;
/* #endif */
align-items: center; align-items: center;
} }
......
...@@ -321,7 +321,6 @@ ...@@ -321,7 +321,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: $u-main-color; color: $u-main-color;
display: inline-flex;
padding: 0 6rpx; padding: 0 6rpx;
} }
......
...@@ -243,7 +243,9 @@ ...@@ -243,7 +243,9 @@
width: 100%; width: 100%;
will-change: transform; will-change: transform;
height: 100%; height: 100%;
/* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */
/* #ifdef H5 */ /* #ifdef H5 */
pointer-events: none; pointer-events: none;
/* #endif */ /* #endif */
......
...@@ -111,7 +111,9 @@ ...@@ -111,7 +111,9 @@
.u-switch { .u-switch {
position: relative; position: relative;
/* #ifndef APP-NVUE */
display: inline-block; display: inline-block;
/* #endif */
box-sizing: initial; box-sizing: initial;
width: 2em; width: 2em;
height: 1em; height: 1em;
......
...@@ -381,6 +381,7 @@ ...@@ -381,6 +381,7 @@
transition-property: background-color, color; transition-property: background-color, color;
} }
/* #ifndef APP-NVUE */
::-webkit-scrollbar, ::-webkit-scrollbar,
::-webkit-scrollbar, ::-webkit-scrollbar,
::-webkit-scrollbar { ::-webkit-scrollbar {
...@@ -390,6 +391,7 @@ ...@@ -390,6 +391,7 @@
-webkit-appearance: none; -webkit-appearance: none;
background: transparent; background: transparent;
} }
/* #endif */
/* #ifdef H5 */ /* #ifdef H5 */
// 通过样式穿透,隐藏H5下,scroll-view下的滚动条 // 通过样式穿透,隐藏H5下,scroll-view下的滚动条
......
...@@ -296,6 +296,7 @@ ...@@ -296,6 +296,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* #ifndef APP-NVUE */
::-webkit-scrollbar, ::-webkit-scrollbar,
::-webkit-scrollbar, ::-webkit-scrollbar,
::-webkit-scrollbar { ::-webkit-scrollbar {
...@@ -305,6 +306,7 @@ ...@@ -305,6 +306,7 @@
-webkit-appearance: none; -webkit-appearance: none;
background: transparent; background: transparent;
} }
/* #endif */
.u-scroll-box { .u-scroll-box {
position: relative; position: relative;
...@@ -322,7 +324,6 @@ ...@@ -322,7 +324,6 @@
-webkit-appearance: none; -webkit-appearance: none;
background: transparent; background: transparent;
} }
/* #endif */ /* #endif */
.u-scroll-view { .u-scroll-view {
...@@ -333,7 +334,9 @@ ...@@ -333,7 +334,9 @@
.u-tab-item { .u-tab-item {
position: relative; position: relative;
/* #ifndef APP-NVUE */
display: inline-block; display: inline-block;
/* #endif */
text-align: center; text-align: center;
transition-property: background-color, color; transition-property: background-color, color;
} }
......
...@@ -164,7 +164,9 @@ ...@@ -164,7 +164,9 @@
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
border-radius: 6rpx; border-radius: 6rpx;
/* #ifndef APP-NVUE */
display: inline-block; display: inline-block;
/* #endif */
line-height: 1; line-height: 1;
} }
......
...@@ -538,7 +538,9 @@ export default { ...@@ -538,7 +538,9 @@ export default {
background: rgb(244, 245, 246); background: rgb(244, 245, 246);
position: relative; position: relative;
border-radius: 10rpx; border-radius: 10rpx;
display: inline-flex; /* #ifndef APP-NVUE */
display: inline-block;
/* #endif */
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
......
...@@ -51,6 +51,11 @@ u-icon { ...@@ -51,6 +51,11 @@ u-icon {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
} }
.u-row, .u-col {
flex: 1;
align-self: stretch;
}
/* #endif */ /* #endif */
/* end-头条小程序编译后页面有组件名的元素,特别处理--end */ /* end-头条小程序编译后页面有组件名的元素,特别处理--end */
......
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