first commit
This commit is contained in:
lingxiao865
245
uni_modules/tdesign-uniapp/components/swipe-cell/swipe-cell.vue
Normal file
245
uni_modules/tdesign-uniapp/components/swipe-cell/swipe-cell.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view
|
||||
:class="tClass + ' ' + classPrefix"
|
||||
:style="tools._style([customStyle])"
|
||||
data-key="cell"
|
||||
:opened="state.opened"
|
||||
:left-width="state.leftWidth"
|
||||
:right-width="state.rightWidth"
|
||||
@click="onTap"
|
||||
@touchstart="parseEventDynamicCode($event, disabled || 'startDrag')"
|
||||
@touchmove="parseEventDynamicCode($event, skipMove ? '' : disabled || 'onDrag')"
|
||||
@touchend="parseEventDynamicCode($event, skipMove ? '' : disabled || 'endDrag')"
|
||||
@touchcancel="parseEventDynamicCode($event, disabled || 'endDrag')"
|
||||
>
|
||||
<view
|
||||
id="wrapper"
|
||||
ref="wrapper"
|
||||
:style="wrapperStyle"
|
||||
>
|
||||
<view
|
||||
:class="classPrefix + '__left'"
|
||||
data-key="left"
|
||||
>
|
||||
<slot name="left" />
|
||||
<view
|
||||
v-for="(item, index) in left"
|
||||
:key="index"
|
||||
:class="classPrefix + '__content ' + item.className"
|
||||
:style="item.style"
|
||||
:data-action="item"
|
||||
@click.stop="onActionTap(item, 'left')"
|
||||
>
|
||||
<block
|
||||
v-if="item.icon"
|
||||
>
|
||||
<t-icon
|
||||
:custom-style="item.icon.style || ''"
|
||||
:t-class="classPrefix + '__icon'"
|
||||
:prefix="item.icon.prefix"
|
||||
:name="item.icon.name || item.icon"
|
||||
:size="item.icon.size"
|
||||
:color="item.icon.color"
|
||||
:aria-hidden="!!item.icon.ariaHidden"
|
||||
:aria-label="item.icon.ariaLabel"
|
||||
:aria-role="item.icon.ariaRole"
|
||||
/>
|
||||
</block>
|
||||
|
||||
<text
|
||||
v-if="item.text"
|
||||
:class="classPrefix + '__text'"
|
||||
>
|
||||
{{ item.text }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<slot />
|
||||
<view
|
||||
:class="classPrefix + '__right'"
|
||||
data-key="right"
|
||||
>
|
||||
<slot name="right" />
|
||||
<view
|
||||
v-for="(item, index) in right"
|
||||
:key="index"
|
||||
:class="classPrefix + '__content ' + item.className"
|
||||
:style="item.style"
|
||||
:data-action="item"
|
||||
@click.stop="onActionTap(item, 'right')"
|
||||
>
|
||||
<block
|
||||
v-if="item.icon"
|
||||
>
|
||||
<t-icon
|
||||
:custom-style="item.icon.style || ''"
|
||||
:t-class="classPrefix + '__icon'"
|
||||
:prefix="item.icon.prefix"
|
||||
:name="item.icon.name || item.icon"
|
||||
:size="item.icon.size"
|
||||
:color="item.icon.color"
|
||||
:aria-hidden="!!item.icon.ariaHidden"
|
||||
:aria-label="item.icon.ariaLabel"
|
||||
:aria-role="item.icon.ariaRole"
|
||||
/>
|
||||
</block>
|
||||
|
||||
<text
|
||||
v-if="item.text"
|
||||
:class="classPrefix + '__text'"
|
||||
>
|
||||
{{ item.text }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { getRect } from '../common/utils';
|
||||
import { getObserver } from '../common/wechat';
|
||||
import {
|
||||
initLeftWidth,
|
||||
initRightWidth,
|
||||
startDrag,
|
||||
onDrag,
|
||||
endDrag,
|
||||
onCloseChange,
|
||||
onOpenedChange,
|
||||
} from './computed';
|
||||
import tools from '../common/utils.wxs';
|
||||
import { parseEventDynamicCode } from '../common/event/dynamic';
|
||||
|
||||
let ARRAY = [];
|
||||
|
||||
|
||||
const name = `${prefix}-swipe-cell`;
|
||||
|
||||
const ContainerClass = `.${name}`;
|
||||
|
||||
const makeMethods = () => [
|
||||
[initLeftWidth, 'initLeftWidth'],
|
||||
[initRightWidth, 'initRightWidth'],
|
||||
[startDrag, 'startDrag'],
|
||||
[onDrag, 'onDrag'],
|
||||
[endDrag, 'endDrag'],
|
||||
[onCloseChange, 'onCloseChange'],
|
||||
[onOpenedChange, 'onOpenedChange'],
|
||||
].reduce((acc, item) => {
|
||||
const func = item[0];
|
||||
return {
|
||||
...acc,
|
||||
[item[1]](...args) {
|
||||
func.call(this, ...args);
|
||||
},
|
||||
};
|
||||
}, {});
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
],
|
||||
components: {
|
||||
TIcon,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
emits: ['click', 'dragend', 'dragstart'],
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
wrapperStyle: '',
|
||||
closed: true,
|
||||
classPrefix: name,
|
||||
skipMove: false,
|
||||
tools,
|
||||
|
||||
state: {
|
||||
leftWidth: 0,
|
||||
rightWidth: 0,
|
||||
offset: 0,
|
||||
startOffset: 0,
|
||||
opened: this.opened,
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
left: 'setSwipeWidth',
|
||||
right: 'setSwipeWidth',
|
||||
'state.leftWidth': 'initLeftWidth',
|
||||
'state.rightWidth': 'initRightWidth',
|
||||
'state.opened': 'onOpenedChange',
|
||||
opened: {
|
||||
handler(v) {
|
||||
this.state.opened = v;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
ARRAY.push(this);
|
||||
this.setSwipeWidth();
|
||||
},
|
||||
beforeUnMount() {
|
||||
ARRAY = ARRAY.filter(e => e !== this);
|
||||
},
|
||||
methods: {
|
||||
...makeMethods(),
|
||||
parseEventDynamicCode,
|
||||
setSwipeWidth() {
|
||||
Promise.all([getRect(this, `${ContainerClass}__left`), getRect(this, `${ContainerClass}__right`)]).then(([leftRect, rightRect]) => {
|
||||
if (leftRect.width === 0 && rightRect.width === 0 && !this._hasObserved) {
|
||||
this._hasObserved = true;
|
||||
getObserver(this, `.${name}`).then(() => {
|
||||
this.setSwipeWidth();
|
||||
});
|
||||
}
|
||||
this.state.leftWidth = leftRect.width;
|
||||
this.state.rightWidth = rightRect.width;
|
||||
});
|
||||
},
|
||||
|
||||
onSkipMove() {
|
||||
this.skipMove = true;
|
||||
},
|
||||
|
||||
catchMove() {
|
||||
this.skipMove = false;
|
||||
},
|
||||
|
||||
open() {
|
||||
this.state.opened = true;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.state.opened = false;
|
||||
},
|
||||
|
||||
closeOther() {
|
||||
ARRAY.filter(item => item !== this).forEach(item => item.close());
|
||||
},
|
||||
|
||||
onTap() {
|
||||
this.close();
|
||||
},
|
||||
|
||||
onActionTap(action, source) {
|
||||
this.$emit('click', action, source);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './swipe-cell.css';
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user