升级uni-ui到最新版本1.4.27

This commit is contained in:
RuoYi
2023-07-12 09:42:10 +08:00
parent 296b15acbe
commit c27a8aa129
70 changed files with 1900 additions and 1578 deletions

View File

@@ -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>