Skip to content

U
uview-ui
Commit a8050ed4 authored by wlxuqu's avatar wlxuqu
Browse files
Options

1. 给Modal弹窗添加clearLoading方法，可以在异步回调中清除loading状态 

2. 给popup弹窗组件添加控制关闭的图标
3. line线条组件增加margin参数
4. search搜索框组件添加控制图标和字体颜色的参数
5. 优化card卡片组件的内部样式
6. 修复http请求loading第二次以后无效的问题
7. 修复微信小程序Link链接组件mp-tips参数无效的问题
8. 瀑布流新增清空列表的clear方法和移除某条数据的remove方法
parent 8f166286
Hide whitespace changes
Inline Side-by-side
Showing with 1066 additions and 702 deletions
manifest.json
View file @ a8050ed4
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
"template" : "template.h5.html", "template" : "template.h5.html",
"router" : { "router" : {
"mode" : "hash", "mode" : "hash",
"base" : "" "base" : "/h5/"
}, },
"optimization" : { "optimization" : {
"treeShaking" : { "treeShaking" : {
......
pages/componentsA/avatarCropper/index.vue
View file @ a8050ed4
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<view class="u-avatar-wrap"> <view class="u-avatar-wrap">
<image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image> <image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image>
</view> </view>
<u-button @tap="chooseAvatar">选择图片</u-button> <u-button @click="chooseAvatar">选择图片</u-button>
</view> </view>
</view> </view>
<!-- <view class="u-config-wrap"> <!-- <view class="u-config-wrap">
......
pages/componentsA/empty/index.vue
View file @ a8050ed4
...@@ -19,54 +19,54 @@ ...@@ -19,54 +19,54 @@
<u-table> <u-table>
<u-tr> <u-tr>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('car')">购物车为空</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('car')">购物车为空</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('page')">页面不存在</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('page')">页面不存在</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('search')">没有搜索结果</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('search')">没有搜索结果</u-button>
</u-td> </u-td>
</u-tr> </u-tr>
<u-tr> <u-tr>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('address')">没有收货地址</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('address')">没有收货地址</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('wifi')">没有WiFi</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('wifi')">没有WiFi</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('order')">订单为空</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('order')">订单为空</u-button>
</u-td> </u-td>
</u-tr> </u-tr>
<u-tr> <u-tr>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('coupon')">没有优惠券</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('coupon')">没有优惠券</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('favor')">没有收藏</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('favor')">没有收藏</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('permission')">无权限</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('permission')">无权限</u-button>
</u-td> </u-td>
</u-tr> </u-tr>
<u-tr> <u-tr>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('history')">无历史记录</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('history')">无历史记录</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('news')">无新闻列表</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('news')">无新闻列表</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('message')">消息列表为空</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('message')">消息列表为空</u-button>
</u-td> </u-td>
</u-tr> </u-tr>
<u-tr> <u-tr>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('list')">列表为空</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('list')">列表为空</u-button>
</u-td> </u-td>
<u-td> <u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('data')">数据为空</u-button> <u-button :hair-line="false" size="mini" @click="modeChange('data')">数据为空</u-button>
</u-td> </u-td>
<u-td> <u-td>
待扩展 待扩展
......
pages/componentsA/modal/index.vue
View file @ a8050ed4
...@@ -5,7 +5,10 @@ ...@@ -5,7 +5,10 @@
<view class="u-demo-area"> <view class="u-demo-area">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">请点击弹出弹窗查看效果</view> <view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
<u-modal v-model="show" :show-cancel-button="true" :show-title="showTitle" :content-slot="contentSlot"> <u-modal ref="uModal" v-model="show" :show-cancel-button="true"
:show-title="showTitle" :content-slot="contentSlot" :async-close="asyncClose"
@confirm="confirm"
>
<view class="warp" style="margin: 30rpx;" v-if="content"> <view class="warp" style="margin: 30rpx;" v-if="content">
<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;" mode="widthFix"></image> <image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;" mode="widthFix"></image>
</view> </view>
...@@ -22,11 +25,14 @@ ...@@ -22,11 +25,14 @@
<view class="u-item-title">是否显示标题</view> <view class="u-item-title">是否显示标题</view>
<u-subsection vibrateShort current="0" :list="['是', '否']" @change="titleChange"></u-subsection> <u-subsection vibrateShort current="0" :list="['是', '否']" @change="titleChange"></u-subsection>
</view> </view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">自定义内容</view> <view class="u-item-title">自定义内容</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="contentChange"></u-subsection> <u-subsection vibrateShort current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
</view> </view>
<view class="u-config-item">
<view class="u-item-title">异步关闭</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="asyncChange"></u-subsection>
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -39,7 +45,8 @@ ...@@ -39,7 +45,8 @@
zoom: false, zoom: false,
content: false, content: false,
showTitle: true, showTitle: true,
contentSlot: false contentSlot: false,
asyncClose: false
}; };
}, },
computed: { computed: {
...@@ -59,6 +66,15 @@ ...@@ -59,6 +66,15 @@
this.contentSlot = !index; this.contentSlot = !index;
this.content = !index; this.content = !index;
this.show = true; this.show = true;
},
asyncChange(index) {
this.show = true;
this.asyncClose = !index;
},
confirm() {
setTimeout(() => {
this.show = false;
}, 2000)
} }
} }
}; };
......
pages/componentsA/verificationCode/index.vue
View file @ a8050ed4
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
@change="codeChange" :startText="startText" :changeText="changeText" @change="codeChange" :startText="startText" :changeText="changeText"
:endText="endText"></u-verification-code> :endText="endText"></u-verification-code>
<u-button @tap="getCode">{{tips}}</u-button> <u-button @click="getCode">{{tips}}</u-button>
<u-button :custom-style="{marginTop: '30rpx'}" @tap="reset" style="margin-top: 30rpx;">重置</u-button> <u-button :custom-style="{marginTop: '30rpx'}" @tap="reset" style="margin-top: 30rpx;">重置</u-button>
</view> </view>
</view> </view>
......
pages/componentsB/card/index.vue
View file @ a8050ed4
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image> <image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
</view> </view>
</view> </view>
<view class="" slot="foot" v-if="bottomSlot"> <view class="" slot="foot">
<u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon> <u-icon v-if="bottomSlot" name="chat-fill" size="34" color="" label="30评论"></u-icon>
</view> </view>
</u-card> </u-card>
</view> </view>
......
pages/componentsB/waterfall/index.vue
View file @ a8050ed4
<template> <template>
<view class="wrap"> <view class="wrap">
<u-waterfall :flowList="flowList"> <u-waterfall :flowList="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}"> <template v-slot:left="{ leftList }">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index"> <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 --> <!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<view class="demo-img-wrap"> <view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
<image class="demo-image" :src="item.image" mode="widthFix"></image> <!-- #endif -->
</view> <view class="demo-title">{{ item.title }}</view>
<!-- #endif --> <view class="demo-price">{{ item.price }}元</view>
<view class="demo-title"> <view class="demo-tag">
{{item.title}} <view class="demo-tag-owner">自营</view>
</view> <view class="demo-tag-text">放心购</view>
<view class="demo-price">
{{item.price}}元
</view>
<view class="demo-tag">
<view class="demo-tag-owner">
自营
</view>
<view class="demo-tag-text">
放心购
</view>
</view>
<view class="demo-shop">
{{item.shop}}
</view>
</view> </view>
<view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
</view>
</template> </template>
<template v-slot:right="{rightList}"> <template v-slot:right="{ rightList }">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index"> <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<view class="demo-img-wrap"> <view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
<image class="demo-image" :src="item.image" mode="widthFix"></image> <!-- #endif -->
</view> <view class="demo-title">{{ item.title }}</view>
<!-- #endif --> <view class="demo-price">{{ item.price }}元</view>
<view class="demo-title"> <view class="demo-tag">
{{item.title}} <view class="demo-tag-owner">自营</view>
</view> <view class="demo-tag-text">放心购</view>
<view class="demo-price">
{{item.price}}元
</view>
<view class="demo-tag">
<view class="demo-tag-owner">
自营
</view>
<view class="demo-tag-text">
放心购
</view>
</view>
<view class="demo-shop">
{{item.shop}}
</view>
</view> </view>
<view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
</view>
</template> </template>
</u-waterfall> </u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
...@@ -66,174 +46,186 @@ ...@@ -66,174 +46,186 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
loadStatus: 'loadmore', loadStatus: 'loadmore',
flowList: [], flowList: [],
list: [ list: [
{ {
price: 35, price: 35,
title: '北国风光，千里冰封，万里雪飘', title: '北国风光，千里冰封，万里雪飘',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg', image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg'
}, },
{ {
price: 75, price: 75,
title: '望长城内外，惟余莽莽', title: '望长城内外，惟余莽莽',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg', image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg'
}, },
{ {
price: 385, price: 385,
title: '大河上下，顿失滔滔', title: '大河上下，顿失滔滔',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
}, },
{ {
price: 784, price: 784,
title: '欲与天公试比高', title: '欲与天公试比高',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg', image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg'
}, },
{ {
price: 7891, price: 7891,
title: '须晴日，看红装素裹，分外妖娆', title: '须晴日，看红装素裹，分外妖娆',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg', image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg'
}, },
{ {
price: 2341, price: 2341,
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
title: '江山如此多娇，引无数英雄竞折腰', title: '江山如此多娇，引无数英雄竞折腰',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg', image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg'
}, },
{ {
price: 661, price: 661,
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
title: '惜秦皇汉武，略输文采', title: '惜秦皇汉武，略输文采',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg', image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg'
}, },
{ {
price: 1654, price: 1654,
title: '唐宗宋祖，稍逊风骚', title: '唐宗宋祖，稍逊风骚',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
}, },
{ {
price: 1678, price: 1678,
title: '一代天骄，成吉思汗', title: '一代天骄，成吉思汗',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
}, },
{ {
price: 924, price: 924,
title: '只识弯弓射大雕', title: '只识弯弓射大雕',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
}, },
{ {
price: 8243, price: 8243,
title: '俱往矣，数风流人物，还看今朝', title: '俱往矣，数风流人物，还看今朝',
shop: '李白杜甫白居易旗舰店', shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg', image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
}, }
] ]
} };
}, },
onLoad() { onLoad() {
this.addRandomData();
},
onReachBottom() {
this.loadStatus = 'loading';
// 模拟数据加载
setTimeout(() => {
this.addRandomData(); this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000);
},
methods: {
addRandomData() {
for (let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]));
item.id = this.$u.guid();
this.flowList.push(item);
}
}, },
onReachBottom() { remove(id) {
this.loadStatus = 'loading'; this.$refs.uWaterfall.remove(id);
// 模拟数据加载
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
}, },
methods: { clear() {
addRandomData() { this.$refs.uWaterfall.clear();
for(let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.flowList.push(item);
}
}
} }
} }
};
</script> </script>
<style> <style>
/* page不能写带scope的style标签中，否则无效 */ /* page不能写带scope的style标签中，否则无效 */
page { page {
background-color: rgb(240, 240, 240); background-color: rgb(240, 240, 240);
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.demo-warter { .demo-warter {
border-radius: 8px; border-radius: 8px;
margin: 5px; margin: 5px;
background-color: #FFFFFF; background-color: #ffffff;
padding: 8px; padding: 8px;
} position: relative;
}
.demo-img-wrap {
.u-close {
} position: absolute;
top: 32rpx;
.demo-image { right: 32rpx;
width: 100%; }
border-radius: 4px;
} .demo-img-wrap {
}
.demo-title {
font-size: 30rpx; .demo-image {
margin-top: 5px; width: 100%;
color: $u-main-color; border-radius: 4px;
} }
.demo-tag { .demo-title {
display: flex; font-size: 30rpx;
margin-top: 5px; margin-top: 5px;
} color: $u-main-color;
}
.demo-tag-owner {
background-color: $u-type-error; .demo-tag {
color: #FFFFFF; display: flex;
display: flex; margin-top: 5px;
align-items: center; }
padding: 4rpx 14rpx;
border-radius: 50rpx; .demo-tag-owner {
font-size: 20rpx; background-color: $u-type-error;
line-height: 1; color: #ffffff;
} display: flex;
align-items: center;
.demo-tag-text { padding: 4rpx 14rpx;
border: 1px solid $u-type-primary; border-radius: 50rpx;
color: $u-type-primary; font-size: 20rpx;
margin-left: 10px; line-height: 1;
border-radius: 50rpx; }
line-height: 1;
padding: 4rpx 14rpx; .demo-tag-text {
display: flex; border: 1px solid $u-type-primary;
align-items: center; color: $u-type-primary;
border-radius: 50rpx; margin-left: 10px;
font-size: 20rpx; border-radius: 50rpx;
} line-height: 1;
padding: 4rpx 14rpx;
.demo-price { display: flex;
font-size: 30rpx; align-items: center;
color: $u-type-error; border-radius: 50rpx;
margin-top: 5px; font-size: 20rpx;
} }
.demo-shop { .demo-price {
font-size: 22rpx; font-size: 30rpx;
color: $u-tips-color; color: $u-type-error;
margin-top: 5px; margin-top: 5px;
} }
.demo-shop {
font-size: 22rpx;
color: $u-tips-color;
margin-top: 5px;
}
</style> </style>
pages/componentsC/actionSheet/index.vue
View file @ a8050ed4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-button @tap="showAction">唤起ActionSheet</u-button> <u-button @click="showAction">唤起ActionSheet</u-button>
<u-action-sheet :cancel-btn="cancel" :mask-close-able="maskClick" :tips="tips" <u-action-sheet :cancel-btn="cancel" :mask-close-able="maskClick" :tips="tips"
@click="click" :list="list" v-model="show" :safe-area-inset-bottom="true"></u-action-sheet> @click="click" :list="list" v-model="show" :safe-area-inset-bottom="true"></u-action-sheet>
</view> </view>
......
pages/componentsC/button/index.vue
View file @ a8050ed4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-button @tap="btnClick" :loading="loading" :plain="plain" :shape="shape" :size="size" :ripple="ripple" :hairLine="hairLine" :type="type">山川异域，风月同天</u-button> <u-button @click="btnClick" :loading="loading" :plain="plain" :shape="shape" :size="size" :ripple="ripple" :hairLine="hairLine" :type="type">山川异域，风月同天</u-button>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
......
pages/componentsC/popup/index.vue
View file @ a8050ed4
...@@ -4,8 +4,13 @@ ...@@ -4,8 +4,13 @@
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-button @tap="show = true">唤起弹窗</u-button> <u-button @click="btnClick">唤起弹窗</u-button>
<u-popup border-radius="10" v-model="show" @close="close" @open="open" :mode="mode" length="50%" :mask="mask"> <u-popup border-radius="10" v-model="show"
@close="close" @open="open" :mode="mode"
length="50%" :mask="mask"
:closeable="closeable"
:close-icon-pos="closeIconPos"
>
<view v-if="mode == 'center'" style="width: 400rpx;height: 400rpx"> <view v-if="mode == 'center'" style="width: 400rpx;height: 400rpx">
<view class="close-btn"> <view class="close-btn">
<u-button @click="show = false;" size="medium">关闭弹窗</u-button> <u-button @click="show = false;" size="medium">关闭弹窗</u-button>
...@@ -29,6 +34,14 @@ ...@@ -29,6 +34,14 @@
<view class="u-item-title">弹出方向</view> <view class="u-item-title">弹出方向</view>
<u-subsection vibrateShort :current="2" :list="['上', '下', '左', '右', '中']" @change="modeChange"></u-subsection> <u-subsection vibrateShort :current="2" :list="['上', '下', '左', '右', '中']" @change="modeChange"></u-subsection>
</view> </view>
<view class="u-config-item">
<view class="u-item-title">关闭按钮</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="closeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">关闭按钮位置</view>
<u-subsection vibrateShort :current="1" :list="['左上角', '右上角', '左下角', '右下角']" @change="closePosChange"></u-subsection>
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -40,6 +53,8 @@ ...@@ -40,6 +53,8 @@
show: false, show: false,
mode: 'left', mode: 'left',
mask: true, // 是否显示遮罩 mask: true, // 是否显示遮罩
closeable: true,
closeIconPos: 'top-right'
} }
}, },
watch: { watch: {
...@@ -55,11 +70,22 @@ ...@@ -55,11 +70,22 @@
showChange(index) { showChange(index) {
this.show = index == 0 ? true : false; this.show = index == 0 ? true : false;
}, },
closeChange(index) {
this.closeable = !index;
},
closePosChange(index) {
this.closeIconPos = ['top-left', 'top-right', 'bottom-left', 'bottom-right'][index];
},
close() { close() {
// console.log('close'); // console.log('close');
}, },
open() { open() {
// console.log('open'); // console.log('open');
},
btnClick() {
console.log(this.show);
this.show = true;
console.log(this.show);
} }
} }
} }
......
pages/componentsC/test/index.vue
View file @ a8050ed4
<template> <template>
<u-card :title="title" :sub-title="subTitle" :thumb="thumb"> <view class="wrap">
<view class="" slot="body"> <u-button @click="clear">清空列表</u-button>
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"> <u-waterfall :flowList="flowList" ref="uWaterfall">
<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view> <template v-slot:left="{leftList}">
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image> <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
</view> <!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
<view class="u-body-item u-flex u-row-between u-p-b-0"> <!-- #ifndef MP-WEIXIN -->
<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view> <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image> <!-- #endif -->
</view> <!-- #ifdef MP-WEIXIN -->
</view> <view class="demo-img-wrap">
<view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view> <image class="demo-image" :src="item.image" mode="widthFix"></image>
</u-card> </view>
<!-- #endif -->
<view class="demo-title">
{{item.title}}
</view>
<view class="demo-price">
{{item.price}}元
</view>
<view class="demo-tag">
<view class="demo-tag-owner">
自营
</view>
<view class="demo-tag-text">
放心购
</view>
</view>
<view class="demo-shop">
{{item.shop}}
</view>
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<!-- #ifndef MP-WEIXIN -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="demo-img-wrap">
<image class="demo-image" :src="item.image" mode="widthFix"></image>
</view>
<!-- #endif -->
<view class="demo-title">
{{item.title}}
</view>
<view class="demo-price">
{{item.price}}元
</view>
<view class="demo-tag">
<view class="demo-tag-owner">
自营
</view>
<view class="demo-tag-text">
放心购
</view>
</view>
<view class="demo-shop">
{{item.shop}}
</view>
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
</view>
</template>
</u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
title: '素胚勾勒出青花，笔锋浓转淡', loadStatus: 'loadmore',
subTitle: '2020-05-15', flowList: [],
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', list: [
}; {
} price: 35,
}; title: '北国风光，千里冰封，万里雪飘',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
},
{
price: 75,
title: '望长城内外，惟余莽莽',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
},
{
price: 385,
title: '大河上下，顿失滔滔',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
},
{
price: 784,
title: '欲与天公试比高',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
},
{
price: 7891,
title: '须晴日，看红装素裹，分外妖娆',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
},
{
price: 2341,
shop: '李白杜甫白居易旗舰店',
title: '江山如此多娇，引无数英雄竞折腰',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
},
{
price: 661,
shop: '李白杜甫白居易旗舰店',
title: '惜秦皇汉武，略输文采',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
},
{
price: 1654,
title: '唐宗宋祖，稍逊风骚',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 1678,
title: '一代天骄，成吉思汗',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 924,
title: '只识弯弓射大雕',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 8243,
title: '俱往矣，数风流人物，还看今朝',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
]
}
},
onLoad() {
this.addRandomData();
},
onReachBottom() {
this.loadStatus = 'loading';
// 模拟数据加载
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
},
methods: {
addRandomData() {
for(let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.flowList.push(item);
}
},
remove(id) {
this.$refs.uWaterfall.remove(id);
},
clear() {
this.$refs.uWaterfall.clear();
}
}
}
</script> </script>
<style scoped lang="scss"> <style>
.u-card-wrap { /* page不能写带scope的style标签中，否则无效 */
background-color: $u-bg-color; page {
padding: 1px; background-color: rgb(240, 240, 240);
}
</style>
<style lang="scss" scoped>
.demo-warter {
border-radius: 8px;
margin: 5px;
background-color: #ffffff;
padding: 8px;
position: relative;
} }
.u-body-item { .u-close {
font-size: 32rpx; position: absolute;
color: #333; top: 32rpx;
padding: 20rpx 10rpx; right: 32rpx;
} }
.u-body-item image { .demo-image {
width: 120rpx; width: 100%;
flex: 0 0 120rpx; border-radius: 4px;
height: 120rpx;
border-radius: 8rpx;
margin-left: 12rpx;
} }
</style>
.demo-title {
font-size: 30rpx;
margin-top: 5px;
color: $u-main-color;
}
.demo-tag {
display: flex;
margin-top: 5px;
}
.demo-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.demo-tag-text {
border: 1px solid $u-type-primary;
color: $u-type-primary;
margin-left: 10px;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.demo-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
}
.demo-shop {
font-size: 22rpx;
color: $u-tips-color;
margin-top: 5px;
}
</style>
\ No newline at end of file
pages/library/colorSwitch/index.vue
View file @ a8050ed4
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</view> </view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">颜色渐变(rgb(21,21,21)-rgb(56,56,56)，分10份)</view> <view class="u-item-title">颜色渐变(rgb(21,21,21)-rgb(56,56,56)，分10份)</view>
<u-button @tap="colorGradientChange">执行</u-button> <u-button @click="colorGradientChange">执行</u-button>
</view> </view>
</view> </view>
</view> </view>
......
pages/library/getRect/index.vue
View file @ a8050ed4
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<view class="u-demo-result-line">{{ JSON.stringify(result) }}</view> <view class="u-demo-result-line">{{ JSON.stringify(result) }}</view>
</view> </view>
<view class="jump-to-top"> <view class="jump-to-top">
<u-button @tap="scrollToTop" :style="{ <u-button @click="scrollToTop" :style="{
display: top ? 'block' : 'none' display: top ? 'block' : 'none'
}"> }">
点我自动滚动到顶部 点我自动滚动到顶部
......
pages/library/random/index.vue
View file @ a8050ed4
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<view class="u-item-title">操作</view> <view class="u-item-title">操作</view>
<u-subsection vibrateShort :list="['min=0, max=5', 'min=541, max=8164']" @change="paramsChange"></u-subsection> <u-subsection vibrateShort :list="['min=0, max=5', 'min=541, max=8164']" @change="paramsChange"></u-subsection>
<view class="u-btn-wrap"> <view class="u-btn-wrap">
<u-button @tap="getResult">执行</u-button> <u-button @click="getResult">执行</u-button>
</view> </view>
</view> </view>
</view> </view>
......
pages/library/randomArray/index.vue
View file @ a8050ed4
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</view> </view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">操作</view> <view class="u-item-title">操作</view>
<u-button @tap="getResult">执行</u-button> <u-button @click="getResult">执行</u-button>
</view> </view>
</view> </view>
</view> </view>
......
pages/library/route/index.vue
View file @ a8050ed4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-button @tap="openPage">点击跳转</u-button> <u-button @click="openPage">点击跳转</u-button>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
......
pages/library/route/routeTo.vue
View file @ a8050ed4
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
收到的参数为：{{paramsStr}} 收到的参数为：{{paramsStr}}
</view> </view>
<view class="u-btn-wrap"> <view class="u-btn-wrap">
<u-button @tap="back">返回</u-button> <u-button @click="back">返回</u-button>
</view> </view>
</view> </view>
</view> </view>
......
template.h5.html
View file @ a8050ed4
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
</title> </title>
<!-- 正式发布的时候使用，开发期间不启用。↓ --> <!-- 正式发布的时候使用，开发期间不启用。↓ -->
<script src="/static/common/js/touch-emulator.js"></script> <script src="<%= BASE_URL %>/static/common/js/touch-emulator.js"></script>
<script> <script>
TouchEmulator(); TouchEmulator();
</script> </script>
......
uview-ui/components/u-card/u-card.vue
View file @ a8050ed4
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
@tap="headClick" @tap="headClick"
> >
<view v-if="!$slots.head" class="u-flex u-row-between"> <view v-if="!$slots.head" class="u-flex u-row-between">
<view class="u-card__head--left u-flex" v-if="title"> <view class="u-card__head--left u-flex u-line-1" v-if="title">
<image <image
:src="thumb" :src="thumb"
class="u-card__head--left__thumb" class="u-card__head--left__thumb"
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
{{ title }} {{ title }}
</text> </text>
</view> </view>
<view class="u-card__head--right" v-if="subTitle"> <view class="u-card__head--right u-line-1" v-if="subTitle">
<text <text
class="u-card__head__title__text" class="u-card__head__title__text"
:style="{ :style="{
...@@ -260,6 +260,7 @@ export default { ...@@ -260,6 +260,7 @@ export default {
&--right { &--right {
color: $u-tips-color; color: $u-tips-color;
margin-left: 6rpx;
} }
} }
......
uview-ui/components/u-line/u-line.vue
View file @ a8050ed4
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
* @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等 * @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
* @property {String} direction 线条的方向，row-横向，col-竖向(默认row) * @property {String} direction 线条的方向，row-横向，col-竖向(默认row)
* @property {Boolean} hair-line 是否显示细线条(默认true) * @property {Boolean} hair-line 是否显示细线条(默认true)
* @property {String} margin 线条与上下左右元素的间距，字符串形式，如"30rpx"
* @example <u-line color="red"></u-line> * @example <u-line color="red"></u-line>
*/ */
export default { export default {
...@@ -36,17 +37,25 @@ ...@@ -36,17 +37,25 @@
hairLine: { hairLine: {
type: Boolean, type: Boolean,
default: true default: true
},
// 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"
margin: {
type: String,
default: '0'
} }
}, },
computed: { computed: {
lineStyle() { lineStyle() {
let style = {}; let style = {};
style.backgroundColor = this.color; style.backgroundColor = this.color;
style.margin = this.margin;
// 如果是水平线条，高度为1px，再通过transform缩小一半，就是0.5px了
if(this.direction == 'row') { if(this.direction == 'row') {
style.height = '1px'; style.height = '1px';
style.width = this.length; style.width = this.length;
if(this.hairLine) style.transform = 'scaleY(0.5)'; if(this.hairLine) style.transform = 'scaleY(0.5)';
} else { } else {
// 如果是竖向线条，宽度为1px，再通过transform缩小一半，就是0.5px了
style.width = '1px'; style.width = '1px';
style.height = this.length; style.height = this.length;
if(this.hairLine) style.transform = 'scaleX(0.5)'; if(this.hairLine) style.transform = 'scaleX(0.5)';
......
uview-ui/components/u-link/u-link.vue
View file @ a8050ed4
...@@ -66,11 +66,13 @@ ...@@ -66,11 +66,13 @@
// #endif // #endif
// #ifdef MP // #ifdef MP
uni.setClipboardData({ uni.setClipboardData({
data: this.href data: this.href,
success() {
uni.hideToast();
}
}); });
uni.showToast({ this.$nextTick(() => {
title: this.mpTips, this.$u.toast(this.mpTips);
icon: 'none'
}) })
// #endif // #endif
} }
......
uview-ui/components/u-modal/u-modal.vue
View file @ a8050ed4
...@@ -237,6 +237,10 @@ export default { ...@@ -237,6 +237,10 @@ export default {
// 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal // 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
popupClose() { popupClose() {
this.$emit('input', false); this.$emit('input', false);
},
//
clearLoading() {
this.loading = false;
} }
} }
}; };
......
uview-ui/components/u-popup/u-popup.vue
View file @ a8050ed4
<template> <template>
<view v-if="visibleSync" :style="[customStyle]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer"> <view v-if="visibleSync" :style="[customStyle]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer">
<u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask> <u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask>
<view class="u-drawer-content" @tap="modeCenterClose(mode)" :class="[ <view
class="u-drawer-content"
@tap="modeCenterClose(mode)"
:class="[
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '', safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
'u-drawer-' + mode, 'u-drawer-' + mode,
showDrawer ? 'u-drawer-content-visible' : '', showDrawer ? 'u-drawer-content-visible' : '',
zoom && mode == 'center' ? 'u-animation-zoom' : '' zoom && mode == 'center' ? 'u-animation-zoom' : ''
]" ]"
@touchmove.stop.prevent @tap.stop.prevent :style="[style]"> @touchmove.stop.prevent
<view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]"> @tap.stop.prevent
:style="[style]"
>
<view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]">
<u-icon @click="close" v-if="closeable" class="u-close" :class="['u-close--' + closeIconPos]" :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
<slot /> <slot />
</view> </view>
<block v-else> <block v-else><slot /></block>
<slot /> <u-icon v-if="mode != 'center' && closeable" @click="close" class="u-close" :class="['u-close--' + closeIconPos]" :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
</block>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
/** /**
* popup 弹窗 * popup 弹窗
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
* @tutorial https://www.uviewui.com/components/popup.html * @tutorial https://www.uviewui.com/components/popup.html
* @property {String} mode 弹出方向（默认left） * @property {String} mode 弹出方向（默认left）
* @property {Boolean} mask 是否显示遮罩（默认true） * @property {Boolean} mask 是否显示遮罩（默认true）
* @property {String Number} length mode=left | 见官网说明（默认auto） * @property {Stringr | Number} length mode=left | 见官网说明（默认auto）
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true） * @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true） * @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
* @property {Object} custom-style 用户自定义样式 * @property {Object} custom-style 用户自定义样式
* @property {Number String} border-radius 弹窗圆角值（默认0） * @property {Numberr | String} border-radius 弹窗圆角值（默认0）
* @property {Number String} z-index 弹出内容的z-index值（默认1075） * @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
* @event {Function} open 弹出层打开 * @property {Boolean} closeable 是否显示关闭图标（默认false）
* @event {Function} close 弹出层收起 * @property {String} close-icon 关闭图标的名称，只能uView的内置图标
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup> * @property {String} close-icon-pos 自定义关闭图标位置（默认top-right）
*/ * @property {String} close-icon-color 关闭图标的颜色（默认#909399）
export default { * @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30）
name: 'u-popup', * @event {Function} open 弹出层打开
props: { * @event {Function} close 弹出层收起
/** * @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
* 显示状态 */
*/ export default {
show: { name: 'u-popup',
type: Boolean, props: {
default: false /**
}, * 显示状态
/** */
* 弹出方向，left|right|top|bottom|center show: {
*/ type: Boolean,
mode: { default: false
type: String, },
default: 'left' /**
}, * 弹出方向，left|right|top|bottom|center
/** */
* 是否显示遮罩 mode: {
*/ type: String,
mask: { default: 'left'
type: Boolean, },
default: true /**
}, * 是否显示遮罩
// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto" */
// 或者百分比"50%"，表示由内容撑开高度或者宽度 mask: {
length: { type: Boolean,
type: [Number, String], default: true
default: 'auto' },
}, // 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
// 是否开启缩放动画，只在mode=center时有效 // 或者百分比"50%"，表示由内容撑开高度或者宽度
zoom: { length: {
type: Boolean, type: [Number, String],
default: true default: 'auto'
}, },
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 // 是否开启缩放动画，只在mode=center时有效
safeAreaInsetBottom: { zoom: {
type: Boolean, type: Boolean,
default: false default: true
}, },
// 是否可以通过点击遮罩进行关闭 // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
maskCloseAble: { safeAreaInsetBottom: {
type: Boolean, type: Boolean,
default: true default: false
}, },
// 用户自定义样式 // 是否可以通过点击遮罩进行关闭
customStyle: { maskCloseAble: {
type: Object, type: Boolean,
default () { default: true
return {}; },
} // 用户自定义样式
}, customStyle: {
value: { type: Object,
type: Boolean, default() {
default: false return {};
},
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
// 对v-model双向绑定多层调用造成报错不能修改props值的问题
popup: {
type: Boolean,
default: true
},
// 显示显示弹窗的圆角，单位rpx
borderRadius: {
type: [Number, String],
default: 0
},
zIndex: {
type: [Number, String],
default: ''
} }
}, },
data() { value: {
return { type: Boolean,
visibleSync: false, default: false
showDrawer: false,
timer: null,
style1: {}
};
}, },
computed: { // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom) // 对v-model双向绑定多层调用造成报错不能修改props值的问题
style() { popup: {
let style = {}; type: Boolean,
let translate = '100%'; default: true
// 判断是否是否百分比或者auto值，是的话，直接使用该值，否则默认为rpx单位的数值 },
let length = (/%$/.test(this.length) || this.length == 'auto') ? this.length : uni.upx2px(this.length) + 'px'; // 显示显示弹窗的圆角，单位rpx
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏 borderRadius: {
if (this.mode == 'left' || this.mode == 'top') translate = length == 'auto' ? '-100%' : '-' + length; type: [Number, String],
if (this.mode == 'left' || this.mode == 'right') { default: 0
style = { },
width: length, zIndex: {
height: '100%', type: [Number, String],
transform: `translate3D(${translate},0px,0px)` default: ''
}; },
} else if (this.mode == 'top' || this.mode == 'bottom') { // 是否显示关闭图标
style = { closeable: {
width: '100%', type: Boolean,
height: length, default: false
transform: `translate3D(0px,${translate},0px)` },
}; // 关闭图标的名称，只能uView的内置图标
} closeIcon: {
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup; type: String,
// 如果用户设置了borderRadius值，添加弹窗的圆角 default: 'close'
if (this.borderRadius) { },
switch (this.mode) { // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
case 'left': closeIconPos: {
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`; type: String,
break; default: 'top-right'
case 'top': },
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`; // 关闭图标的颜色
break; closeIconColor: {
case 'right': type: String,
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`; default: '#909399'
break; },
case 'bottom': // 关闭图标的大小，单位rpx
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`; closeIconSize: {
break; type: [String, Number],
default: default: '30'
; }
} },
// 不加可能圆角无效 data() {
style.overflow = 'hidden'; return {
} visibleSync: false,
return style; showDrawer: false,
}, timer: null,
// 中部弹窗的特有样式 style1: {}
centerStyle() { };
let style = {}; },
let length = (/%$/.test(this.length) || this.length == 'auto') ? this.length : uni.upx2px(this.length) + 'px'; computed: {
style.width = length; // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup; style() {
if (this.borderRadius) { let style = {};
style.borderRadius = `${this.borderRadius}rpx`; let translate = '100%';
// 不加可能圆角无效 // 判断是否是否百分比或者auto值，是的话，直接使用该值，否则默认为rpx单位的数值
style.overflow = 'hidden'; let length = /%$/.test(this.length) || this.length == 'auto' ? this.length : uni.upx2px(this.length) + 'px';
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
if (this.mode == 'left' || this.mode == 'top') translate = length == 'auto' ? '-100%' : '-' + length;
if (this.mode == 'left' || this.mode == 'right') {
style = {
width: length,
height: '100%',
transform: `translate3D(${translate},0px,0px)`
};
} else if (this.mode == 'top' || this.mode == 'bottom') {
style = {
width: '100%',
height: length,
transform: `translate3D(0px,${translate},0px)`
};
}
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
// 如果用户设置了borderRadius值，添加弹窗的圆角
if (this.borderRadius) {
switch (this.mode) {
case 'left':
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`;
break;
case 'top':
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`;
break;
case 'right':
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`;
break;
case 'bottom':
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`;
break;
default:
} }
return style; // 不加可能圆角无效
style.overflow = 'hidden';
} }
return style;
}, },
watch: { // 中部弹窗的特有样式
value(val) { centerStyle() {
if (val) { let style = {};
this.open(); let length = /%$/.test(this.length) || this.length == 'auto' ? this.length : uni.upx2px(this.length) + 'px';
} else { style.width = length;
this.close(); style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
} if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}rpx`;
// 不加可能圆角无效
style.overflow = 'hidden';
}
return style;
}
},
watch: {
value(val) {
if (val) {
this.open();
} else {
this.close();
} }
}
},
created() {
// 先让弹窗组件渲染，再改变遮罩和抽屉元素的样式，让其动画其起作用(必须要有延时，才会有效果)
this.visibleSync = this.value;
setTimeout(() => {
this.showDrawer = this.value;
}, 30);
},
methods: {
// 遮罩被点击
maskClick() {
this.close();
}, },
created() { close() {
// 先让弹窗组件渲染，再改变遮罩和抽屉元素的样式，让其动画其起作用(必须要有延时，才会有效果) this.change('showDrawer', 'visibleSync', false);
this.visibleSync = this.value;
setTimeout(() => {
this.showDrawer = this.value;
}, 30);
}, },
methods: { // 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
// 遮罩被点击 // 让其只在mode=center时起作用
maskClick() { modeCenterClose(mode) {
this.close(); if (mode != 'center' || !this.maskCloseAble) return;
}, this.close();
close() { },
this.change('showDrawer', 'visibleSync', false); open() {
}, this.change('visibleSync', 'showDrawer', true);
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗 },
// 让其只在mode=center时起作用 // 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
modeCenterClose(mode) { // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
if (mode != 'center' || !this.maskCloseAble) return; change(param1, param2, status) {
this.close(); // 如果this.popup为false，以为着为picker，actionsheet等组件调用了popup组件
}, if (this.popup == true) this.$emit('input', status);
open() { this[param1] = status;
this.change('visibleSync', 'showDrawer', true); if (this.timer) {
}, clearTimeout(this.timer);
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
change(param1, param2, status) {
// 如果this.popup为false，以为着为picker，actionsheet等组件调用了popup组件
if (this.popup == true) this.$emit('input', status);
this[param1] = status;
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(
() => {
this[param2] = status;
this.$emit(status ? 'open' : 'close');
},
status ? 30 : 300
);
} }
this.timer = setTimeout(
() => {
this[param2] = status;
this.$emit(status ? 'open' : 'close');
},
status ? 30 : 300
);
} }
}; }
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.u-drawer { .u-drawer {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
z-index: 999; z-index: 999;
} }
.u-drawer-content { .u-drawer-content {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: absolute; position: absolute;
z-index: 1003; z-index: 1003;
transition: all 0.25s linear; transition: all 0.25s linear;
} }
.u-drawer-left { .u-drawer-left {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-right { .u-drawer-right {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-top { .u-drawer-top {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-bottom { .u-drawer-bottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-center { .u-drawer-center {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* #endif */ /* #endif */
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
opacity: 0; opacity: 0;
z-index: 99999; z-index: 99999;
} }
.u-mode-center-box { .u-mode-center-box {
min-width: 100rpx; min-width: 100rpx;
min-height: 100rpx; min-height: 100rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: relative; position: relative;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-content-visible.u-drawer-center { .u-drawer-content-visible.u-drawer-center {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
.u-animation-zoom { .u-animation-zoom {
transform: scale(1.15); transform: scale(1.15);
} }
.u-drawer-content-visible { .u-drawer-content-visible {
transform: translate3D(0px, 0px, 0px) !important; transform: translate3D(0px, 0px, 0px) !important;
} }
.u-drawer-mask { .u-drawer-mask {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition: opacity 0.25s; transition: opacity 0.25s;
} }
.u-drawer-mask-visible { .u-drawer-mask-visible {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
opacity: 1; opacity: 1;
} }
.u-close {
position: absolute;
z-index: 1;
}
.u-close--top-left {
top: 30rpx;
left: 30rpx;
}
.u-close--top-right {
top: 30rpx;
right: 30rpx;
}
.u-close--bottom-left {
bottom: 30rpx;
left: 30rpx;
}
.u-close--bottom-right {
right: 30rpx;
bottom: 30rpx;
}
</style> </style>
uview-ui/components/u-search/u-search.vue
View file @ a8050ed4
<template> <template>
<view class="u-search"> <view class="u-search" :style="{
margin: margin,
}">
<view <view
class="u-content" class="u-content"
:style="{ :style="{
...@@ -9,7 +11,7 @@ ...@@ -9,7 +11,7 @@
height: height + 'rpx' height: height + 'rpx'
}" }"
> >
<view class="u-icon-wrap"><u-icon class="u-clear-icon" :size="30" name="search" color="#909399"></u-icon></view> <view class="u-icon-wrap"><u-icon class="u-clear-icon" :size="30" name="search" :color="searchIconColor ? searchIconColor : color"></u-icon></view>
<input <input
confirm-type="search" confirm-type="search"
@blur="blur" @blur="blur"
...@@ -22,10 +24,12 @@ ...@@ -22,10 +24,12 @@
:focus="focus" :focus="focus"
placeholder-class="u-placeholder-class" placeholder-class="u-placeholder-class"
:placeholder="placeholder" :placeholder="placeholder"
:placeholder-style="`color: ${placeholderColor}`"
class="u-input" class="u-input"
type="text" type="text"
:style="[{ :style="[{
textAlign: inputAlign textAlign: inputAlign,
color: color
}, inputStyle]" }, inputStyle]"
/> />
<view class="u-close-wrap" v-if="keyword && clearabled && focused" @touchstart="clear"> <view class="u-close-wrap" v-if="keyword && clearabled && focused" @touchstart="clear">
...@@ -55,6 +59,10 @@ ...@@ -55,6 +59,10 @@
* @property {Object} action-style 右侧控件的样式，对象形式 * @property {Object} action-style 右侧控件的样式，对象形式
* @property {String} input-align 输入框内容水平对齐方式（默认left） * @property {String} input-align 输入框内容水平对齐方式（默认left）
* @property {Boolean} disabled 是否启用输入框（默认false） * @property {Boolean} disabled 是否启用输入框（默认false）
* @property {String} search-icon-color 搜索图标的颜色，默认同输入框字体颜色
* @property {String} color 输入框字体颜色（默认#606266）
* @property {String} placeholder-color placeholder的颜色（默认#909399）
* @property {String} margin 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"
* @property {Boolean} animation 是否开启动画，见上方说明（默认false） * @property {Boolean} animation 是否开启动画，见上方说明（默认false）
* @property {String} value 输入框初始值 * @property {String} value 输入框初始值
* @property {Boolean} input-style input输入框的样式，可以定义文字颜色，大小等，对象形式 * @property {Boolean} input-style input输入框的样式，可以定义文字颜色，大小等，对象形式
...@@ -150,6 +158,26 @@ export default { ...@@ -150,6 +158,26 @@ export default {
maxlength: { maxlength: {
type: [Number, String], type: [Number, String],
default: -1 default: -1
},
// 搜索图标的颜色，默认同输入框字体颜色
searchIconColor: {
type: String,
default: ''
},
// 输入框字体颜色
color: {
type: String,
default: '#606266'
},
// placeholder的颜色
placeholderColor: {
type: String,
default: '#909399'
},
// 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法
margin: {
type: String,
default: '0'
} }
}, },
data() { data() {
......
uview-ui/components/u-waterfall/u-waterfall.vue
View file @ a8050ed4
<template> <template>
<view class="u-waterfall"> <view class="u-waterfall">
<view id="u-left-cloumn" class="u-cloumn"> <view id="u-left-cloumn" class="u-cloumn"><slot name="left" :leftList="leftList"></slot></view>
<slot name="left" :leftList="leftList"></slot> <view id="u-right-cloumn" class="u-cloumn"><slot name="right" :rightList="rightList"></slot></view>
</view>
<view id="u-right-cloumn" class="u-cloumn">
<slot name="right" :rightList="rightList"></slot>
</view>
</view> </view>
</template> </template>
<script> <script>
/** /**
* waterfall 瀑布流 * waterfall 瀑布流
* @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uView的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。 * @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uView的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
* @tutorial https://www.uviewui.com/components/waterfall.html * @tutorial https://www.uviewui.com/components/waterfall.html
* @property {Array} flow-list 用于渲染的数据 * @property {Array} flow-list 用于渲染的数据
* @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200） * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
* @example <u-waterfall :flowList="flowList"></u-waterfall> * @example <u-waterfall :flowList="flowList"></u-waterfall>
*/ */
export default { export default {
name: "u-waterfall", name: "u-waterfall",
props: { props: {
flowList: { flowList: {
// 瀑布流数据 // 瀑布流数据
type: Array, type: Array,
required: true, required: true,
default: function() { default: function() {
return []; return [];
}
},
// 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
// 单位ms
addTime: {
type: [Number, String],
default: 200
}
},
provide() {
return {
uWaterfall: this
} }
}, },
data() { // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
return { // 单位ms
leftList: [], addTime: {
rightList: [], type: [Number, String],
tempList: [], default: 200
children: []
}
},
watch: {
copyFlowList(nVal, oVal) {
// 取差值，即这一次数组变化新增的部分
let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
this.tempList = this.cloneData(nVal.slice(startIndex));
this.splitData();
},
}, },
mounted() { // id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
this.tempList = this.cloneData(this.copyFlowList); // 那么该把idKey设置为idx
idKey: {
type: String,
default: 'id'
}
},
provide() {
return {
uWaterfall: this
}
},
data() {
return {
leftList: [],
rightList: [],
tempList: [],
children: []
}
},
watch: {
copyFlowList(nVal, oVal) {
// 取差值，即这一次数组变化新增的部分
let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
this.tempList = this.cloneData(nVal.slice(startIndex));
this.splitData(); this.splitData();
}, },
computed: { },
// 破坏flowList变量的引用，否则watch的结果新旧值是一样的 mounted() {
copyFlowList() { this.tempList = this.cloneData(this.copyFlowList);
return this.cloneData(this.flowList); this.splitData();
} },
}, computed: {
methods: { // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
async splitData() { copyFlowList() {
if (!this.tempList.length) return; return this.cloneData(this.flowList);
let leftRect = await this.$uGetRect('#u-left-cloumn'); }
let rightRect = await this.$uGetRect('#u-right-cloumn'); },
// 如果左边小于或等于右边，就添加到左边，否则添加到右边 methods: {
let item = this.tempList[0]; async splitData() {
// 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰 if (!this.tempList.length) return;
// 数组可能变成[]，导致此item值可能为undefined let leftRect = await this.$uGetRect('#u-left-cloumn');
if(!item) return ; let rightRect = await this.$uGetRect('#u-right-cloumn');
if (leftRect.height < rightRect.height) { // 如果左边小于或等于右边，就添加到左边，否则添加到右边
let item = this.tempList[0];
// 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
// 数组可能变成[]，导致此item值可能为undefined
if(!item) return ;
if (leftRect.height < rightRect.height) {
this.leftList.push(item);
} else if (leftRect.height > rightRect.height) {
this.rightList.push(item);
} else {
// 这里是为了保证第一和第二张添加时，左右都能有内容
// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
if (this.leftList.length <= this.rightList.length) {
this.leftList.push(item); this.leftList.push(item);
} else if (leftRect.height > rightRect.height) {
this.rightList.push(item);
} else { } else {
// 这里是为了保证第一和第二张添加时，左右都能有内容 this.rightList.push(item);
// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
if (this.leftList.length <= this.rightList.length) {
this.leftList.push(item);
} else {
this.rightList.push(item);
}
}
// 移除临时列表的第一项
this.tempList.splice(0, 1);
// 如果临时数组还有数据，继续循环
if (this.tempList.length) {
setTimeout(() => {
this.splitData();
}, this.addTime)
} }
}, }
// 复制而不是引用对象和数组 // 移除临时列表的第一项
cloneData(data) { this.tempList.splice(0, 1);
return JSON.parse(JSON.stringify(data)); // 如果临时数组还有数据，继续循环
if (this.tempList.length) {
setTimeout(() => {
this.splitData();
}, this.addTime)
}
},
// 复制而不是引用对象和数组
cloneData(data) {
return JSON.parse(JSON.stringify(data));
},
// 清空数据列表
clear() {
this.leftList = [];
this.rightList = [];
},
// 清除某一条制定的数据，根据id实现
remove(id) {
let tmp = false;
// 如果findIndex找不到合适的条件，就会返回-1
let index = -1;
index = this.leftList.findIndex(val => val[this.idKey] == id);
if(index != -1) {
// 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
this.leftList.splice(index, 1);
} else {
// 同理于上方面的方法
index = this.rightList.findIndex(val => val[this.idKey] == id);
if(index != -1) this.rightList.splice(index, 1);
} }
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-waterfall { .u-waterfall {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
} }
.u-cloumn { .u-cloumn {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
height: auto; height: auto;
} }
.u-image { .u-image {
width: 100%; width: 100%;
} }
</style> </style>
uview-ui/libs/config/config.js
View file @ a8050ed4
// 此版本发布于2020-05-16 // 此版本发布于2020-05-18
let version = '1.2.6'; let version = '1.2.7';
export default { export default {
v: version, v: version,
......
uview-ui/libs/request/index.js
View file @ a8050ed4
...@@ -88,6 +88,7 @@ class Request { ...@@ -88,6 +88,7 @@ class Request {
title: this.config.loadingText, title: this.config.loadingText,
mask: this.config.loadingMask mask: this.config.loadingMask
}) })
this.config.timer = null;
}, this.config.loadingTime); }, this.config.loadingTime);
} }
uni.request(options); uni.request(options);
......
uview-ui/package.json
View file @ a8050ed4
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.2.5", "version": "1.2.7",
"description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水", "description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
"main": "index.js", "main": "index.js",
"keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"], "keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
......
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