Commit a2acf7ec authored by wlxuqu's avatar wlxuqu

1. 修复在nvue下样式的警告和报错问题

2. 修复grid组件在头条小程序的报错的问题
3. 优化tabs组件在头条小程序的表现问题
4. 修复index-list组件在头条小程序上的兼容性
5. 修复layout组件在头条小程序上的兼容性
6. 修复table组件在头条小程序上的兼容性
7. 修复checkbox组件在头条小程序上的兼容性
8. 修复radio组件在头条小程序上的兼容性
parent 5322f84f
......@@ -547,7 +547,7 @@
"path": "navbar/index",
"style": {
// "navigationBarTitleText": "navbar-自定义导航栏",
"navigationStyle": "custom" ,// 隐藏系统导航栏
"navigationStyle": "custom", // 隐藏系统导航栏
"navigationBarTextStyle": "white" // 状态栏字体为白色
}
},
......@@ -758,13 +758,16 @@
"style": {
"navigationBarTitleText": "upload-上传"
}
}, // waterfall瀑布流
},
// waterfall瀑布流
// #ifndef MP-TOUTIAO
{
"path": "waterfall/index",
"style": {
"navigationBarTitleText": "waterfall-瀑布流"
}
},
// #endif
// table表格
{
"path": "table/index",
......
......@@ -121,12 +121,12 @@
},
// 选中某个单选框时,由radio时触发
radioChange(e) {
console.log(e);
//console.log(e);
},
// 选中任一radio时,由radio-group触发
radioGroupChange(e) {
this.result = e;
console.log(e);
//console.log(e);
},
widthChange(index) {
this.width = index == 0 ? '50%' : '';
......
......@@ -5,29 +5,29 @@
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-table :align="align" :borderColor="borderColor">
<u-tr>
<u-th>姓名</u-th>
<u-th>年龄</u-th>
<u-th>籍贯</u-th>
<u-th>性别</u-th>
<u-tr class="u-tr">
<u-th class="u-th">姓名</u-th>
<u-th class="u-th">年龄</u-th>
<u-th class="u-th">籍贯</u-th>
<u-th class="u-th">性别</u-th>
</u-tr>
<u-tr>
<u-td>吕布</u-td>
<u-td>22</u-td>
<u-td>楚河</u-td>
<u-td></u-td>
<u-tr class="u-tr">
<u-td class="u-td">吕布</u-td>
<u-td class="u-td">22</u-td>
<u-td class="u-td">楚河</u-td>
<u-td class="u-td"></u-td>
</u-tr>
<u-tr>
<u-td>项羽</u-td>
<u-td>28</u-td>
<u-td>汉界</u-td>
<u-td></u-td>
<u-tr class="u-tr">
<u-td class="u-td">项羽</u-td>
<u-td class="u-td">28</u-td>
<u-td class="u-td">汉界</u-td>
<u-td class="u-td"></u-td>
</u-tr>
<u-tr>
<u-td>木兰</u-td>
<u-td>24</u-td>
<u-td>南国</u-td>
<u-td></u-td>
<u-tr class="u-tr">
<u-td class="u-td">木兰</u-td>
<u-td class="u-td">24</u-td>
<u-td class="u-td">南国</u-td>
<u-td class="u-td"></u-td>
</u-tr>
</u-table>
</view>
......
......@@ -4,7 +4,7 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-collapse :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
<u-collapse v-if="key" :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
{{item.body}}
</u-collapse-item>
......@@ -59,7 +59,8 @@
accordion: true,
arrow: true,
hoverClass: 'hover2',
itemStyle: {}
itemStyle: {},
key: true
}
},
methods: {
......@@ -68,6 +69,7 @@
},
arrowChange(index) {
this.arrow = index == 0 ? true : false;
this.changeStatus();
},
styleChange(index) {
if(index == 0) {
......@@ -79,6 +81,7 @@
} else {
this.itemStyle = {}
}
this.changeStatus();
},
change(index) {
let str = '';
......@@ -97,6 +100,12 @@
},
itemChange(e) {
console.log(e);
},
changeStatus() {
this.key = false;
this.$nextTick(function(){
this.key = true;
})
}
}
}
......
......@@ -88,10 +88,10 @@
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<!-- <view class="u-config-item">
<view class="u-item-title">是否显示边框</view>
<u-subsection vibrateShort :list="['是', '否']" @change="borderChange"></u-subsection>
</view>
</view> -->
<view class="u-config-item">
<view class="u-item-title">是否可滑动</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="isSwiperChange"></u-subsection>
......
......@@ -3,7 +3,7 @@
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-row gutter="20" :justify="justify">
<u-row :justify="justify">
<u-col :span="span" :offset="offset" @click="click">
<view class="demo-layout bg-purple-dark">
......
<template>
<view class="u-checkbox" :style="[checkboxStyle]">
<view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon name="checkbox-mark" :size="checkboxIconSize" :color="iconColor"/>
<u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor"/>
</view>
<view class="u-checkbox__label" @tap="onClickLabel" :style="{
fontSize: $u.addUnit(labelSize)
......@@ -213,7 +213,9 @@
@import "../../libs/css/style.components.scss";
.u-checkbox {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
align-items: center;
overflow: hidden;
user-select: none;
......@@ -236,6 +238,13 @@
border: 1px solid #c8c9cc;
transition-duration: 0.2s;
/* #ifdef MP-TOUTIAO */
// 头条小程序兼容性问题,需要设置行高为0,否则图标偏下
&__icon {
line-height: 0;
}
/* #endif */
&--circle {
border-radius: 100%;
}
......
......@@ -52,7 +52,21 @@
default: 'left'
}
},
inject: ['gutter'],
data() {
return {
gutter: 20, // 给col添加间距,左右边距各占一半,从父组件u-row获取
}
},
created() {
this.parent = false;
},
mounted() {
// 获取父组件实例,并赋值给对应的参数
this.parent = this.$u.$parent.call(this, 'u-row');
if(this.parent) {
this.gutter = this.parent.gutter;
}
},
computed: {
uJustify() {
if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
......@@ -76,60 +90,8 @@
<style lang="scss">
@import "../../libs/css/style.components.scss";
.u-col {
/* #ifdef MP-WEIXIN || MP-QQ */
/* #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>
......@@ -80,7 +80,6 @@
default: ''
}
},
inject: ['uCollapse'],
data() {
return {
isShow: false,
......@@ -88,41 +87,37 @@
height: 0, // body内容的高度
headStyle: {}, // 头部样式,对象形式
bodyStyle: {}, // 主体部分样式
//itemStyle: {}, // 每个item的整体样式
itemStyle: {}, // 每个item的整体样式
arrowColor: '', // 箭头的颜色
hoverClass: '', // 头部按下时的效果样式类
arrow: true, // 是否显示右侧箭头
};
},
mounted() {
this.init();
},
watch: {
open(val) {
this.isShow = val;
}
},
computed: {
arrow() {
return this.uCollapse.arrow;
},
itemStyle() {
return this.uCollapse.itemStyle;
}
},
created() {
this.parent = false;
// 获取u-collapse的信息,放在u-collapse是为了方便,不用每个u-collapse-item写一遍
this.isShow = this.open;
this.nameSync = this.name ? this.name : this.uCollapse.childrens.length;
this.uCollapse.childrens.push(this);
//this.itemStyle = this.uCollapse.itemStyle;
this.headStyle = this.uCollapse.headStyle;
this.bodyStyle = this.uCollapse.bodyStyle;
this.arrowColor = this.uCollapse.arrowColor;
this.hoverClass = this.uCollapse.hoverClass;
},
methods: {
// 异步获取内容,或者动态修改了内容时,需要重新初始化
init() {
this.parent = this.$u.$parent.call(this, 'u-collapse');
if(this.parent) {
this.nameSync = this.name ? this.name : this.parent.childrens.length;
this.parent.childrens.push(this);
this.headStyle = this.parent.headStyle;
this.bodyStyle = this.parent.bodyStyle;
this.arrowColor = this.parent.arrowColor;
this.hoverClass = this.parent.hoverClass;
this.arrow = this.parent.arrow;
this.itemStyle = this.parent.itemStyle;
}
this.$nextTick(() => {
this.queryRect();
});
......@@ -130,8 +125,8 @@
// 点击collapsehead头部
headClick() {
if (this.disabled) return;
if (this.uCollapse.accordion == true) {
this.uCollapse.childrens.map(val => {
if (this.parent && this.parent.accordion == true) {
this.parent.childrens.map(val => {
// 自身不设置为false,因为后面有this.isShow = !this.isShow;处理了
if (this != val) {
val.isShow = false;
......@@ -146,7 +141,7 @@
show: this.isShow
})
// 只有在打开时才发出事件
if (this.isShow) this.uCollapse.onChange();
if (this.isShow) this.parent && this.parent.onChange();
this.$forceUpdate();
},
// 查询内容高度
......@@ -157,6 +152,9 @@
this.height = res.height;
})
}
},
mounted() {
this.init();
}
};
</script>
......
......@@ -63,11 +63,6 @@
default: 'u-hover-class'
}
},
provide() {
return {
uCollapse: this
}
},
created() {
this.childrens = []
},
......
......@@ -34,37 +34,38 @@
default: ''
},
},
// 父组件通过provide传递过来的整个this
inject: ['uGrid'],
data() {
return {
hoverClass: '', // 按下去的时候,是否显示背景灰色
col: 1, // 父组件划分的宫格数
showBorder: false, // 是否显示边框,根据父组件决定
};
},
created() {
this.hoverClass = this.uGrid.hoverClass;
// 父组件的实例
this.parent = false;
},
computed: {
// 小于2,显示2列;大于12,显示12列
colNum() {
return this.col < 2 ? 2 : this.col > 12 ? 12 : this.col;
},
// 每个grid-item的宽度
width() {
return 100 / Number(this.uGrid.col) + '%';
return 100 / Number(this.col) + '%';
},
// 是否显示边框
// 为了迎合演示的需要,从created生命周期移到此,以为演示中可能需要动态修改有无边框
showBorder() {
return this.uGrid.border;
}
},
methods: {
click() {
this.$emit('click', this.index);
this.uGrid.click(this.index);
this.parent && this.parent.click(this.index);
}
},
mounted() {
// 获取父组件节点u-grid,将其参数,赋值给本组件相关变量
this.parent = this.$u.$parent.call(this, 'u-grid');
if(this.parent) {
this.col = this.parent.col;
this.showBorder = this.parent.border;
this.hoverClass = this.parent.hoverClass;
}
}
};
</script>
......
......@@ -42,11 +42,6 @@ export default {
index: 0,
}
},
provide() {
return {
uGrid: this
}
},
computed: {
// 宫格对齐方式
gridStyle() {
......
......@@ -48,10 +48,15 @@
anchorStyle: {}
}
},
inject: ['UIndexList'],
created() {
this.parent = false;
},
mounted() {
this.UIndexList.children.push(this);
this.UIndexList.updateData();
this.parent = this.$u.$parent.call(this, 'u-index-list');
if(this.parent) {
this.parent.children.push(this);
this.parent.updateData();
}
},
computed: {
customAnchorStyle() {
......
......@@ -79,15 +79,9 @@
// #ifndef H5
this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
// #endif
// 只能在created生命周期定义children,如果在data定义,会因为在子组件中通过provide/inject
// 进行push时而导致的莫名其妙的错误
// 只能在created生命周期定义children,如果在data定义,会因为循环引用而报错
this.children = [];
},
provide() {
return {
UIndexList: this
}
},
data() {
return {
activeAnchorIndex: 0,
......
......@@ -71,14 +71,18 @@
default: false
}
},
provide() {
return {
radioGroup: this
}
created() {
// 如果将children定义在data中,在微信小程序会造成循环引用而报错
this.children = [];
},
methods: {
// 该方法有子组件radio调用,当一个radio被选中的时候,给父组件设置value值(props传递的value)
setValue(val) {
// 通过子组件传递过来的val值(此被选中的子组件内部已将parentValue设置等于val的值),将其他
// u-radio设置未选中的状态
this.children.map(child => {
if(child.parentValue != val) child.parentValue = '';
})
// 通过emit事件,设置父组件通过v-model双向绑定的值
this.$emit('input', val);
// 等待下一个周期再执行,因为this.$emit('input')作用于父组件,再反馈到子组件内部,需要时间
......
......@@ -2,6 +2,7 @@
<view class="u-radio" :style="[radioStyle]">
<view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
<u-icon
class="u-radio__icon-wrap__icon"
name="checkbox-mark"
:size="elIconSize"
:color="iconColor"/>
......@@ -70,13 +71,18 @@
},
data() {
return {
parentDisabled: false
parentValue: ''
};
},
created() {
// this.parentDisabled = this.parent.disabled;
this.parent = false;
},
mounted() {
// 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用
this.parent = this.$u.$parent.call(this, 'u-radio-group');
if(this.parent) {
this.parent.children.push(this);
}
},
computed: {
// 是否禁用,如果父组件u-raios-group禁用的话,将会忽略子组件的配置
......@@ -106,7 +112,7 @@
// 设置radio的状态,要求radio的name等于parent的value时才为选中状态
iconStyle() {
let style = {};
if (this.elActiveColor && this.name == this.parent.value && !this.elDisabled) {
if (this.elActiveColor && this.parentValue && !this.elDisabled) {
style.borderColor = this.elActiveColor;
style.backgroundColor = this.elActiveColor;
}
......@@ -115,21 +121,21 @@
return style;
},
iconColor() {
return this.name == this.parent.value ? '#ffffff' : 'transparent';
return this.name == this.parentValue ? '#ffffff' : 'transparent';
},
iconClass() {
let classes = [];
classes.push('u-radio__icon-wrap--' + this.elShape);
if (this.name == this.parent.value) classes.push('u-radio__icon-wrap--checked');
if (this.name == this.parentValue) classes.push('u-radio__icon-wrap--checked');
if (this.elDisabled) classes.push('u-radio__icon-wrap--disabled');
if (this.name == this.parent.value && this.elDisabled) classes.push(
if (this.name == this.parentValue && this.elDisabled) classes.push(
'u-radio__icon-wrap--disabled--checked');
// 支付宝小程序无法动态绑定一个数组类名,否则解析出来的结果会带有",",而导致失效
return classes.join(' ');
},
radioStyle() {
let style = {};
if (this.parent.width) {
if (this.parent && this.parent.width) {
style.width = this.parent.width;
// #ifdef MP
// 各家小程序因为它们特殊的编译结构,使用float布局
......@@ -140,7 +146,7 @@
style.flex = `0 0 ${this.parent.width}`;
// #endif
}
if (this.parent.wrap) {
if (this.parent && this.parent.wrap) {
style.width = '100%';
// #ifndef MP
// H5和APP使用flex布局,将宽度设置100%,即可自动换行
......@@ -153,20 +159,28 @@
methods: {
onClickLabel() {
if (!this.elLabelDisabled && !this.elDisabled) {
this.parent.setValue(this.name);
this.emitEvent();
this.setRadioCheckedStatus();
}
},
toggle() {
if (!this.elDisabled) {
this.parent.setValue(this.name);
this.emitEvent();
this.setRadioCheckedStatus();
}
},
emitEvent() {
// u-radio的name不等于父组件的v-model的值时(意味着未选中),才发出事件,避免多次点击触发事件
if(this.parent.value != this.name) this.$emit('change', this.name);
if(this.parent && this.parent.value != this.name) this.$emit('change', this.name);
},
// 改变组件选中状态
// 这里的改变的依据是,更改本组件的parentValue值为本组件的name值,同时通过父组件遍历所有u-radio实例
// 将本组建外的其他u-radio的parentValue都设置为空(由computed计算后,都被取消选中状态),因而只剩下一个为选中状态
setRadioCheckedStatus() {
if(this.parent) {
this.parent.setValue(this.name);
this.parentValue = this.name;
}
this.emitEvent();
}
}
};
</script>
......@@ -175,8 +189,9 @@
@import "../../libs/css/style.components.scss";
.u-radio {
display: -webkit-flex;
@include vue-flex;
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
align-items: center;
overflow: hidden;
user-select: none;
......@@ -198,6 +213,13 @@
border: 1px solid #c8c9cc;
transition-duration: 0.2s;
/* #ifdef MP-TOUTIAO */
// 头条小程序兼容性问题,需要设置行高为0,否则图标偏下
&__icon {
line-height: 0;
}
/* #endif */
&--circle {
border-radius: 100%;
}
......
......@@ -38,11 +38,6 @@
default: 'center'
}
},
provide() {
return {
gutter: this.gutter
}
},
computed: {
uJustify() {
if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
......@@ -68,14 +63,14 @@
.u-row {
// 由于微信小程序编译后奇怪的页面结构,只能使用float布局实现,flex无法实现
/* #ifndef MP-WEIXIN || MP-QQ */
/* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
@include vue-flex;
/* #endif */
flex-wrap: wrap;
}
.u-row:after {
/* #ifdef MP-WEIXIN || MP-QQ */
/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
display: table;
clear: both;
content: "";
......
......@@ -59,11 +59,6 @@
default: '#ffffff'
}
},
provide() {
return {
uTable: this,
};
},
data() {
return {}
},
......
......@@ -21,20 +21,31 @@
default: 'auto'
}
},
inject: ['uTable'],
computed: {
tdStyle() {
data() {
return {
tdStyle: {
}
}
},
created() {
this.parent = false;
},
mounted() {
this.parent = this.$u.$parent.call(this, 'u-table');
if (this.parent) {
// 将父组件的相关参数,合并到本组件
let style = {};
if (this.width != "auto") style.flex = `0 0 ${this.width}`;
style.textAlign = this.uTable.align;
style.fontSize = this.uTable.fontSize + 'rpx';
style.padding = this.uTable.padding;
style.borderBottom = `solid 1px ${this.uTable.borderColor}`;
style.borderRight = `solid 1px ${this.uTable.borderColor}`;
style.color = this.uTable.color;
return style;
style.textAlign = this.parent.align;
style.fontSize = this.parent.fontSize + 'rpx';
style.padding = this.parent.padding;
style.borderBottom = `solid 1px ${this.parent.borderColor}`;
style.borderRight = `solid 1px ${this.parent.borderColor}`;
style.color = this.parent.color;
this.tdStyle = style;
}
}
},
};
</script>
......@@ -50,53 +61,6 @@
color: $u-content-color;
align-self: stretch;
box-sizing: border-box;
}
.u-col-1 {
flex: 0 0 calc(100%/12);
}
.u-col-2 {
flex: 0 0 calc(100%/12 * 2);
}
.u-col-3 {
flex: 0 0 calc(100%/12 * 3);
}
.u-col-4 {
flex: 0 0 calc(100%/12 * 4);
}
.u-col-5 {
flex: 0 0 calc(100%/12 * 5);
}
.u-col-6 {
flex: 0 0 calc(100%/12 * 6);
}
.u-col-7 {
flex: 0 0 calc(100%/12 * 7);
}
.u-col-8 {
flex: 0 0 calc(100%/12 * 8);
}
.u-col-9 {
flex: 0 0 calc(100%/12 * 9);
}
.u-col-10 {
flex: 0 0 calc(100%/12 * 10);
}
.u-col-11 {
flex: 0 0 calc(100%/12 * 11);
}
.u-col-12 {
flex: 0 0 calc(100%/12 * 12);
height: 100%;
}
</style>
......@@ -21,17 +21,26 @@
default: ''
}
},
inject: ['uTable'],
computed: {
thStyle() {
data() {
return {
thStyle: {}
}
},
created() {
this.parent = false;
},
mounted() {
this.parent = this.$u.$parent.call(this, 'u-table');
if (this.parent) {
// 将父组件的相关参数,合并到本组件
let style = {};
if (this.width) style.flex = `0 0 ${this.width}`;
style.textAlign = this.uTable.align;
style.padding = this.uTable.padding;
style.borderBottom = `solid 1px ${this.uTable.borderColor}`;
style.borderRight = `solid 1px ${this.uTable.borderColor}`;
Object.assign(style, this.uTable.thStyle);
return style;
style.textAlign = this.parent.align;
style.padding = this.parent.padding;
style.borderBottom = `solid 1px ${this.parent.borderColor}`;
style.borderRight = `solid 1px ${this.parent.borderColor}`;
Object.assign(style, this.parent.style);
this.thStyle = style;
}
}
};
......
......@@ -38,11 +38,6 @@ export default {
default: 'id'
}
},
provide() {
return {
uWaterfall: this
}
},
data() {
return {
leftList: [],
......
......@@ -37,11 +37,22 @@ u-dropdown {
/* end-微信小程序编译后页面有组件名的元素,特别处理--end */
/* #ifdef MP-QQ */
/* 需要做这一切额外的兼容,都是因为TX的无能 */
/* #ifdef MP-QQ || MP-TOUTIAO */
// 需要做这一切额外的兼容,都是因为TX的无能
u-icon {
line-height: 0;
}
/* #endif */
/* start--头条小程序编译后页面有组件名的元素,特别处理--start */
// 由于头条小程序不支持直接组件名形式写样式,目前只能在写组件的时候给组件加上对应的类名
/* #ifdef MP-TOUTIAO */
.u-td, .u-th, .u-tr {
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