优化组件/更新

This commit is contained in:
gyq
2025-12-03 10:13:55 +08:00
parent 92f9776a35
commit 09b6e36a52
261 changed files with 22080 additions and 7238 deletions

View File

@@ -31,7 +31,7 @@ bindIngXMixins = {
},
created() {
this.swipeaction = this.getSwipeAction()
if (this.swipeaction.children !== undefined) {
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
this.swipeaction.children.push(this)
}
},
@@ -74,7 +74,7 @@ bindIngXMixins = {
// 每次只触发一次,避免多次监听造成闪烁
if (this.stop) return
this.stop = true
if (this.autoClose) {
if (this.autoClose && this.swipeaction) {
this.swipeaction.closeOther(this)
}

View File

@@ -21,7 +21,7 @@ export default {
},
created() {
this.swipeaction = this.getSwipeAction()
if (this.swipeaction.children !== undefined) {
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
this.swipeaction.children.push(this)
}
},
@@ -65,7 +65,9 @@ export default {
touchstart(e) {
this.transition = false
this.isclose = true
this.autoClose && this.swipeaction.closeOther(this)
if (this.autoClose && this.swipeaction) {
this.swipeaction.closeOther(this)
}
},
touchmove(e) {},
touchend(e) {

View File

@@ -36,7 +36,7 @@ otherMixins = {
},
mounted() {
this.swipeaction = this.getSwipeAction()
if (this.swipeaction.children !== undefined) {
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
this.swipeaction.children.push(this)
}
this.init()
@@ -53,8 +53,9 @@ otherMixins = {
},
closeSwipe(e) {
if (!this.autoClose) return
this.swipeaction.closeOther(this)
if (this.autoClose && this.swipeaction) {
this.swipeaction.closeOther(this)
}
},
appTouchStart(e) {
const {

View File

@@ -6,7 +6,7 @@ import {
} from "./isPC"
is_pc = isPC()
// #endif
// #ifdef APP-VUE|| MP-WEIXIN || H5
// #ifdef APP-VUE || APP-HARMONY || MP-WEIXIN || H5
mpMixins = {
data() {
@@ -21,7 +21,7 @@ mpMixins = {
},
created() {
this.swipeaction = this.getSwipeAction()
if (this.swipeaction.children !== undefined) {
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
this.swipeaction.children.push(this)
}
},
@@ -31,8 +31,9 @@ mpMixins = {
methods: {
// wxs 中调用
closeSwipe(e) {
if (!this.autoClose) return
this.swipeaction.closeOther(this)
if (this.autoClose && this.swipeaction) {
this.swipeaction.closeOther(this)
}
},
change(e) {

View File

@@ -1,7 +1,7 @@
const MIN_DISTANCE = 10;
export default {
showWatch(newVal, oldVal, ownerInstance, instance, self) {
var state = self.state
var state = self.state || {}
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
if (!$el) return
this.getDom(instance, ownerInstance, self)
@@ -24,7 +24,7 @@ export default {
touchstart(e, ownerInstance, self) {
let instance = e.instance;
let disabled = instance.getDataset().disabled
let state = self.state;
let state = self.state || {};
this.getDom(instance, ownerInstance, self)
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = this.getDisabledType(disabled)
@@ -51,7 +51,7 @@ export default {
// 删除之后已经那不到实例了
if (!instance) return;
let disabled = instance.getDataset().disabled
let state = self.state
let state = self.state || {}
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = this.getDisabledType(disabled)
if (disabled) return
@@ -76,7 +76,7 @@ export default {
touchend(e, ownerInstance, self) {
let instance = e.instance;
let disabled = instance.getDataset().disabled
let state = self.state
let state = self.state || {}
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = this.getDisabledType(disabled)
@@ -95,7 +95,7 @@ export default {
*/
move(value, instance, ownerInstance, self) {
value = value || 0
let state = self.state
let state = self.state || {}
let leftWidth = state.leftWidth
let rightWidth = state.rightWidth
// 获取可滑动范围
@@ -115,13 +115,20 @@ export default {
* @param {Object} ownerInstance
*/
getDom(instance, ownerInstance, self) {
var state = self.state
var state = self.state || {}
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
var leftDom = $el.querySelector('.button-group--left')
var rightDom = $el.querySelector('.button-group--right')
state.leftWidth = leftDom.offsetWidth || 0
state.rightWidth = rightDom.offsetWidth || 0
if (leftDom && leftDom.offsetWidth) {
state.leftWidth = leftDom.offsetWidth || 0
} else {
state.leftWidth = 0
}
if (rightDom && rightDom.offsetWidth) {
state.rightWidth = rightDom.offsetWidth || 0
} else {
state.rightWidth = 0
}
state.threshold = instance.getDataset().threshold
},
@@ -148,7 +155,7 @@ export default {
* @param {Object} ins
*/
moveDirection(left, ins, ownerInstance, self) {
var state = self.state
var state = self.state || {}
var threshold = state.threshold
var position = state.position
var isopen = state.isopen || 'none'
@@ -181,7 +188,7 @@ export default {
* @param {Object} ownerInstance
*/
openState(type, ins, ownerInstance, self) {
let state = self.state
let state = self.state || {}
let leftWidth = state.leftWidth
let rightWidth = state.rightWidth
let left = ''
@@ -231,7 +238,7 @@ export default {
* @param {Object} event
*/
resetTouchStatus(instance, self) {
let state = self.state;
let state = self.state || {};
state.direction = '';
state.deltaX = 0;
state.deltaY = 0;
@@ -245,7 +252,7 @@ export default {
*/
stopTouchStart(event, ownerInstance, self) {
let instance = event.instance;
let state = self.state
let state = self.state || {}
this.resetTouchStatus(instance, self);
var touch = event.touches[0];
state.startX = touch.clientX;
@@ -258,7 +265,7 @@ export default {
*/
stopTouchMove(event, self) {
let instance = event.instance;
let state = self.state;
let state = self.state || {};
let touch = event.touches[0];
state.deltaX = touch.clientX - state.startX;

View File

@@ -1,25 +1,24 @@
<template>
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<!-- #ifdef APP-VUE || APP-HARMONY || MP-WEIXIN || H5 -->
<view class="uni-swipe">
<!-- #ifdef MP-WEIXIN || VUE3 -->
<!-- #ifdef MP-WEIXIN || H5 -->
<view class="uni-swipe_box" :change:prop="wxsswipe.showWatch" :prop="is_show" :data-threshold="threshold"
:data-disabled="disabled" @touchstart="wxsswipe.touchstart" @touchmove="wxsswipe.touchmove"
@touchend="wxsswipe.touchend">
<!-- #endif -->
<!-- #ifndef MP-WEIXIN || VUE3 -->
<!-- #ifndef MP-WEIXIN || H5 -->
<view class="uni-swipe_box" :change:prop="renderswipe.showWatch" :prop="is_show" :data-threshold="threshold"
:data-disabled="disabled+''" @touchstart="renderswipe.touchstart" @touchmove="renderswipe.touchmove"
@touchend="renderswipe.touchend">
<!-- #endif -->
<!-- #endif -->
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
<view class="uni-swipe_button-group button-group--left">
<slot name="left">
<view v-for="(item,index) in leftOptions" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item,'left')"
@click.stop="onClickForPC(index,item,'left')">
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
@touchend.stop="appTouchEnd($event,index,item,'left')" @click.stop="onClickForPC(index,item,'left')">
<text class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
</view>
@@ -32,9 +31,9 @@
<slot name="right">
<view v-for="(item,index) in rightOptions" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item,'right')"
@click.stop="onClickForPC(index,item,'right')"><text class="uni-swipe_button-text"
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
@touchend.stop="appTouchEnd($event,index,item,'right')" @click.stop="onClickForPC(index,item,'right')"><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
</view>
</slot>
@@ -49,9 +48,11 @@
<slot name="left">
<view v-for="(item,index) in leftOptions" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')"><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')">
<text class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">
{{ item.text }}
</text>
</view>
</slot>
</view>
@@ -71,7 +72,7 @@
</view>
<!-- #endif -->
<!-- 其他平台使用 js 长列表性能可能会有影响-->
<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-HARMONY -->
<view class="uni-swipe">
<view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
:style="{transform:moveLeft}" :class="{ani:ani}">
@@ -80,8 +81,8 @@
<view v-for="(item,index) in leftOptions" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text"
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
@touchend.stop="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
</view>
</slot>
@@ -92,7 +93,7 @@
<view v-for="(item,index) in rightOptions" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}" @touchstart="appTouchStart" @touchend="appTouchEnd($event,index,item,'right')"
}" @touchstart.stop="appTouchStart" @touchend.stop="appTouchEnd($event,index,item,'right')"
class="uni-swipe_button button-hock"><text class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
</view>
@@ -141,7 +142,7 @@
* @property {Boolean} autoClose = [true|false] 滑动打开当前组件,是否关闭其他组件
* @property {Number} threshold 滑动缺省值
* @property {Array} leftOptions 左侧选项内容及样式
* @property {Array} rgihtOptions 右侧选项内容及样式
* @property {Array} rightOptions 右侧选项内容及样式
* @event {Function} click 点击选项按钮时触发事件e = {content,index} content点击内容、index下标)
* @event {Function} change 组件打开或关闭时触发left\right\none
*/

View File

@@ -134,9 +134,14 @@ function getDom(instance, ownerInstance) {
var rightStyles = {
width: 0
}
leftStyles = leftDom.getBoundingClientRect()
rightStyles = rightDom.getBoundingClientRect()
if (leftDom) {
leftStyles = leftDom.getBoundingClientRect()
}
if (rightDom) {
rightStyles = rightDom.getBoundingClientRect()
}
state.leftWidth = leftStyles.width || 0
state.rightWidth = rightStyles.width || 0
state.threshold = instance.getDataset().threshold
@@ -297,6 +302,9 @@ function isPC() {
break;
}
}
if(userAgentInfo.indexOf('Phone') > 0 && userAgentInfo.indexOf('Harmony') > 0){
flag = false;
}
return flag;
}

View File

@@ -22,7 +22,7 @@
// 公开给用户使用,重制组件样式
resize(){
// wxs 会自己计算组件大小,所以无需执行下面代码
// #ifndef APP-VUE || H5 || MP-WEIXIN
// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
this.children.forEach(vm=>{
vm.init()
})
@@ -31,22 +31,22 @@
// 公开给用户使用,关闭全部 已经打开的组件
closeAll(){
this.children.forEach(vm=>{
// #ifdef APP-VUE || H5 || MP-WEIXIN
// #ifdef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
vm.is_show = 'none'
// #endif
// #ifndef APP-VUE || H5 || MP-WEIXIN
// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
vm.close()
// #endif
})
},
closeOther(vm) {
if (this.openItem && this.openItem !== vm) {
// #ifdef APP-VUE || H5 || MP-WEIXIN
// #ifdef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
this.openItem.is_show = 'none'
// #endif
// #ifndef APP-VUE || H5 || MP-WEIXIN
// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY
this.openItem.close()
// #endif
}