mirror of
https://github.com/yangzongzhuan/RuoYi-App.git
synced 2025-09-27 22:52:40 +00:00
升级uni-ui到最新版本1.4.27
This commit is contained in:
@@ -1,3 +1,7 @@
|
||||
## 1.2.3(2023-03-28)
|
||||
- 修复 在vue3模式下可能会出现错误的问题
|
||||
## 1.2.2(2022-11-29)
|
||||
- 优化 主题样式
|
||||
## 1.2.1(2022-06-06)
|
||||
- 修复 微信小程序存在无使用组件的问题
|
||||
## 1.2.0(2021-11-19)
|
||||
|
@@ -3,9 +3,9 @@
|
||||
<!-- #ifdef H5 -->
|
||||
<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
|
||||
<slot></slot>
|
||||
<view v-if="noData" class="uni-table-loading">
|
||||
<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
|
||||
</view>
|
||||
<tr v-if="noData" class="uni-table-loading">
|
||||
<td class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</td>
|
||||
</tr>
|
||||
<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
|
||||
</table>
|
||||
<!-- #endif -->
|
||||
|
@@ -112,6 +112,12 @@
|
||||
value: 'value'
|
||||
}
|
||||
}
|
||||
},
|
||||
filterDefaultValue: {
|
||||
type: [Array,String],
|
||||
default () {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -157,7 +163,7 @@
|
||||
enabled: true,
|
||||
isOpened: false,
|
||||
dataList: [],
|
||||
filterValue: '',
|
||||
filterValue: this.filterDefaultValue,
|
||||
checkedValues: [],
|
||||
gtValue: '',
|
||||
ltValue: '',
|
||||
@@ -286,6 +292,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #1890ff !default;
|
||||
|
||||
.flex-r {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -315,8 +323,8 @@
|
||||
}
|
||||
|
||||
.icon-select.active {
|
||||
background-color: #1890ff;
|
||||
border-top-color: #1890ff;
|
||||
background-color: $uni-primary;
|
||||
border-top-color: $uni-primary;
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
@@ -343,11 +351,11 @@
|
||||
}
|
||||
|
||||
.icon-search.active .icon-search-0 {
|
||||
border-color: #1890ff;
|
||||
border-color: $uni-primary;
|
||||
}
|
||||
|
||||
.icon-search.active .icon-search-1 {
|
||||
background-color: #1890ff;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
|
||||
.icon-calendar {
|
||||
@@ -387,14 +395,14 @@
|
||||
}
|
||||
|
||||
.icon-calendar.active {
|
||||
color: #1890ff;
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
.icon-calendar.active .icon-calendar-0,
|
||||
.icon-calendar.active .icon-calendar-1,
|
||||
.icon-calendar.active .icon-calendar-0:before,
|
||||
.icon-calendar.active .icon-calendar-0:after {
|
||||
background-color: #1890ff;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
|
||||
.uni-filter-dropdown {
|
||||
@@ -497,7 +505,7 @@
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background-color: #1890ff;
|
||||
background-color: $uni-primary;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- #ifdef H5 -->
|
||||
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
|
||||
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
|
||||
<view class="uni-table-th-row">
|
||||
<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
|
||||
<slot></slot>
|
||||
@@ -8,8 +8,8 @@
|
||||
<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
|
||||
<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
|
||||
</view>
|
||||
</view>
|
||||
<dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
|
||||
</view>
|
||||
<dropdown v-if="filterType || filterData.length" :filterDefaultValue="filterDefaultValue" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
|
||||
</view>
|
||||
</th>
|
||||
<!-- #endif -->
|
||||
@@ -18,35 +18,35 @@
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import dropdown from './filter-dropdown.vue'
|
||||
// #endif
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import dropdown from './filter-dropdown.vue'
|
||||
// #endif
|
||||
/**
|
||||
* Th 表头
|
||||
* @description 表格内的表头单元格组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
|
||||
* @property {Number | String} width 单元格宽度(支持纯数字、携带单位px或rpx)
|
||||
* @property {Number | String} width 单元格宽度(支持纯数字、携带单位px或rpx)
|
||||
* @property {Boolean} sortable 是否启用排序
|
||||
* @property {Number} align = [left|center|right] 单元格对齐方式
|
||||
* @value left 单元格文字左侧对齐
|
||||
* @value center 单元格文字居中
|
||||
* @value right 单元格文字右侧对齐
|
||||
* @property {Array} filterData 筛选数据
|
||||
* @property {String} filterType [search|select] 筛选类型
|
||||
* @value right 单元格文字右侧对齐
|
||||
* @property {Array} filterData 筛选数据
|
||||
* @property {String} filterType [search|select] 筛选类型
|
||||
* @value search 关键字搜素
|
||||
* @value select 条件选择
|
||||
* @value select 条件选择
|
||||
* @event {Function} sort-change 排序触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTh',
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
components: {
|
||||
// #ifdef H5
|
||||
dropdown
|
||||
// #endif
|
||||
},
|
||||
components: {
|
||||
// #ifdef H5
|
||||
dropdown
|
||||
// #endif
|
||||
},
|
||||
emits:['sort-change','filter-change'],
|
||||
props: {
|
||||
@@ -79,6 +79,12 @@ export default {
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
filterDefaultValue: {
|
||||
type: [Array,String],
|
||||
default () {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -88,30 +94,30 @@ export default {
|
||||
descending: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 根据props中的width属性 自动匹配当前th的宽度(px)
|
||||
customWidth(){
|
||||
if(typeof this.width === 'number'){
|
||||
return this.width
|
||||
} else if(typeof this.width === 'string') {
|
||||
let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
|
||||
let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
|
||||
let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
|
||||
if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
|
||||
return this.width.replace('px', '')
|
||||
} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
|
||||
let numberRpx = Number(this.width.replace('rpx', ''))
|
||||
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
|
||||
return Math.round(numberRpx * widthCoe)
|
||||
} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
|
||||
return this.width
|
||||
} else { // 不符合格式
|
||||
return ''
|
||||
}
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 根据props中的width属性 自动匹配当前th的宽度(px)
|
||||
customWidth(){
|
||||
if(typeof this.width === 'number'){
|
||||
return this.width
|
||||
} else if(typeof this.width === 'string') {
|
||||
let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
|
||||
let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
|
||||
let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
|
||||
if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
|
||||
return this.width.replace('px', '')
|
||||
} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
|
||||
let numberRpx = Number(this.width.replace('rpx', ''))
|
||||
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
|
||||
return Math.round(numberRpx * widthCoe)
|
||||
} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
|
||||
return this.width
|
||||
} else { // 不符合格式
|
||||
return ''
|
||||
}
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
contentAlign() {
|
||||
let align = 'left'
|
||||
switch (this.align) {
|
||||
@@ -177,9 +183,9 @@ export default {
|
||||
}
|
||||
return item
|
||||
})
|
||||
},
|
||||
ondropdown(e) {
|
||||
this.$emit("filter-change", e)
|
||||
},
|
||||
ondropdown(e) {
|
||||
this.$emit("filter-change", e)
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
@@ -200,6 +206,7 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
$border-color: #ebeef5;
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-table-th {
|
||||
padding: 12px 10px;
|
||||
@@ -211,13 +218,13 @@ $border-color: #ebeef5;
|
||||
font-weight: bold;
|
||||
color: #909399;
|
||||
border-bottom: 1px $border-color solid;
|
||||
}
|
||||
|
||||
.uni-table-th-row {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-table-th-row {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.table--border {
|
||||
@@ -225,7 +232,7 @@ $border-color: #ebeef5;
|
||||
}
|
||||
.uni-table-th-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.arrow-box {
|
||||
@@ -254,7 +261,7 @@ $border-color: #ebeef5;
|
||||
}
|
||||
&.active {
|
||||
::after {
|
||||
background-color: #007aff;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -271,8 +278,8 @@ $border-color: #ebeef5;
|
||||
}
|
||||
&.active {
|
||||
::after {
|
||||
background-color: #007aff;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@@ -76,8 +76,8 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$checked-color: #007aff;
|
||||
<style lang="scss">
|
||||
$uni-primary: #007aff !default;
|
||||
$border-color: #DCDFE6;
|
||||
$disable:0.4;
|
||||
|
||||
@@ -125,8 +125,8 @@
|
||||
}
|
||||
|
||||
&.checkbox--indeterminate {
|
||||
border-color: $checked-color;
|
||||
background-color: $checked-color;
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
position: absolute;
|
||||
@@ -147,7 +147,7 @@
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border-color: $checked-color;
|
||||
border-color: $uni-primary;
|
||||
}
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
@@ -160,8 +160,8 @@
|
||||
|
||||
// 选中
|
||||
&.is-checked {
|
||||
border-color: $checked-color;
|
||||
background-color: $checked-color;
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
|
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "uni-table",
|
||||
"displayName": "uni-table 表格",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.3",
|
||||
"description": "表格组件,多用于展示多条结构类似的数据,如",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
@@ -16,11 +16,7 @@
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
@@ -37,7 +33,8 @@
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss","uni-datetime-picker"],
|
||||
|
Reference in New Issue
Block a user