@vtj/materials 0.10.1-alpha.0 → 0.10.1-alpha.2

package/src/uni-ui/lib/uni-swipe-action-item/uni-swipe-action-item.vue

@@ -0,0 +1,494 @@
+<template>
+  <!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+  <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
+  <view class="uni-swipe">
+    <!--  #ifdef MP-WEIXIN || VUE3 -->
+    <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 -->
+      <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 -->
+        <!-- 在微信小程序 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.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>
+          </slot>
+        </view>
+        <view class="uni-swipe_text--center">
+          <slot></slot>
+        </view>
+        <view class="uni-swipe_button-group button-group--right">
+          <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.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>
+        </view>
+      </view>
+    </view>
+    <!-- #endif -->
+    <!-- app nvue端 使用 bindingx -->
+    <!-- #ifdef APP-NVUE -->
+    <view
+      ref="selector-box--hock"
+      class="uni-swipe"
+      @horizontalpan="touchstart"
+      @touchend="touchend">
+      <view
+        ref="selector-left-button--hock"
+        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"
+            @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>
+      <view
+        ref="selector-right-button--hock"
+        class="uni-swipe_button-group button-group--right">
+        <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"
+            @click.stop="onClick(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>
+      </view>
+      <view ref="selector-content--hock" class="uni-swipe_box">
+        <slot></slot>
+      </view>
+    </view>
+    <!-- #endif -->
+    <!-- 其他平台使用 js ，长列表性能可能会有影响-->
+    <!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
+    <view class="uni-swipe">
+      <view
+        class="uni-swipe_box"
+        @touchstart="touchstart"
+        @touchmove="touchmove"
+        @touchend="touchend"
+        :style="{ transform: moveLeft }"
+        :class="{ ani: ani }">
+        <view
+          class="uni-swipe_button-group button-group--left"
+          :class="[elClass]">
+          <slot name="left">
+            <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.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>
+        </view>
+        <slot></slot>
+        <view
+          class="uni-swipe_button-group button-group--right"
+          :class="[elClass]">
+          <slot name="right">
+            <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.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>
+          </slot>
+        </view>
+      </view>
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<!-- <script src="./wx.wxs" module="wxsswipe" lang="wxs"></script> -->
+
+<!-- <script module="renderswipe" lang="renderjs">
+  import render from './render.js'
+  export default {
+  	mounted(e, ins, owner) {
+  		this.state = {}
+  	},
+  	methods: {
+  		showWatch(newVal, oldVal, ownerInstance, instance) {
+  			render.showWatch(newVal, oldVal, ownerInstance, instance, this)
+  		},
+  		touchstart(e, ownerInstance) {
+  			render.touchstart(e, ownerInstance, this)
+  		},
+  		touchmove(e, ownerInstance) {
+  			render.touchmove(e, ownerInstance, this)
+  		},
+  		touchend(e, ownerInstance) {
+  			render.touchend(e, ownerInstance, this)
+  		}
+  	}
+  }
+</script> -->
+<script>
+  import mpwxs from './mpwxs';
+  import bindingx from './bindingx.js';
+  import mpother from './mpother';
+
+  /**
+   * SwipeActionItem 滑动操作子组件
+   * @description 通过滑动触发选项的容器
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=181
+   * @property {Boolean} show = [left|right｜none] 	开启关闭组件，auto-close = false 时生效
+   * @property {Boolean} disabled = [true|false] 		是否禁止滑动
+   * @property {Boolean} autoClose = [true|false] 	滑动打开当前组件，是否关闭其他组件
+   * @property {Number}  threshold 					滑动缺省值
+   * @property {Array} leftOptions 					左侧选项内容及样式
+   * @property {Array} rightOptions 					右侧选项内容及样式
+   * @event {Function} click 							点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
+   * @event {Function} change 						组件打开或关闭时触发，left\right\none
+   */
+
+  export default {
+    mixins: [mpwxs, bindingx, mpother],
+    emits: ['click', 'change'],
+    props: {
+      // 控制开关
+      show: {
+        type: String,
+        default: 'none'
+      },
+
+      // 禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+
+      // 是否自动关闭
+      autoClose: {
+        type: Boolean,
+        default: true
+      },
+
+      // 滑动缺省距离
+      threshold: {
+        type: Number,
+        default: 20
+      },
+
+      // 左侧按钮内容
+      leftOptions: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+
+      // 右侧按钮内容
+      rightOptions: {
+        type: Array,
+        default() {
+          return [];
+        }
+      }
+    },
+    // #ifndef VUE3
+    // TODO vue2
+    destroyed() {
+      if (this.__isUnmounted) return;
+      this.uninstall();
+    },
+    // #endif
+    // #ifdef VUE3
+    // TODO vue3
+    unmounted() {
+      this.__isUnmounted = true;
+      this.uninstall();
+    },
+    // #endif
+
+    methods: {
+      uninstall() {
+        if (this.swipeaction) {
+          this.swipeaction.children.forEach((item, index) => {
+            if (item === this) {
+              this.swipeaction.children.splice(index, 1);
+            }
+          });
+        }
+      },
+      /**
+       * 获取父元素实例
+       */
+      getSwipeAction(name = 'uniSwipeAction') {
+        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 lang="scss">
+  .uni-swipe {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    overflow: hidden;
+    /* #endif */
+  }
+
+  .uni-swipe_box {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    flex-shrink: 0;
+    // touch-action: none;
+    /* #endif */
+    position: relative;
+  }
+
+  .uni-swipe_content {
+    // border: 1px red solid;
+  }
+
+  .uni-swipe_text--center {
+    width: 100%;
+    /* #ifndef APP-NVUE */
+    cursor: grab;
+    /* #endif */
+  }
+
+  .uni-swipe_button-group {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .button-group--left {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  .button-group--right {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  .uni-swipe_button {
+    /* #ifdef APP-NVUE */
+    flex: 1;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0 20px;
+  }
+
+  .uni-swipe_button-text {
+    /* #ifndef APP-NVUE */
+    flex-shrink: 0;
+    /* #endif */
+    font-size: 14px;
+  }
+
+  .ani {
+    transition-property: transform;
+    transition-duration: 0.3s;
+    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  /* #ifdef MP-ALIPAY */
+  .movable-area {
+    /* width: 100%; */
+    height: 45px;
+  }
+
+  .movable-view {
+    display: flex;
+    /* justify-content: center; */
+    position: relative;
+    flex: 1;
+    height: 45px;
+    z-index: 2;
+  }
+
+  .movable-view-button {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: row;
+    height: 100%;
+    background: #c0c0c0;
+  }
+
+  /* .transition {
+		transition: all 0.3s;
+	} */
+
+  .movable-view-box {
+    flex-shrink: 0;
+    height: 100%;
+    background-color: #fff;
+  }
+
+  /* #endif */
+</style>