by2025/SmartCulturalTourismManageUniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
mocheng
2025-08-26 16:17:24 +08:00
commit e3d080e419
557 changed files with 70994 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<view class="u-swipe-action-item" ref="u-swipe-action-item">
<view class="u-swipe-action-item__right">
<slot name="button">
<view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
:ref="`u-swipe-action-item__right__button-${index}`" :style="[{
alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
}]" @tap="buttonClickHandler(item, index)">
<view class="u-swipe-action-item__right__button__wrapper" :style="[{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
padding: item.style && item.style.borderRadius ? '0' : '0 15px',
}, item.style]">
<u-icon v-if="item.icon" :name="item.icon"
:color="item.style && item.style.color ? item.style.color : '#ffffff'"
:size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17"
:customStyle="{
marginRight: item.text ? '2px' : 0
}"></u-icon>
<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
:style="[{
color: item.style && item.style.color ? item.style.color : '#ffffff',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
}]">{{ item.text }}</text>
</view>
</view>
</slot>
</view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
:change:size="wxs.sizeChange">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="u-swipe-action-item__content" ref="u-swipe-action-item__content" @panstart="onTouchstart"
@tap="clickHandler">
<!-- #endif -->
<slot />
</view>
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script>
import touch from '../../libs/mixin/touch.js'
import props from './props.js';
// #ifdef APP-NVUE
import nvue from './nvue.js';
// #endif
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
import wxs from './wxs.js';
// #endif
/**
* SwipeActionItem 滑动单元格子组件
* @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
* @tutorial https://www.uviewui.com/components/swipeAction.html
* @property {Boolean} show 控制打开或者关闭（默认 false ）
* @property {String | Number} index 标识符，如果是v-for，可用index索引
* @property {Boolean} disabled 是否禁用（默认 false ）
* @property {Boolean} autoClose 是否自动关闭其他swipe按钮组（默认 true ）
* @property {Number} threshold 滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
* @property {Array} options 右侧按钮内容
* @property {String | Number} duration 动画过渡时间，单位ms（默认 350 ）
* @event {Function(index)} open 组件打开时触发
* @event {Function(index)} close 组件关闭时触发
* @example <u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
*/
export default {
name: 'u-swipe-action-item',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch],
// #ifdef APP-NVUE
mixins: [uni.$u.mpMixin, uni.$u.mixin, props, nvue, touch],
// #endif
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch, wxs],
// #endif
data() {
return {
// 按钮的尺寸信息
size: {},
// 父组件u-swipe-action的参数
parentData: {
autoClose: true,
},
// 当前状态，open-打开，close-关闭
status: 'close',
}
},
watch: {
// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
wxsInit(newValue, oldValue) {
this.queryRect()
}
},
computed: {
wxsInit() {
return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
}
},
mounted() {
this.init()
},
methods: {
init() {
// 初始化父组件数据
this.updateParentData()
// #ifndef APP-NVUE
uni.$u.sleep().then(() => {
this.queryRect()
})
// #endif
},
updateParentData() {
// 此方法在mixin中
this.getParentData('u-swipe-action')
},
// #ifndef APP-NVUE
// 查询节点
queryRect() {
this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
this.size = {
buttons,
show: this.show,
disabled: this.disabled,
threshold: this.threshold,
duration: this.duration
}
})
},
// #endif
// 按钮被点击
buttonClickHandler(item, index) {
this.$emit('click', {
index,
name: this.name
})
}
},
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-swipe-action-item {
position: relative;
overflow: hidden;
/* #ifndef APP-NVUE || MP-WEIXIN */
touch-action: pan-y;
/* #endif */
&__content {
background-color: #FFFFFF;
z-index: 10;
}
&__right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
@include flex;
&__button {
@include flex;
justify-content: center;
overflow: hidden;
align-items: center;
&__wrapper {
@include flex;
align-items: center;
justify-content: center;
padding: 0 15px;
&__text {
@include flex;
align-items: center;
color: #FFFFFF;
font-size: 15px;
text-align: center;
justify-content: center;
}
}
}
}
}
</style>