yunshangxie/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue

<template>
	<view class="tn-swipe-action-item-class tn-swipe-action-item">
		<view class="tn-swipe-action-item__right">
			<slot name="button">
				<view v-for="(item, index) in options" :key="index" class="tn-swipe-action-item__right__button" :style="[{
            alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
          }]" @tap="buttonClickHandler(item, index)">
					<view class="tn-swipe-action-item__right__button__wrapper" :style="[{
              backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#AAAAAA',
              borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
              padding: item.style && item.style.borderRadius ? '0' : '0 30rpx'
            }, item.style]">
						<view v-if="item.icon" :class="[`tn-icon-${item.icon}`]" :style="[{
                color: item.style && item.style.color ? item.style.color : '#FFFFFF',
                fontSize: item.iconSize ? item.iconSize + 'rpx' : item.style && item.style.fontSize ? (item.style.fontsize * 1.2) + 'rpx' : '34rpx',
                marginRight: item.text ? '4rpx' : 0
              }]"></view>
						<text v-if="item.text" class="tn-swipe-action-item__right__button__text tn-text-ellipsis"
							:style="[{
                color: item.style && item.style.color ? item.style.color : '#FFFFFF',
                fontSize: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx',
                lineHeight: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx'
              }]">{{ item.text }}</text>
					</view>
				</view>
			</slot>
		</view>

		<view class="tn-swipe-action-item__content" :status="status" :size="size" :change:status="wxs.statusChange"
			:change:size="wxs.sizeChange" @touchstart="wxs.touchStart" @touchmove="wxs.touchMove"
			@touchend="wxs.touchEnd">
			<slot></slot>
		</view>
	</view>
</template>

<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script>
	export default {
		name: 'tn-swipe-action-item',
		props: {
			// 是否显示滑动菜单
			show: {
				type: Boolean,
				default: false
			},
			// 标识符，如果是v-for可用index的索引值
			name: {
				type: [String, Number],
				default: ''
			},
			// 右侧按钮内容
			options: {
				type: Array,
				default () {
					return []
				}
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否自动关闭其他swipe按钮组
			autoClose: {
				type: Boolean,
				default: true
			},
			// 滑动距离阈值，大于此值才会打开菜单
			threshold: {
				type: Number,
				default: 20
			},
			// 动画过渡时间，单位ms
			duration: {
				type: Number,
				default: 300
			}
		},
		computed: {
			// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
			itemData() {
				return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
			}
		},
		data() {
			return {
				// 按钮尺寸信息
				size: {},
				// 父组件参数
				parentData: {
					autoClose: true
				},
				// 当前状态
				status: 'close'
			}
		},
		watch: {
			itemData() {
				this.queryRect()
			}
		},
		created() {
			this.parent = false
			this.updateParentData()
			this.parent && this.parent.children.push(this)
		},
		mounted() {
			this.$nextTick(() => {
				this.init()
			})
		},
		methods: {
			init() {
				this.queryRect()
			},
			// 更新父组件信息
			updateParentData() {
				this.getParentData('tn-swipe-action')
			},
			// 查询节点
			queryRect() {
				this._tGetRect('.tn-swipe-action-item__right__button', true).then(res => {
					this.size = {
						buttons: res,
						show: this.show,
						disabled: this.disabled,
						threshold: this.threshold,
						duration: this.duration
					}
				})
			},
			// 按钮点击
			buttonClickHandler(item, index) {
				this.$emit('click', {
					type: 'button',
					index,
					name: this.name
				})
			},
			// item点击
			handlerItemClick() {
				this.$emit('click', {
					type: 'item',
					name: this.name
				})
			},
			// 关闭时执行
			closeHandler() {
				this.status = 'close'
			},
			// 设置状态
			setStatus(status) {
				this.status = status
			},
			// 关闭其他单元格
			closeOther() {
				this.parent && this.parent.closeOther(this)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-swipe-action-item {
		position: relative;
		overflow: hidden;
		// touch-action: none;
		margin: 30rpx;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);

		&__right {
			display: flex;
			flex-direction: row;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;

			&__button {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				overflow: hidden;

				&__wrapper {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 0 30rpx;
				}

				&__text {
					display: flex;
					flex-direction: row;
					align-content: center;
					justify-content: center;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
				}
			}
		}

		&__content {
			background-color: #FFFFFF;
			transform: translateX(0px);
		}
	}
</style>