Commit 92669cbf authored by wlxuqu's avatar wlxuqu

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

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