Skip to content

Commit

Permalink
add: 新增up-picker/up-toolbar组件uni-app-x版本及全局样式兼容
Browse files Browse the repository at this point in the history
  • Loading branch information
jry committed Sep 12, 2024
1 parent 4e77f32 commit f8959da
Show file tree
Hide file tree
Showing 20 changed files with 837 additions and 83 deletions.
4 changes: 2 additions & 2 deletions src/uni_modules/uview-plus/components/up-icon/up-icon.uvue
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@
imgStyle(): any {
let style = {}
// 如果设置width和height属性,则优先使用,否则使用size属性
style['width'] = this.width != '' ? addUnit(this.width) : addUnit(this.size.toString())
style['height'] = this.height != '' ? addUnit(this.height) : addUnit(this.size.toString())
style['width'] = this.width != '' ? addUnit(this.width) : addUnit(this.size!!.toString())
style['height'] = this.height != '' ? addUnit(this.height) : addUnit(this.size!!.toString())
return style
},
// 通过图标名,查找对应的图标
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@
this.array12.forEach((ele, index) => {
const angle = index * (360 / 12); // 计算角度
const angleRad = angle * (Math.PI / 180); // 转换为弧度
const banjing = this.calculateSquareRadius(parseInt(getPx(parseInt(this.size.toString()) * 2))); // 半径
const banjing = this.calculateSquareRadius(parseInt(getPx(parseInt(this.size!!.toString()) * 2))); // 半径
const xOffset = banjing * Math.cos(angleRad);
const yOffset = banjing * Math.sin(angleRad);
// 假设.loading-container的position是relative,并且宽度和高度都是100%
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineMixin } from '../../libs/vue'

export const propsPickerColumn = defineMixin({
props: {

}
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<picker-view-column>
<view class="up-picker-column">
</view>
</picker-view-column>
</template>

<script>
import { propsPickerColumn } from './props';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
/**
* PickerColumn
* @description
* @tutorial url
* @property {String}
* @event {Function}
* @example
*/
export default {
name: 'up-picker-column',
mixins: [mpMixin, mixin, propsPickerColumn],
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
</style>
30 changes: 30 additions & 0 deletions src/uni_modules/uview-plus/components/up-picker/picker.uts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/*
* @Author : jry
* @Description :
* @version : 4.0
* @Date : 2024-09-12 15:25:27
* @LastAuthor : jry
* @lastTime : 2024-09-12 15:25:27
* @FilePath : /uview-plus/libs/config/props/picker
*/
export default {
// picker
picker: {
show: false,
popupMode: 'bottom',
showToolbar: true,
title: '',
columns: [] as Array<Array<any>>,
loading: false,
itemHeight: 44,
cancelText: '取消',
confirmText: '确定',
cancelColor: '#909193',
confirmColor: '#3c9cff',
visibleItemCount: 5,
keyName: 'text',
closeOnClickOverlay: false,
defaultIndex: [] as number[],
immediateChange: true
}
} as UTSJSONObject
114 changes: 114 additions & 0 deletions src/uni_modules/uview-plus/components/up-picker/props.uts
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/*
* @Author : jry
* @Description :
* @version : 4.0
* @Date : 2024-09-12 15:25:27
* @LastAuthor : jry
* @lastTime : 2024-09-12 15:25:27
* @FilePath : /uview-plus/libs/config/props/picker
*/
import { defineMixin } from '../../libs/vue'
import defProps from './picker'
let crtProp = defProps['picker'] as UTSJSONObject

export const propsPicker = defineMixin({
props: {
modelValue: {
type: Array,
default: [] as Array<any>
},
hasInput: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请选择'
},
// 是否展示picker弹窗
show: {
type: Boolean,
default: crtProp['show']
},
// 弹出的方向,可选值为 top bottom right left center
popupMode: {
type: String,
default: crtProp['popupMode']
},
// 是否展示顶部的操作栏
showToolbar: {
type: Boolean,
default: crtProp['showToolbar']
},
// 顶部标题
title: {
type: String,
default: crtProp['title']
},
// 对象数组,设置每一列的数据
columns: {
type: Array,
default: crtProp['columns']
},
// 是否显示加载中状态
loading: {
type: Boolean,
default: crtProp['loading']
},
// 各列中,单个选项的高度
itemHeight: {
type: [String, Number],
default: crtProp['itemHeight']
},
// 取消按钮的文字
cancelText: {
type: String,
default: crtProp['cancelText']
},
// 确认按钮的文字
confirmText: {
type: String,
default: crtProp['confirmText']
},
// 取消按钮的颜色
cancelColor: {
type: String,
default: crtProp['cancelColor']
},
// 确认按钮的颜色
confirmColor: {
type: String,
default: crtProp['confirmColor']
},
// 每列中可见选项的数量
visibleItemCount: {
type: [String, Number],
default: crtProp['visibleItemCount']
},
// 选项对象中,需要展示的属性键名
keyName: {
type: String,
default: crtProp['keyName']
},
// 是否允许点击遮罩关闭选择器
closeOnClickOverlay: {
type: Boolean,
default: crtProp['closeOnClickOverlay']
},
// 各列的默认索引
defaultIndex: {
type: Array,
default: crtProp['defaultIndex']
},
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件,只在微信2.21.1及以上有效
immediateChange: {
type: Boolean,
default: crtProp['immediateChange']
},
// 工具栏右侧插槽是否开启
toolbarRightSlot: {
type: Boolean,
default: false
},
}
})
Loading

0 comments on commit f8959da

Please sign in to comment.