thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
components/firstui/fui-swipe-action/fui-swipe-action.vue Normal file
View File

@ -0,0 +1,234 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 140 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<view class="fui-swipe__action-wrap" :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}">
<view class="fui-swipe__action-inner" :show="isShow" :change:show="handler.showChange" :threshold="thresholdVal"
:change:threshold="handler.thresholdChange" :disabled="isDisabled" :change:disabled="handler.disabledChange"
@touchstart="handler.touchstart" @touchmove="handler.touchmove" @touchend="handler.touchend"
@mousedown="handler.mousedown" @mousemove="handler.mousemove" @mouseup="handler.mouseup"
@mouseleave="handler.mouseleave">
<view class="fui-swipe__action-left">
<slot></slot>
</view>
<view class="fui-swipe__action-right">
<slot name="buttons">
<view class="fui-swipe__action-btn" :style="{background:item.background}"
v-for="(item,index) in buttons" :key="index" @touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item)" @tap.stop="handleClick(index,item)">
<text class="fui-swipe__action-text"
:style="{fontSize:(item.size || size)+'rpx',color:item.color || color}">{{item.text}}</text>
</view>
</slot>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-swipe__action-wrap" :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}"
ref="fui_swipea_wrap" @horizontalpan="touchstart" @touchend="touchend">
<view class="fui-swipe__action-right" ref="fui_swipea_buttons">
<slot name="buttons">
<view class="fui-swipe__action-btn" :style="{background:item.background}"
v-for="(item,index) in buttons" :key="index" @tap.stop="handleClick($event,index,item)">
<text class="fui-swipe__action-text"
:style="{fontSize:(item.size || size)+'rpx',color:item.color || color}">{{item.text}}</text>
</view>
</slot>
</view>
<view class="fui-swipe__action-left" ref="fui_swipea_content">
<slot></slot>
</view>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS|| MP-WEIXIN || H5 -->
<view class="fui-swipe__action-wrap" :style="{marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}">
<view class="fui-swipe__action-inner" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
:style="{transform:moveLeft}" :class="{'fui-swipe__action-ani':ani}">
<view class="fui-swipe__action-left">
<slot></slot>
</view>
<view class="fui-swipe__action-right" :class="[elClass]">
<slot name="buttons">
<view class="fui-swipe__action-btn" :style="{background:item.background}"
v-for="(item,index) in buttons" :key="index" @touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item)">
<text class="fui-swipe__action-text"
:style="{fontSize:(item.size || size)+'rpx',color:item.color || color}">{{item.text}}</text>
</view>
</slot>
</view>
</view>
</view>
<!-- #endif -->
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->
<script>
import mpwxs from './mpwxs.js'
import mpjs from './mpjs.js'
import bindingx from './bindingx.js'
const dangerColor = (uni && uni.$fui && uni.$fui.color && uni.$fui.color.danger) || '#FF2B2B'
export default {
name: "fui-swipe-action",
mixins: [mpwxs, mpjs, bindingx],
emits: ['click', 'change'],
props: {
buttons: {
type: Array,
default () {
return [{
text: '删除',
background: dangerColor
}]
}
},
size: {
type: [Number, String],
default: 32
},
color: {
type: String,
default: '#fff'
},
show: {
type: Boolean,
default: false
},
threshold: {
type: [Number, String],
default: 30
},
disabled: {
type: Boolean,
default: false
},
autoClose: {
type: Boolean,
default: true
},
//1.9.9+
marginTop: {
type: [Number, String],
default: 0
},
//1.9.9+
marginBottom: {
type: [Number, String],
default: 0
},
param: {
type: [Number, String],
default: 0
}
},
// #ifndef VUE3
beforeDestroy() {
if (this.__beforeUnmount) return
this.unInstall()
},
// #endif
// #ifdef VUE3
beforeUnmount() {
this.__beforeUnmount = true;
this.unInstall()
},
// #endif
methods: {
unInstall() {
if (this.group) {
this.group.children.forEach((item, index) => {
if (item === this) {
this.group.children.splice(index, 1)
}
})
}
},
//获取父元素实例
getParent(name = 'fui-swipeaction-group') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
}
}
}
</script>
<style scoped>
.fui-swipe__action-wrap {
position: relative;
/* #ifndef APP-NVUE */
overflow: hidden;
/* #endif */
}
.fui-swipe__action-inner {
/* #ifndef APP-NVUE */
display: flex;
flex-shrink: 0;
/* #endif */
position: relative;
}
.fui-swipe__action-left {
/* #ifndef APP-NVUE */
width: 100%;
position: relative;
z-index: 10;
/* #endif */
flex: 1;
}
.fui-swipe__action-right {
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
position: absolute;
top: 0;
bottom: 0;
right: 0;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
transform: translateX(100%);
}
.fui-swipe__action-btn {
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0 48rpx;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-swipe__action-text {
/* #ifndef APP-NVUE */
flex-shrink: 0;
/* #endif */
}
.fui-swipe__action-ani {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
</style>