Commit c80b85b9 by LJM

css

parent f71b666c
Showing with 2396 additions and 486 deletions
.rePackage { .rePackage {
margin-top: 24rpx;
.refresh { .refresh {
padding: 0 24rpx; padding: 24rpx 24rpx 0 24rpx;
justify-content: flex-end; justify-content: flex-end;
background: #fff;
.icon-a-juxing12 { .icon-a-juxing12 {
font-size: 36rpx; font-size: 36rpx;
color: #404547; color: #404547;
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
.uni-list-cell { .uni-list-cell {
padding: 0 24rpx; padding: 0 24rpx;
height: 73rpx; height: 73rpx;
background: #fff;
.uni-list-cell-left { .uni-list-cell-left {
font-size: 28rpx; font-size: 28rpx;
color: #6e767a; color: #6e767a;
...@@ -34,10 +35,11 @@ ...@@ -34,10 +35,11 @@
} }
} }
.uni-table { .uni-table {
padding: 0 24rpx; padding: 0 24rpx 120rpx 24rpx;
background: #fff;
.uni-th { .uni-th {
height: 62rpx; height: 62rpx;
background: #f1f4f6; background: #fff;
border-top: 1px solid #cad9e0; border-top: 1px solid #cad9e0;
border-bottom: 1px solid #cad9e0; border-bottom: 1px solid #cad9e0;
text { text {
...@@ -52,6 +54,7 @@ ...@@ -52,6 +54,7 @@
} }
.uni-tr { .uni-tr {
height: 100%; height: 100%;
background: #fff;
border-bottom: 1px solid #cad9e0; border-bottom: 1px solid #cad9e0;
text { text {
flex: 0 0 25%; flex: 0 0 25%;
......
.ex-warehousing {
padding: 24rpx;
.uni-table-box {
::v-deep .uni-table-scroll {
height: 83vh;
}
::v-deep .uni-table {
min-width: 100% !important;
}
}
.scan {
position: fixed;
bottom: 104rpx;
left: 0;
right: 0;
width: 301rpx;
height: 86rpx;
background: #197adb;
box-shadow: 0px 9rpx 10rpx 0px rgba(0, 0, 0, 0.11);
border-radius: 43rpx;
margin: 0 auto;
.icon-juxing2 {
font-size: 48rpx;
color: #ffffff;
margin-right: 28rpx;
}
.tt {
font-size: 32rpx;
color: #ffffff;
}
}
.fix-info {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
.text {
padding-left: 20rpx;
.t1 {
font-size: 24rpx;
color: #6e767a;
}
.t2 {
font-size: 26rpx;
color: #f04844;
font-weight: bold;
}
}
.btn {
width: 220rpx;
height: 88rpx;
background: #197adb;
border-radius: 4rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
.rePackage {
.refresh {
padding: 24rpx 24rpx 0 24rpx;
justify-content: flex-end;
background: #fff;
.icon-a-juxing12 {
font-size: 36rpx;
color: #404547;
&.curr {
animation: spin 1s infinite linear;
}
}
.t1 {
font-size: 22rpx;
color: #404547;
margin-left: 8rpx;
}
}
.uni-list-cell {
padding: 0 24rpx;
height: 73rpx;
background: #fff;
.uni-list-cell-left {
font-size: 28rpx;
color: #6e767a;
}
.uni-input {
font-size: 28rpx;
color: #404547;
}
.iconfont {
font-size: 28rpx;
color: #6e767a;
padding-left: 5rpx;
}
}
.uni-table {
padding: 0 24rpx 120rpx 24rpx;
background: #fff;
.uni-th {
height: 62rpx;
background: #fff;
border-top: 1px solid #cad9e0;
border-bottom: 1px solid #cad9e0;
text {
flex: 0 0 25%;
font-size: 22rpx;
color: #404547;
border-right: 1px solid #cad9e0;
&:last-child {
border-right: none;
}
}
}
.uni-tr {
height: 100%;
background: #fff;
border-bottom: 1px solid #cad9e0;
text {
flex: 0 0 25%;
font-size: 22rpx;
color: #6e767a;
border-right: 1px solid #cad9e0;
padding: 8rpx 0;
&:last-child {
border-right: none;
}
&.color {
color: #0079fe;
}
}
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.warehousing {
padding: 24rpx;
.uni-table-box {
::v-deep .uni-table-scroll {
height: 83vh;
}
::v-deep .uni-table {
min-width: 100% !important;
}
}
.scan {
position: fixed;
bottom: 104rpx;
left: 0;
right: 0;
width: 301rpx;
height: 86rpx;
background: #197adb;
box-shadow: 0px 9rpx 10rpx 0px rgba(0, 0, 0, 0.11);
border-radius: 43rpx;
margin: 0 auto;
.icon-juxing2 {
font-size: 48rpx;
color: #ffffff;
margin-right: 28rpx;
}
.tt {
font-size: 32rpx;
color: #ffffff;
}
}
.fix-info {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
.text {
padding-left: 20rpx;
.t1 {
font-size: 24rpx;
color: #6e767a;
}
.t2 {
font-size: 26rpx;
color: #f04844;
font-weight: bold;
}
}
.btn {
width: 220rpx;
height: 88rpx;
background: #197adb;
border-radius: 4rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
...@@ -104,6 +104,21 @@ ...@@ -104,6 +104,21 @@
"style": { "style": {
"navigationBarTitleText": "装箱复核时序蒲" "navigationBarTitleText": "装箱复核时序蒲"
} }
}, {
"path": "pages/pda/warehousing",
"style": {
"navigationBarTitleText": "深圳扫码收货"
}
}, {
"path": "pages/pda/exWarehouse",
"style": {
"navigationBarTitleText": "深圳扫码出库"
}
}, {
"path": "pages/pda/logisticsList",
"style": {
"navigationBarTitleText": "进口物流清单"
}
}], }],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
......
...@@ -114,6 +114,7 @@ export default { ...@@ -114,6 +114,7 @@ export default {
this.rePackageList = this.rePackageList.concat(res.data.data); this.rePackageList = this.rePackageList.concat(res.data.data);
this.total = res.data.total; this.total = res.data.total;
} else { } else {
this.total = 0;
this.is_loading = true; this.is_loading = true;
} }
} else { } else {
......
...@@ -113,6 +113,21 @@ export default { ...@@ -113,6 +113,21 @@ export default {
name: '装箱复核序簿', name: '装箱复核序簿',
iconfont: 'icon-jinggao3', iconfont: 'icon-jinggao3',
tips: '' tips: ''
},
{
name: '深圳扫码收货',
iconfont: 'icon-jinggao3',
tips: ''
},
{
name: '深圳扫码出库',
iconfont: 'icon-jinggao3',
tips: ''
},
{
name: '进口物流清单',
iconfont: 'icon-jinggao3',
tips: ''
} }
] ]
}; };
...@@ -190,6 +205,18 @@ export default { ...@@ -190,6 +205,18 @@ export default {
uni.navigateTo({ uni.navigateTo({
url: '/pages/goods/rePackageList' url: '/pages/goods/rePackageList'
}); });
} else if (item.name == '深圳扫码收货') {
uni.navigateTo({
url: '/pages/pda/warehousing'
});
} else if (item.name == '深圳扫码出库') {
uni.navigateTo({
url: '/pages/pda/exWarehouse'
});
} else if (item.name == '进口物流清单') {
uni.navigateTo({
url: '/pages/pda/logisticsList'
});
} else { } else {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
......
<template>
<view class="ex-warehousing">
<view class="uni-table-box">
<uni-table type="selection" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
<uni-th align="center">入仓号</uni-th>
<uni-th align="center">车序</uni-th>
<uni-th align="center">汇总件数</uni-th>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
</uni-table>
</view>
<navigator class="scan row rowCenter verCenter" url="/pages/mine/login" hover-class="none">
<text class="iconfont icon-juxing2"></text>
<text class="tt">继续扫描</text>
</navigator>
<view class="fix-info row bothSide verCenter">
<view class="text row verCenter">
<text class="t1">入仓号数:</text>
<text class="t2">{{ selectedIndexs.length }}</text>
</view>
<view class="btn row rowCenter verCenter">出库单号确认</view>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
selectedIndexs: []
};
},
onShow() {
this.getData();
},
methods: {
selectionChange(e) {
console.log(e);
this.selectedIndexs = e.detail.index;
},
getData() {
this.request(API.userInfo, 'POST', {}, false).then(res => {
if (res.err_code === 0) {
} else {
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/pda/exWarehouse.scss';
</style>
<template>
<view class="rePackage">
<view class="row verCenter refresh" @click="refresh()">
<text class="iconfont icon-a-juxing12" :class="{ curr: refreshTransition }"></text>
<text class="t1">刷新</text>
</view>
<view class="uni-list-cell row verCenter bothSide">
<view class="uni-list-cell-left">日期选择</view>
<view class="uni-list-cell-db row">
<picker mode="date" :value="today" :start="startDate" :end="endDate" @change="bindDateChange">
<text class="uni-input">{{ today }}</text>
<text class="iconfont icon-Chevron1"></text>
</picker>
</view>
</view>
<view class="uni-table">
<view class="uni-th row">
<text class="row verCenter rowCenter">卡板号</text>
<text class="row verCenter rowCenter">合计货物箱数</text>
<text class="row verCenter rowCenter">扫描状态</text>
<text class="row verCenter rowCenter">装载状态</text>
</view>
<template v-if="total > 0">
<view class="uni-tr row verCenter" v-for="(item, index) in rePackageList" :key="index">
<text class="row verCenter rowCenter color">{{ item.tray_name }}</text>
<text class="row verCenter rowCenter" :class="{ color: item.scan_status_cn == '全部已经扫描' }">{{ item.have_load_box_num }}</text>
<text class="row verCenter rowCenter" :class="{ color: item.scan_status_cn != '全部已经扫描' }">{{ item.scan_status_cn }}</text>
<text class="row verCenter rowCenter">{{ item.audit_status_cn || '' }}</text>
</view>
</template>
<template v-else>
<view class="uni-tr row verCenter"><text class="row verCenter rowCenter" style="flex:0 0 100%">暂无数据</text></view>
</template>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
const currentDate = this.getDate({
format: true
});
return {
today: currentDate,
total: 1,
page: 1,
limit: 1000,
is_loading: false,
loading: false,
rePackageList: [],
refreshTransition: false
};
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
onReachBottom() {
if (this.is_loading) return;
this.page++;
this.loading = true;
this.getData();
},
onShow() {
this.getData();
},
methods: {
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange(e) {
this.today = e.detail.value;
this.total = 0;
this.page = 1;
this.rePackageList = [];
this.getData();
},
refresh() {
//刷新图标交互
this.refreshTransition = true;
this.loading = true;
setTimeout(() => {
this.refreshTransition = false;
}, 3000);
this.total = 0;
this.page = 1;
this.rePackageList = [];
this.getData();
},
getData() {
this.request(API.rePackageList, 'POST', { page: this.page, limit: this.limit, today: this.today }, this.loading).then(res => {
if (res.err_code === 0) {
if (res.data.data.length > 0) {
this.is_loading = false;
this.rePackageList = this.rePackageList.concat(res.data.data);
this.total = res.data.total;
} else {
this.total = 0;
this.is_loading = true;
}
} else {
uni.showToast({
title: res.err_msg,
icon: 'error'
});
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/pda/logisticsList.scss';
</style>
<template>
<view class="warehousing">
<view class="uni-table-box">
<uni-table type="selection" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
<uni-th align="center">入仓号</uni-th>
<uni-th align="center">车序</uni-th>
<uni-th align="center">汇总件数</uni-th>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00001</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00002</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00003</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00004</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00005</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00006</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">1</uni-td>
</uni-tr>
<uni-tr>
<uni-td align="center">B00007</uni-td>
<uni-td align="center">普货1车</uni-td>
<uni-td align="center">888</uni-td>
</uni-tr>
</uni-table>
</view>
<navigator class="scan row rowCenter verCenter" url="/pages/mine/login" hover-class="none">
<text class="iconfont icon-juxing2"></text>
<text class="tt">继续扫描</text>
</navigator>
<view class="fix-info row bothSide verCenter">
<view class="text row verCenter">
<text class="t1">入仓号数:</text>
<text class="t2">{{ selectedIndexs.length }}</text>
</view>
<view class="btn row rowCenter verCenter">入库单号确认</view>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
selectedIndexs: []
};
},
onShow() {
this.getData();
},
methods: {
selectionChange(e) {
console.log(e);
this.selectedIndexs = e.detail.index;
},
getData() {
this.request(API.userInfo, 'POST', {}, false).then(res => {
if (res.err_code === 0) {
} else {
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/pda/warehousing.scss';
</style>
## 2.2.6(2022-06-30)
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致
## 2.2.5(2022-06-24)
- 修复 日历顶部年月及底部确认未国际化 bug
## 2.2.4(2022-03-31)
- 修复 Vue3 下动态赋值,单选类型未响应的 bug
## 2.2.3(2022-03-28)
- 修复 Vue3 下动态赋值未响应的 bug
## 2.2.2(2021-12-10)
- 修复 clear-icon 属性在小程序平台不生效的 bug
## 2.2.1(2021-12-10)
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的 bug
## 2.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.5(2021-11-09)
- 新增 提供组件设计资源,组件样式调整
## 2.1.4(2021-09-10) ## 2.1.4(2021-09-10)
- 修复 hide-second 在移动端的 bug - 修复 hide-second 在移动端的 bug
- 修复 单选赋默认值时,赋值日期未高亮的 bug - 修复 单选赋默认值时,赋值日期未高亮的 bug
......
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
'uni-calendar-item--after-checked-x':weeks.afterMultiple, 'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)"> }" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{ <view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover), 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover, 'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple, 'uni-calendar-item--before-checked':weeks.beforeMultiple,
...@@ -15,8 +14,9 @@ ...@@ -15,8 +14,9 @@
'uni-calendar-item--disable':weeks.disable, 'uni-calendar-item--disable':weeks.disable,
}"> }">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text">{{weeks.date}}</text> <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view> </view>
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
</view> </view>
</template> </template>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-calendar-item__weeks-box { .uni-calendar-item__weeks-box {
flex: 1; flex: 1;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -70,18 +70,20 @@ ...@@ -70,18 +70,20 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 3px 0; margin: 1px 0;
position: relative;
} }
.uni-calendar-item__weeks-box-text { .uni-calendar-item__weeks-box-text {
font-size: 12px; font-size: 14px;
// font-size: $uni-font-size-base; // font-family: Lato-Bold, Lato;
// color: $uni-text-color; font-weight: bold;
color: #455997;
} }
.uni-calendar-item__weeks-lunar-text { .uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm; font-size: 12px;
color: $uni-text-color; color: #333;
} }
.uni-calendar-item__weeks-box-item { .uni-calendar-item__weeks-box-item {
...@@ -107,38 +109,43 @@ ...@@ -107,38 +109,43 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
background-color: $uni-color-error; background-color: #dd524d;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--disable { .uni-calendar-item__weeks-box .uni-calendar-item--disable {
// background-color: rgba(249, 249, 249, $uni-opacity-disabled); // background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
cursor: default; cursor: default;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--isDay-text { .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: $uni-color-primary; color: #D1D1D1;
} }
.uni-calendar-item--isDay { .uni-calendar-item--isDay {
background-color: $uni-color-primary; position: absolute;
opacity: 0.8; top: 10px;
color: #fff; right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
} }
.uni-calendar-item--extra { .uni-calendar-item--extra {
color: $uni-color-error; color: #dd524d;
opacity: 0.8; opacity: 0.8;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--checked { .uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-color-primary; background-color: #007aff;
// border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 6px solid #f2f6fc; border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff; color: #fff;
opacity: 0.8;
} }
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text { .uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
...@@ -146,36 +153,33 @@ ...@@ -146,36 +153,33 @@
} }
.uni-calendar-item--multiple { .uni-calendar-item--multiple {
background-color: #f2f6fc; background-color: #F6F7FC;
// color: #fff; // color: #fff;
opacity: 0.8;
} }
.uni-calendar-item--multiple .uni-calendar-item--before-checked { .uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: #409eff; background-color: #409eff;
color: #fff !important; border-radius: 50%;
// border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 6px solid #f2f6fc; border: 3px solid #F6F7FC;
} }
.uni-calendar-item--multiple .uni-calendar-item--after-checked { .uni-calendar-item--before-checked .uni-calendar-item--checked-text,
background-color: #409eff;; .uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff !important; color: #fff;
// border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
} }
.uni-calendar-item--before-checked-x { .uni-calendar-item--before-checked-x {
// border-top-left-radius: 25px; border-top-left-radius: 50px;
// border-bottom-left-radius: 25px; border-bottom-left-radius: 50px;
background-color: #f2f6fc; box-sizing: border-box;
background-color: #F6F7FC;
} }
.uni-calendar-item--after-checked-x { .uni-calendar-item--after-checked-x {
// border-top-right-radius: 25px; border-top-right-radius: 50px;
// border-bottom-right-radius: 25px; border-bottom-right-radius: 50px;
background-color: #f2f6fc; background-color: #F6F7FC;
} }
</style> </style>
...@@ -3,31 +3,35 @@ ...@@ -3,31 +3,35 @@
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
@click="clean"></view> @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" <view v-if="insert || show" class="uni-calendar__content"
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}"> :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
<view class="uni-calendar__header">
<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre"> <view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
<view class="uni-calendar__header-btn uni-calendar--left"></view> <view class="uni-calendar__header-btn uni-calendar--left"></view>
</view> </view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange"> <picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text> <text
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
</picker> </picker>
<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next"> <view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
<view class="uni-calendar__header-btn uni-calendar--right"></view> <view class="uni-calendar__header-btn uni-calendar--right"></view>
</view> </view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> --> <view v-if="!insert" class="dialog-close" @click="clean">
<view class="dialog-close-plus" data-id="close"></view>
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
</view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
</view> </view>
<view class="uni-calendar__box"> <view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg"> <view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text> <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view> </view>
<view class="uni-calendar__weeks"> <view class="uni-calendar__weeks" style="padding-bottom: 7px;">
<view class="uni-calendar__weeks-day"> <view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text> <text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view> </view>
<view class="uni-calendar__weeks-day"> <view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{monText}}</text> <text class="uni-calendar__weeks-day-text">{{MONText}}</text>
</view> </view>
<view class="uni-calendar__weeks-day"> <view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text> <text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
...@@ -66,22 +70,23 @@ ...@@ -66,22 +70,23 @@
<view class="uni-date-changed--time-start"> <view class="uni-date-changed--time-start">
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}} <view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view> </view>
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false" :hide-second="hideSecond" <time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
:disabled="!tempRange.before" class="time-picker-style"> :hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker> </time-picker>
</view> </view>
<uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons> <uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons>
<view class="uni-date-changed--time-end"> <view class="uni-date-changed--time-end">
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view> <view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false" :hide-second="hideSecond" <time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
:disabled="!tempRange.after" class="time-picker-style"> :hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker> </time-picker>
</view> </view>
</view> </view>
<view v-if="!insert" class="uni-date-changed uni-calendar__header" @click="confirm"> <view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
<view class="uni-calendar__header-btn-box"> <!-- <view class="uni-calendar__header-btn-box">
<text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text> <text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text>
</view> </view> -->
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -327,7 +332,13 @@ ...@@ -327,7 +332,13 @@
okText() { okText() {
return t("uni-datetime-picker.ok") return t("uni-datetime-picker.ok")
}, },
monText() { yearText() {
return t("uni-datetime-picker.year")
},
monthText() {
return t("uni-datetime-picker.month")
},
MONText() {
return t("uni-calender.MON") return t("uni-calender.MON")
}, },
TUEText() { TUEText() {
...@@ -348,6 +359,9 @@ ...@@ -348,6 +359,9 @@
SUNText() { SUNText() {
return t("uni-calender.SUN") return t("uni-calender.SUN")
}, },
confirmText() {
return t("uni-calender.confirm")
},
}, },
created() { created() {
// 获取日历方法实例 // 获取日历方法实例
...@@ -361,7 +375,6 @@ ...@@ -361,7 +375,6 @@
}) })
// 选中某一天 // 选中某一天
// this.cale.setDate(this.date) // this.cale.setDate(this.date)
this.init(this.date) this.init(this.date)
// this.setDay // this.setDay
}, },
...@@ -425,7 +438,6 @@ ...@@ -425,7 +438,6 @@
* @param {Object} date * @param {Object} date
*/ */
init(date) { init(date) {
this.cale.setDate(date) this.cale.setDate(date)
this.weeks = this.cale.weeks this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date) this.nowDate = this.calendar = this.cale.getInfo(date)
...@@ -591,7 +603,7 @@ ...@@ -591,7 +603,7 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-calendar { .uni-calendar {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -605,7 +617,7 @@ ...@@ -605,7 +617,7 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: $uni-bg-color-mask; background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity; transition-property: opacity;
transition-duration: 0.3s; transition-duration: 0.3s;
opacity: 0; opacity: 0;
...@@ -639,6 +651,12 @@ ...@@ -639,6 +651,12 @@
background-color: #fff; background-color: #fff;
} }
.uni-calendar__content-mobile {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}
.uni-calendar__header { .uni-calendar__header {
position: relative; position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -648,9 +666,11 @@ ...@@ -648,9 +666,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 50px; height: 50px;
// border-bottom-color: $uni-border-color; }
// border-bottom-style: solid;
// border-bottom-width: 1px; .uni-calendar__header-mobile {
padding: 10px;
padding-bottom: 0;
} }
.uni-calendar--fixed-top { .uni-calendar--fixed-top {
...@@ -659,14 +679,13 @@ ...@@ -659,14 +679,13 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
border-top-color: $uni-border-color; border-top-color: rgba(0, 0, 0, 0.4);
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
} }
.uni-calendar--fixed-width { .uni-calendar--fixed-width {
width: 50px; width: 50px;
// padding: 0 15px;
} }
.uni-calendar__backtoday { .uni-calendar__backtoday {
...@@ -680,21 +699,21 @@ ...@@ -680,21 +699,21 @@
font-size: 12px; font-size: 12px;
border-top-left-radius: 25px; border-top-left-radius: 25px;
border-bottom-left-radius: 25px; border-bottom-left-radius: 25px;
color: $uni-text-color; color: #fff;
background-color: $uni-bg-color-hover; background-color: #f1f1f1;
} }
.uni-calendar__header-text { .uni-calendar__header-text {
text-align: center; text-align: center;
width: 100px; width: 100px;
font-size: $uni-font-size-base; font-size: 15px;
color: $uni-text-color; color: #666;
} }
.uni-calendar__button-text { .uni-calendar__button-text {
text-align: center; text-align: center;
width: 100px; width: 100px;
font-size: $uni-font-size-base; font-size: 14px;
color: #007aff; color: #007aff;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
letter-spacing: 3px; letter-spacing: 3px;
...@@ -713,12 +732,12 @@ ...@@ -713,12 +732,12 @@
} }
.uni-calendar__header-btn { .uni-calendar__header-btn {
width: 8px; width: 9px;
height: 8px; height: 9px;
border-left-color: $uni-text-color-placeholder; border-left-color: #808080;
border-left-style: solid; border-left-style: solid;
border-left-width: 1px; border-left-width: 1px;
border-top-color: $uni-color-subtitle; border-top-color: #555555;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
} }
...@@ -760,10 +779,13 @@ ...@@ -760,10 +779,13 @@
.uni-calendar__weeks-day-text { .uni-calendar__weeks-day-text {
font-size: 12px; font-size: 12px;
color: #B2B2B2;
} }
.uni-calendar__box { .uni-calendar__box {
position: relative; position: relative;
// padding: 0 10px;
padding-bottom: 7px;
} }
.uni-calendar__box-bg { .uni-calendar__box-bg {
...@@ -782,7 +804,7 @@ ...@@ -782,7 +804,7 @@
.uni-calendar__box-bg-text { .uni-calendar__box-bg-text {
font-size: 200px; font-size: 200px;
font-weight: bold; font-weight: bold;
color: $uni-text-color-grey; color: #999;
opacity: 0.1; opacity: 0.1;
text-align: center; text-align: center;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -795,12 +817,17 @@ ...@@ -795,12 +817,17 @@
// line-height: 50px; // line-height: 50px;
text-align: center; text-align: center;
color: #333; color: #333;
border-top-color: $uni-border-color; border-top-color: #DCDCDC;
;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
flex: 1; flex: 1;
} }
.uni-date-btn--ok {
padding: 20px 15px;
}
.uni-date-changed--time-start { .uni-date-changed--time-start {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -834,4 +861,47 @@ ...@@ -834,4 +861,47 @@
.mr-10 { .mr-10 {
margin-right: 10px; margin-right: 10px;
} }
.dialog-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 0 25px;
margin-top: 10px;
}
.dialog-close-plus {
width: 16px;
height: 2px;
background-color: #737987;
border-radius: 2px;
transform: rotate(45deg);
}
.dialog-close-rotate {
position: absolute;
transform: rotate(-45deg);
}
.uni-datetime-picker--btn {
border-radius: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
color: #fff;
font-size: 16px;
letter-spacing: 2px;
}
/* #ifndef APP-NVUE */
.uni-datetime-picker--btn:active {
opacity: 0.7;
}
/* #endif */
</style> </style>
...@@ -9,11 +9,14 @@ ...@@ -9,11 +9,14 @@
"uni-datetime-picker.ok": "ok", "uni-datetime-picker.ok": "ok",
"uni-datetime-picker.clear": "clear", "uni-datetime-picker.clear": "clear",
"uni-datetime-picker.cancel": "cancel", "uni-datetime-picker.cancel": "cancel",
"uni-datetime-picker.year": "-",
"uni-datetime-picker.month": "",
"uni-calender.MON": "MON", "uni-calender.MON": "MON",
"uni-calender.TUE": "TUE", "uni-calender.TUE": "TUE",
"uni-calender.WED": "WED", "uni-calender.WED": "WED",
"uni-calender.THU": "THU", "uni-calender.THU": "THU",
"uni-calender.FRI": "FRI", "uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT", "uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN" "uni-calender.SUN": "SUN",
"uni-calender.confirm": "confirm"
} }
...@@ -9,11 +9,14 @@ ...@@ -9,11 +9,14 @@
"uni-datetime-picker.ok": "确定", "uni-datetime-picker.ok": "确定",
"uni-datetime-picker.clear": "清除", "uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消", "uni-datetime-picker.cancel": "取消",
"uni-datetime-picker.year": "年",
"uni-datetime-picker.month": "月",
"uni-calender.SUN": "日", "uni-calender.SUN": "日",
"uni-calender.MON": "一", "uni-calender.MON": "一",
"uni-calender.TUE": "二", "uni-calender.TUE": "二",
"uni-calender.WED": "三", "uni-calender.WED": "三",
"uni-calender.THU": "四", "uni-calender.THU": "四",
"uni-calender.FRI": "五", "uni-calender.FRI": "五",
"uni-calender.SAT": "六" "uni-calender.SAT": "六",
} "uni-calender.confirm": "确认"
}
\ No newline at end of file
{ {
"uni-datetime-picker.selectDate": "選擇日期", "uni-datetime-picker.selectDate": "選擇日期",
"uni-datetime-picker.selectTime": "選擇時間", "uni-datetime-picker.selectTime": "選擇時間",
"uni-datetime-picker.selectDateTime": "選擇日期時間", "uni-datetime-picker.selectDateTime": "選擇日期時間",
"uni-datetime-picker.startDate": "開始日期", "uni-datetime-picker.startDate": "開始日期",
"uni-datetime-picker.endDate": "結束日期", "uni-datetime-picker.endDate": "結束日期",
"uni-datetime-picker.startTime": "開始时间", "uni-datetime-picker.startTime": "開始时间",
"uni-datetime-picker.endTime": "結束时间", "uni-datetime-picker.endTime": "結束时间",
"uni-datetime-picker.ok": "確定", "uni-datetime-picker.ok": "確定",
"uni-datetime-picker.clear": "清除", "uni-datetime-picker.clear": "清除",
"uni-datetime-picker.cancel": "取消", "uni-datetime-picker.cancel": "取消",
"uni-calender.SUN": "日", "uni-datetime-picker.year": "年",
"uni-calender.MON": "一", "uni-datetime-picker.month": "月",
"uni-calender.TUE": "二", "uni-calender.SUN": "日",
"uni-calender.WED": "三", "uni-calender.MON": "一",
"uni-calender.THU": "四", "uni-calender.TUE": "二",
"uni-calender.FRI": "五", "uni-calender.WED": "三",
"uni-calender.SAT": "六" "uni-calender.THU": "四",
} "uni-calender.FRI": "五",
"uni-calender.SAT": "六",
"uni-calender.confirm": "確認"
}
\ No newline at end of file
import CALENDAR from './calendar.js'
class Calendar { class Calendar {
constructor({ constructor({
date, date,
...@@ -112,7 +110,6 @@ class Calendar { ...@@ -112,7 +110,6 @@ class Calendar {
dateArr.push({ dateArr.push({
date: beforeDate, date: beforeDate,
month: full.month - 1, month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true disable: true
}) })
} }
...@@ -170,10 +167,9 @@ class Calendar { ...@@ -170,10 +167,9 @@ class Calendar {
year: full.year, year: full.year,
date: i, date: i,
multiple: this.range ? checked : false, multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate), beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate), afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
month: full.month, month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter), disable: !(disableBefore && disableAfter),
isDay, isDay,
userChecked: false userChecked: false
...@@ -195,7 +191,6 @@ class Calendar { ...@@ -195,7 +191,6 @@ class Calendar {
dateArr.push({ dateArr.push({
date: i, date: i,
month: Number(full.month) + 1, month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true disable: true
}) })
} }
...@@ -244,6 +239,25 @@ class Calendar { ...@@ -244,6 +239,25 @@ class Calendar {
} }
} }
/**
* 比较真实起始日期
*/
isLogicBefore(currentDay, before, after) {
let logicBefore = before
if (before && after) {
logicBefore = this.dateCompare(before, after) ? before : after
}
return this.dateEqual(logicBefore, currentDay)
}
isLogicAfter(currentDay, before, after) {
let logicAfter = after
if (before && after) {
logicAfter = this.dateCompare(before, after) ? after : before
}
return this.dateEqual(logicAfter, currentDay)
}
/** /**
* 获取日期范围内所有日期 * 获取日期范围内所有日期
...@@ -266,19 +280,6 @@ class Calendar { ...@@ -266,19 +280,6 @@ class Calendar {
} }
return arr return arr
} }
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/** /**
* 获取多选状态 * 获取多选状态
...@@ -288,7 +289,6 @@ class Calendar { ...@@ -288,7 +289,6 @@ class Calendar {
before, before,
after after
} = this.multipleStatus } = this.multipleStatus
if (!this.range) return if (!this.range) return
if (before && after) { if (before && after) {
if (!this.lastHover) { if (!this.lastHover) {
...@@ -301,9 +301,9 @@ class Calendar { ...@@ -301,9 +301,9 @@ class Calendar {
this.multipleStatus.fulldate = '' this.multipleStatus.fulldate = ''
this.lastHover = false this.lastHover = false
} else { } else {
this.lastHover = false
if (!before) { if (!before) {
this.multipleStatus.before = fullDate this.multipleStatus.before = fullDate
this.lastHover = false
} else { } else {
this.multipleStatus.after = fullDate this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
...@@ -313,6 +313,7 @@ class Calendar { ...@@ -313,6 +313,7 @@ class Calendar {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before); .before);
} }
this.lastHover = true
} }
} }
this._getWeek(fullDate) this._getWeek(fullDate)
......
{ {
"id": "uni-datetime-picker", "id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器", "displayName": "uni-datetime-picker 日期选择器",
"version": "2.1.4", "version": "2.2.6",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择", "description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [ "keywords": [
"uni-datetime-picker", "uni-datetime-picker",
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
......
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护` > `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护`
## DatetimePicker 时间选择器 ## DatetimePicker 时间选择器
> **组件名:uni-datetime-picker** > **组件名:uni-datetime-picker**
> 代码块: `uDatetimePicker` > 代码块: `uDatetimePicker`
...@@ -9,151 +12,10 @@ ...@@ -9,151 +12,10 @@
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。 若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。
**_点击 picker 默认值规则:_**
___点击 picker 默认值规则:___
- 若设置初始值 value, 会显示在 picker 显示框中 - 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中 - 若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
### 安装方式 #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
``template`` 中使用组件
```html
<template>
<view class="page">
<text class="example-info">可以同时选择日期和时间的选择器</text>
<uni-section :title="'日期用法:' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
</view>
<uni-section :title="'时间戳用法:' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20" end="2021-5-20" />
</view>
<uni-section :title="'日期时间用法:' + datetimesingle" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
</view>
<uni-section :title="'v-model用法:' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" />
</view>
<uni-section :title="'插槽用法:' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single">我是一个插槽,点击我</uni-datetime-picker>
</view>
<uni-section :title="'无边框用法:' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :border="false" />
</view>
<uni-section :title="'disabled用法:' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" disabled />
</view>
<uni-section :title="'日期范围用法:' + '[' + range + ']'" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="range" type="daterange" start="2021-3-20" end="2021-5-20"
rangeSeparator="至" />
</view>
<uni-section :title="'日期时间范围用法:' + '[' + datetimerange + ']' " type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="datetimerange" type="datetimerange"
start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
single: '2021-04-3',
datetimesingle: '2021-04-3',
range: ['2021-03-8', '2021-4-20'],
datetimerange: ['2021-03-20 20:10:10', '2021-05-10 10:10:10'],
}
},
watch: {
datetimesingle(newval) {
console.log('单选:', this.datetimesingle);
},
range(newval) {
console.log('范围选:', this.range);
},
datetimerange(newval) {
console.log('范围选:', this.datetimerange);
}
},
mounted() {
setTimeout(() => {
this.datetimesingle = '2021-5-1'
this.single = '2021-5-1'
},1000)
},
methods:{
change(e) {
this.single = e
console.log('-change事件:', e);
}
}
}
</script>
<style lang="scss">
@import '@/common/uni-nvue.scss';
</style>
```
## API
### DatetimePicker Props
|属性名 |类型 |默认值 |值域 |说明 |
|:-: |:-: |:-: | |:-: |
|type |String |datetime |date/daterange/datetime/datetimerange|选择器类型 |
|value |String、Number、Array(范围选择)、Date|- |- |输入框当前值 |
|start |String、Number |- |- |最小值,可以使用日期的字符串(String)、时间戳(Number) |
|end |String、Number |- |- |最大值,可以使用日期的字符串(String)、时间戳(Number) |
|return-type |String |string |timestamp 、string、date |返回值格式 |
|border |Boolean |true | |是否有边框 |
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
|placeholder |String |- |- |非范围选择时的占位内容 |
|start-placeholder|String |- |- |范围选择时开始日期的占位内容 |
|end-placeholder |String |- |- |范围选择时结束日期的占位内容 |
|disabled |Boolean |false | |是否不可选择 |
|clear-icon |Boolean |true | |是否显示清除按钮 |
|hide-second |Boolean |false | |是否显示秒,只显示时分 |
### DatetimePicker Events
|事件名称 |说明 |返回值 |
|:-: |:-: |:-: |
|change |确定日期时间时触发的事件,参数为当前选择的日期对象 |单选返回日期字符串,如:'2010-02-3';范围选返回日期字符串数组,如:['2020-10-1', '2021-4-1'] |
|maskClick|点击遮罩层触发 |- |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|show|打开弹出层|-|
|close|关闭弹出层 |-|
|clear|清除上次选中的状态和值|-|
###
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker)
\ No newline at end of file
## 1.2.1(2021-09-17) ## 1.3.5(2022-01-24)
- 新增 支持使用 css 图标库扩展组件(仅 vue 支持) - 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4(2022-01-24)
- 优化 size 支持其他单位
## 1.3.3(2022-01-17)
- 修复 nvue 有些图标不显示的bug,兼容老版本图标
## 1.3.2(2021-12-01)
- 优化 示例可复制图标名称
## 1.3.1(2021-11-23)
- 优化 兼容旧组件 type 值
## 1.3.0(2021-11-19)
- 新增 更多图标
- 优化 自定义图标使用方式
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7(2021-11-08)
## 1.2.0(2021-07-30) ## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5(2021-05-12) ## 1.1.5(2021-05-12)
......
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
{ {
"id": "uni-icons", "id": "uni-icons",
"displayName": "uni-icons 图标", "displayName": "uni-icons 图标",
"version": "1.2.1", "version": "1.3.5",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。", "description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "" "HBuilderX": "^3.2.14"
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [], "dependencies": ["uni-scss"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
......
## Icons 图标 ## Icons 图标
> **组件名:uni-icons** > **组件名:uni-icons**
> 代码块: `uIcons` > 代码块: `uIcons`
用于展示 icons 图标 。 用于展示 icons 图标 。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
``template`` 中使用组件
```html
<uni-icons type="contact" size="30"></uni-icons>
```
### 扩展图标用法
1. 需要自行在项目 App.vue 中引入 css 图标扩展库(注意: css 图标库引用的 .ttf 文件路径是否正确)
```html
<style lang="scss">
/* 扩展图标库 */
@import '@/static/iconfont.css';
</style>
```
2.``template`` 中使用组件
```html
<uni-icons class="mr-30" type="icon-kongxincai" font-family="iconfont" color="#007AFF" size="20"></uni-icons>
```
## API
### Icons Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|size |Number |24 |图标大小 |
|type |String |- |图标图案,参考示例 |
|color |String |- |图标颜色 |
|font-family(仅 vue 支持) |String |uniicons |图标库字体家族 |
### Icons Events
|事件名 |说明 |返回值|
|:-: |:-: |:-: |
|@click|点击 Icon 触发事件|- |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
\ No newline at end of file
## 1.0.3(2022-01-21)
- 优化 组件示例
## 1.0.2(2021-11-22)
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
- 修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
- init
@import './styles/index.scss';
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
## 1.2.1(2022-06-06)
- 修复 微信小程序存在无使用组件的问题
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-table](https://uniapp.dcloud.io/component/uniui/uni-table)
## 1.1.0(2021-07-30) ## 1.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7(2021-07-08) ## 1.0.7(2021-07-08)
......
...@@ -301,7 +301,7 @@ export default { ...@@ -301,7 +301,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
$border-color: #CAD9E0; $border-color: #ebeef5;
.uni-table-scroll { .uni-table-scroll {
width: 100%; width: 100%;
...@@ -337,8 +337,7 @@ $border-color: #CAD9E0; ...@@ -337,8 +337,7 @@ $border-color: #CAD9E0;
} }
.table--border { .table--border {
border: 1rpx $border-color solid; border: 1px $border-color solid;
border-left: none;
border-right: none; border-right: none;
} }
......
...@@ -66,16 +66,16 @@ export default { ...@@ -66,16 +66,16 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
$border-color: #CAD9E0; $border-color: #ebeef5;
.uni-table-td { .uni-table-td {
padding-left: 24rpx;
height: 60rpx;
display: table-cell; display: table-cell;
font-size: 22epx; padding: 8px 10px;
border-bottom: 1rpx $border-color solid; font-size: 12px;
vertical-align: middle; border-bottom: 1px $border-color solid;
color: #404547; font-weight: 400;
color: #606266;
line-height: 23px;
box-sizing: border-box; box-sizing: border-box;
} }
......
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
} }
}, },
watch: { watch: {
filters(newVal) { filterData(newVal) {
this._copyFilters() this._copyFilters()
}, },
indeterminate(newVal) { indeterminate(newVal) {
......
...@@ -74,11 +74,20 @@ export default { ...@@ -74,11 +74,20 @@ export default {
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
} }
}, },
// #ifndef VUE3
destroyed() { destroyed() {
const index = this.root.trChildren.findIndex(i => i === this) const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1) this.root.trChildren.splice(index, 1)
this.root.isNodata() this.root.isNodata()
}, },
// #endif
// #ifdef VUE3
unmounted() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
methods: { methods: {
minWidthUpdate(width) { minWidthUpdate(width) {
this.widthThArr.push(width) this.widthThArr.push(width)
...@@ -114,7 +123,7 @@ export default { ...@@ -114,7 +123,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
$border-color: #CAD9E0; $border-color: #ebeef5;
.uni-table-tr { .uni-table-tr {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -134,7 +143,7 @@ $border-color: #CAD9E0; ...@@ -134,7 +143,7 @@ $border-color: #CAD9E0;
/* #endif */ /* #endif */
color: #333; color: #333;
font-weight: 500; font-weight: 500;
border-bottom: 1rpx $border-color solid; border-bottom: 1px $border-color solid;
font-size: 14px; font-size: 14px;
// text-align: center; // text-align: center;
} }
......
{
"filter-dropdown.reset": "Reset",
"filter-dropdown.search": "Search",
"filter-dropdown.submit": "Submit",
"filter-dropdown.filter": "Filter",
"filter-dropdown.gt": "Greater or equal to",
"filter-dropdown.lt": "Less than or equal to",
"filter-dropdown.date": "Date"
}
{
"filter-dropdown.reset": "Reiniciar",
"filter-dropdown.search": "Búsqueda",
"filter-dropdown.submit": "Entregar",
"filter-dropdown.filter": "Filtrar",
"filter-dropdown.gt": "Mayor o igual a",
"filter-dropdown.lt": "Menos que o igual a",
"filter-dropdown.date": "Fecha"
}
{
"filter-dropdown.reset": "Réinitialiser",
"filter-dropdown.search": "Chercher",
"filter-dropdown.submit": "Soumettre",
"filter-dropdown.filter": "Filtre",
"filter-dropdown.gt": "Supérieur ou égal à",
"filter-dropdown.lt": "Inférieur ou égal à",
"filter-dropdown.date": "Date"
}
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
es,
fr,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "确定",
"filter-dropdown.filter": "筛选",
"filter-dropdown.gt": "大于等于",
"filter-dropdown.lt": "小于等于",
"filter-dropdown.date": "日期范围"
}
{
"filter-dropdown.reset": "重置",
"filter-dropdown.search": "搜索",
"filter-dropdown.submit": "確定",
"filter-dropdown.filter": "篩選",
"filter-dropdown.gt": "大於等於",
"filter-dropdown.lt": "小於等於",
"filter-dropdown.date": "日期範圍"
}
{ {
"id": "uni-table", "id": "uni-table",
"displayName": "uni-table 表格", "displayName": "uni-table 表格",
"version": "1.1.0", "version": "1.2.1",
"description": "表格组件,多用于展示多条结构类似的数据,如", "description": "表格组件,多用于展示多条结构类似的数据,如",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": ["uni-datetime-picker"], "dependencies": ["uni-scss","uni-datetime-picker"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -75,6 +75,10 @@ ...@@ -75,6 +75,10 @@
"快应用": { "快应用": {
"华为": "n", "华为": "n",
"联盟": "n" "联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
...@@ -5,144 +5,9 @@ ...@@ -5,144 +5,9 @@
用于展示多条结构类似的数据 用于展示多条结构类似的数据
### 平台差异说明 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
目前仅支持pc端
### 组件使用注意事项
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 组件需要依赖 `sass` 插件 ,请自行手动安装
- 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
表格是由4个组件: `uni-table`表格组件、`uni-tr`表格行 、`uni-th` 表格头、`uni-td` 单元格组成
需要注意的是:
- `uni-table` 的根节点一定是 `uni-tr`
- `uni-tr` 的根节点一定是 `uni-th` 或者 `uni-td`
- 一个表格内理论上只能包含表头行
- 目前只能在 `uni-th` 中设置 width 属性,`uni-td` 的宽度跟随 `uni-th` 宽度变化
```html
<uni-table border stripe emptyText="暂无更多数据" >
<!-- 表头行 -->
<uni-tr>
<uni-th align="center">日期</uni-th>
<uni-th align="center">姓名</uni-th>
<uni-th align="left">地址</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>2020-10-20</uni-td>
<uni-td>Jeson</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-21</uni-td>
<uni-td>HanMeiMei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-22</uni-td>
<uni-td>LiLei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-23</uni-td>
<uni-td>Danner</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
</uni-table>
</script>
```
## API
### Table Props
|属性名 | 类型 |默认值 | 可选值 | 说明|
|:-: | :-: |:-: | :-: | :-: |
|border | Boolean | false | - | 是否带有纵向边框 |
|stripe | Boolean | false | - | 是否显示斑马线样式 |
|type | String | '' | - | 值为type="selection" 时开启多选|
|emptyText | String | 没有更多数据 | - | 空数据时显示的文本内容 |
|loading | Boolean | false | - | 显示加载中|
### Table Events
事件称名 |说明 | 返回参数
:-: |:-: | :-:
selection-change | 开启多选时,当选择项发生变化时会触发该事件 | Function(Object)
### Table Methods
**Tips: 因微信小程序框架问题,暂不支持如下方法**
|方法称名 |说明 |参数|
|:-: |:-: |:-:|
|selectionAll |选中全部行 |- |
|toggleRowSelection |用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | Function(Array:[行索引],Boolean:selected) |
|clearSelection |用于多选表格,清空用户的选择 |- |
|toggleAllSelection |用于多选表格,切换所有行的选中状态 |- |
### Th Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: | :-: |:-:|
|width |String | - |- | 单元格宽度|
|align |String | left |left/center/right | 表头对齐方式|
|filter-type |String | |search/select/range/date | 筛选类型,search关键字搜索,select类别选择|
|filter-data |Array | || 筛选数据|
|sortable |Boolean| false |- | 是否启用排序|
filter-data 示例
```json
[{
text: "", //显示
value: "" //
}]
```
### Th Events
|事件称名 |说明 | 返回参数 |
|:-: |:-: | :-: |
||sort-change | 点击排序时会触发该事件 | Function(Object)|
||filter-change | 筛选数据时会触发该事件 | Function(Object)|
filter-change(e) 说明
```json
e = {
filterType: "", //筛选类型 search/select/range 和传入的相同
filter: "" // , filterType=search字符串类型,filterType=select数组类型,filterType=range数组类型,[0]开始值, [1]结束值
}
```
### Td Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: |:-: |:-:|
|align |Boolean| left |left/center/right | 单元格对齐方式|
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/table/table](https://hellouniapp.dcloud.net.cn/pages/extUI/table/table)
\ No newline at end of file
const API_BASE = 'https://api.ichunt.com'; //const API_BASE = 'https://api.ichunt.com';
//const API_BASE = 'http://api.liexin.com'; const API_BASE = 'http://api.liexin.com';
const API = { const API = {
/** /**
* 上传数据 * 上传数据
......
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 sign in to comment