charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat:还原更新框架

Browse Source
This commit is contained in:
charles
2026-07-23 14:49:48 +08:00
parent d5a6a16ea5
commit 75c7434f79
529 changed files with 43714 additions and 68201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uview-plus/components/u-slider/nvue.js
+193 -193
View File
@@ -1,193 +1,193 @@
/**
* 使用bindingx方案实现slider
* 只能使用于nvue下
*/
// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
const BindingX = uni.requireNativePlugin('bindingx')
// nvue操作dom的库，用于获取dom的尺寸信息
const dom = uni.requireNativePlugin('dom')
// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
const animation = uni.requireNativePlugin('animation')
import { range } from '../../libs/function/index';
export default {
data() {
return {
// 位移的偏移量
x: 0,
// 是否正在触摸过程中，用于标记动画类是否添加或移除
touching: false,
changeFromInside: false
}
},
watch: {
// 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
// 从服务端获取一个值后，赋值给slider的v-model而导致的
value(n) {
if (!this.changeFromInside) {
this.initX()
} else {
this.changeFromInside = false
}
}
},
mounted() {
this.init()
},
methods: {
init() {
// 更新滑块尺寸信息
this.getSliderRect().then((size) => {
this.sliderRect = size
this.initX()
})
},
// 获取节点信息
// 获取slider尺寸
getSliderRect() {
// 获取滑块条的尺寸信息
// 通过nvue的dom模块，查询节点信息
return new Promise((resolve) => {
this.$nextTick(() => {
dom.getComponentRect(this.$refs.slider, (res) => {
resolve(res.size)
})
})
})
},
// 初始化按钮位置
initButtonStyle({
barStyle,
buttonWrapperStyle
}) {
this.barStyle = barStyle
this.buttonWrapperStyle = buttonWrapperStyle
},
emitEvent(event, value) {
this.$emit(event, value || this.value)
},
// 滑动开始
async onTouchStart(e) {
// if (this.disabled) return
// // 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
// e.stopPropagation && e.stopPropagation()
// e.preventDefault && e.preventDefault()
// // 更新滑块的尺寸信息
// this.sliderRect = await this.getSliderRect()
// // 标记滑动过程中触摸点的信息
// this.touchStart(e)
// this.startValue = this.format(this.value)
// this.dragStatus = 'start'
// 标记滑动过程中触摸点的信息
// this.touchStart(e)
},
// 开始滑动
onTouchMove(e) {
// if (this.disabled) return;
// if (this.dragStatus === 'start') {
// this.$emit('drag-start')
// }
// // 标记当前滑动过程中的触点信息，此方法在touch mixin中
// this.touchMove(e)
// this.dragStatus = 'draging'
// const {
// width: sliderWidth
// } = this.sliderRect
// const diff = (this.deltaX / sliderWidth) * this.getRange()
// this.newValue = this.startValue + diff
// this.updateValue(this.newValue, false, true)
// 获取元素ref
// const button = this.$refs['nvue-button'].ref
// const gap = this.$refs['nvue-gap'].ref
// animation.transition(gap, {
// styles: {
// width: `${this.startX + this.deltaX}px`
// }
// })
// // console.log(this.startX + this.deltaX);
// animation.transition(button, {
// styles: {
// transform: `translateX(${this.startX + this.deltaX}px)`
// }
// })
// this.barStyle = {
// width: `${this.startX + this.deltaX}px`
// }
const {
x
} = this.getTouchPoint(e)
this.buttonWrapperStyle = {
transform: `translateX(${x}px)`
}
// this.buttonWrapperStyle = {
// transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
// }
},
// onTouchEnd() {
// if (this.disabled) return;
// if (this.dragStatus === 'draging') {
// this.updateValue(this.newValue, true)
// this.$emit('drag-end');
// }
// },
updateValue(value, end, drag) {
value = this.format(value)
const {
width: sliderWidth
} = this.sliderRect
const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
this.value = value
this.barStyle = {
width: `${width}px`
}
// console.log('width', width);
if (drag) {
this.$emit('drag', {
value
})
}
if (end) {
this.$emit('change', value)
}
if ((drag || end)) {
this.changeFromInside = true
this.$emit('update', value)
}
},
// 从value的变化，倒推得出x的值该为多少
initX() {
const {
left,
width
} = this.sliderRect
// 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
// 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
this.x = this.value / 100 * width
// 设置移动的值
const barStyle = {
width: `${this.x}px`
}
// 按钮的初始值
const buttonWrapperStyle = {
transform: `translateX(${this.x - this.blockHeight / 2}px)`
}
this.initButtonStyle({
barStyle,
buttonWrapperStyle
})
},
// 移动点占总长度的百分比，此处需要先除以step，是为了保证step大于1时，比如10，那么在滑动11,12px这样的
// 距离时，实际上滑块是不会滑动的，到了16,17px，经过四舍五入后，就变成了20px，进行了下一个跳变
format(value) {
return Math.round(range(this.min, this.max, value) / this.step) * this.step
},
getRange() {
const {
max,
min
} = this
return max - min
}
}
}
/**
* 使用bindingx方案实现slider
* 只能使用于nvue下
*/
// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
const BindingX = uni.requireNativePlugin('bindingx')
// nvue操作dom的库，用于获取dom的尺寸信息
const dom = uni.requireNativePlugin('dom')
// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
const animation = uni.requireNativePlugin('animation')
import { range } from '../../libs/function/index';
export default {
data() {
return {
// 位移的偏移量
x: 0,
// 是否正在触摸过程中，用于标记动画类是否添加或移除
touching: false,
changeFromInside: false
}
},
watch: {
// 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
// 从服务端获取一个值后，赋值给slider的v-model而导致的
value(n) {
if (!this.changeFromInside) {
this.initX()
} else {
this.changeFromInside = false
}
}
},
mounted() {
this.init()
},
methods: {
init() {
// 更新滑块尺寸信息
this.getSliderRect().then((size) => {
this.sliderRect = size
this.initX()
})
},
// 获取节点信息
// 获取slider尺寸
getSliderRect() {
// 获取滑块条的尺寸信息
// 通过nvue的dom模块，查询节点信息
return new Promise((resolve) => {
this.$nextTick(() => {
dom.getComponentRect(this.$refs.slider, (res) => {
resolve(res.size)
})
})
})
},
// 初始化按钮位置
initButtonStyle({
barStyle,
buttonWrapperStyle
}) {
this.barStyle = barStyle
this.buttonWrapperStyle = buttonWrapperStyle
},
emitEvent(event, value) {
this.$emit(event, value || this.value)
},
// 滑动开始
async onTouchStart(e) {
// if (this.disabled) return
// // 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
// e.stopPropagation && e.stopPropagation()
// e.preventDefault && e.preventDefault()
// // 更新滑块的尺寸信息
// this.sliderRect = await this.getSliderRect()
// // 标记滑动过程中触摸点的信息
// this.touchStart(e)
// this.startValue = this.format(this.value)
// this.dragStatus = 'start'
// 标记滑动过程中触摸点的信息
// this.touchStart(e)
},
// 开始滑动
onTouchMove(e) {
// if (this.disabled) return;
// if (this.dragStatus === 'start') {
// this.$emit('drag-start')
// }
// // 标记当前滑动过程中的触点信息，此方法在touch mixin中
// this.touchMove(e)
// this.dragStatus = 'draging'
// const {
// width: sliderWidth
// } = this.sliderRect
// const diff = (this.deltaX / sliderWidth) * this.getRange()
// this.newValue = this.startValue + diff
// this.updateValue(this.newValue, false, true)
// 获取元素ref
// const button = this.$refs['nvue-button'].ref
// const gap = this.$refs['nvue-gap'].ref
// animation.transition(gap, {
// styles: {
// width: `${this.startX + this.deltaX}px`
// }
// })
// // console.log(this.startX + this.deltaX);
// animation.transition(button, {
// styles: {
// transform: `translateX(${this.startX + this.deltaX}px)`
// }
// })
// this.barStyle = {
// width: `${this.startX + this.deltaX}px`
// }
const {
x
} = this.getTouchPoint(e)
this.buttonWrapperStyle = {
transform: `translateX(${x}px)`
}
// this.buttonWrapperStyle = {
// transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
// }
},
// onTouchEnd() {
// if (this.disabled) return;
// if (this.dragStatus === 'draging') {
// this.updateValue(this.newValue, true)
// this.$emit('drag-end');
// }
// },
updateValue(value, end, drag) {
value = this.format(value)
const {
width: sliderWidth
} = this.sliderRect
const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
this.value = value
this.barStyle = {
width: `${width}px`
}
// console.log('width', width);
if (drag) {
this.$emit('drag', {
value
})
}
if (end) {
this.$emit('change', value)
}
if ((drag || end)) {
this.changeFromInside = true
this.$emit('update', value)
}
},
// 从value的变化，倒推得出x的值该为多少
initX() {
const {
left,
width
} = this.sliderRect
// 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
// 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
this.x = this.value / 100 * width
// 设置移动的值
const barStyle = {
width: `${this.x}px`
}
// 按钮的初始值
const buttonWrapperStyle = {
transform: `translateX(${this.x - this.blockHeight / 2}px)`
}
this.initButtonStyle({
barStyle,
buttonWrapperStyle
})
},
// 移动点占总长度的百分比，此处需要先除以step，是为了保证step大于1时，比如10，那么在滑动11,12px这样的
// 距离时，实际上滑块是不会滑动的，到了16,17px，经过四舍五入后，就变成了20px，进行了下一个跳变
format(value) {
return Math.round(range(this.min, this.max, value) / this.step) * this.step
},
getRange() {
const {
max,
min
} = this
return max - min
}
}
}
uni_modules/uview-plus/components/u-slider/props.js
+91 -112
View File
@@ -1,112 +1,91 @@
import { defineMixin } from '../../libs/vue'
import SliderDefaultProps from './slider'
import { registerComponentProps } from '../../libs/config/props.js'
const defProps = registerComponentProps(SliderDefaultProps)
export const props = defineMixin({
props: {
// 最小可选值
min: {
type: [Number, String],
default: () => defProps.slider.min
},
// 最大可选值
max: {
type: [Number, String],
default: () => defProps.slider.max
},
// 步长，取值必须大于 0，并且可被(max - min)整除
step: {
type: [Number, String],
default: () => defProps.slider.step
},
// #ifdef VUE3
// 当前取值
modelValue: {
type: [String, Number],
default: () => defProps.slider.value
},
// #endif
// #ifdef VUE2
// 当前取值
value: {
type: [String, Number],
default: () => defProps.slider.value
},
// #endif
// 是否区间模式
isRange: {
type: Boolean,
default: false
},
// 双滑块时值
rangeValue: {
type: [Array],
default: [0, 0]
},
// 滑块右侧已选择部分的背景色
activeColor: {
type: String,
default: () => defProps.slider.activeColor
},
// 滑块左侧未选择部分的背景色
inactiveColor: {
type: String,
default: () => defProps.slider.inactiveColor
},
// 滑块的大小，取值范围为 12 - 28
blockSize: {
type: [Number, String],
default: () => defProps.slider.blockSize
},
// 滑块的颜色
blockColor: {
type: String,
default: () => defProps.slider.blockColor
},
// 用户对滑块的自定义颜色
blockStyle: {
type: Object,
default: () => defProps.slider.blockStyle
},
// 禁用状态
disabled: {
type: Boolean,
default: () => defProps.slider.disabled
},
// 是否显示当前的选择值
showValue: {
type: Boolean,
default: () => defProps.slider.showValue
},
// 是否渲染uni-app框架内置组件
useNative: {
type: Boolean,
default: () => defProps.slider.useNative
},
// 滑块厚度
height: {
type: String,
default: () => defProps.slider.height
},
innerStyle: {
type: Object,
default: () => defProps.slider.innerStyle
},
// 是否垂直方向
vertical: {
type: Boolean,
default: defProps.slider.vertical
},
// 滑块粗细，为了支持垂直模式下统一粗细参数，用size代替height。
size: {
type: [Number, String],
default: () => defProps.slider.size
},
// 滑块长度，水平和垂直模式的长度。
length: {
type: [Number, String],
default: 'auto'
}
}
})
import { defineMixin } from '../../libs/vue'
import defProps from '../../libs/config/props.js'
export const props = defineMixin({
props: {
// 最小可选值
min: {
type: [Number, String],
default: () => defProps.slider.min
},
// 最大可选值
max: {
type: [Number, String],
default: () => defProps.slider.max
},
// 步长，取值必须大于 0，并且可被(max - min)整除
step: {
type: [Number, String],
default: () => defProps.slider.step
},
// #ifdef VUE3
// 当前取值
modelValue: {
type: [String, Number],
default: () => defProps.slider.value
},
// #endif
// #ifdef VUE2
// 当前取值
value: {
type: [String, Number],
default: () => defProps.slider.value
},
// #endif
// 是否区间模式
isRange: {
type: Boolean,
default: false
},
// 双滑块时值
rangeValue: {
type: [Array],
default: [0, 0]
},
// 滑块右侧已选择部分的背景色
activeColor: {
type: String,
default: () => defProps.slider.activeColor
},
// 滑块左侧未选择部分的背景色
inactiveColor: {
type: String,
default: () => defProps.slider.inactiveColor
},
// 滑块的大小，取值范围为 12 - 28
blockSize: {
type: [Number, String],
default: () => defProps.slider.blockSize
},
// 滑块的颜色
blockColor: {
type: String,
default: () => defProps.slider.blockColor
},
// 用户对滑块的自定义颜色
blockStyle: {
type: Object,
default: () => defProps.slider.blockStyle
},
// 禁用状态
disabled: {
type: Boolean,
default: () => defProps.slider.disabled
},
// 是否显示当前的选择值
showValue: {
type: Boolean,
default: () => defProps.slider.showValue
},
// 是否渲染uni-app框架内置组件
useNative: {
type: Boolean,
default: () => defProps.slider.useNative
},
// 滑块高度
height: {
type: String,
default: () => defProps.slider.height
}
}
})
uni_modules/uview-plus/components/u-slider/slider.js
+27 -31
View File
@@ -1,31 +1,27 @@
/*
* @Author : LQ
* @Description :
* @version : 3.0
* @Date : 2021-08-20 16:44:21
* @LastAuthor : jry
* @lastTime : 2025-12-19 08:55:21
* @FilePath : /uview-plus/libs/config/props/slider.js
*/
export default {
// slider组件
slider: {
value: 0,
blockSize: 18,
min: 0,
max: 100,
step: 1,
activeColor: '#2979ff',
inactiveColor: '#c0c4cc',
blockColor: '#ffffff',
showValue: false,
disabled:false,
blockStyle: {},
useNative: false,
height: '',
innerStyle: {},
vertical: false,
size: '2px',
length: 'auto'
}
}
/*
* @Author : LQ
* @Description :
* @version : 1.0
* @Date : 2021-08-20 16:44:21
* @LastAuthor : LQ
* @lastTime : 2021-08-20 17:08:25
* @FilePath : /u-view2.0/uview-ui/libs/config/props/slider.js
*/
export default {
// slider组件
slider: {
value: 0,
blockSize: 18,
min: 0,
max: 100,
step: 1,
activeColor: '#2979ff',
inactiveColor: '#c0c4cc',
blockColor: '#ffffff',
showValue: false,
disabled:false,
blockStyle: {},
useNative: false,
height: '2px'
}
}
uni_modules/uview-plus/components/u-slider/u-slider.vue
+476 -563
View File
File diff suppressed because it is too large Load Diff