@kengic/uni 0.6.3-beta.4 → 0.6.3-beta.41

package/{dist/uni → uni}/uni-ui/uni-easyinput/common.js

@@ -23,6 +23,7 @@ export const debounce = function (func, wait = 1000, immediate = true) {
         }
     };
 };
+
 /**
  * @desc 函数节流
  * @param func 函数

package/{dist/uni → uni}/uni-ui/uni-easyinput/uni-easyinput.vue

@@ -3,54 +3,6 @@
         <view class="uni-easyinput__content" :class="inputContentClass" :style="inputContentStyle">
             <uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')" size="16"></uni-icons>
             <slot name="left"></slot>
-            <!-- #ifdef MP-ALIPAY -->
-            <textarea
-                :enableNative="enableNative"
-                v-if="type === 'textarea'"
-                class="uni-easyinput__content-textarea"
-                :class="{ 'input-padding': inputBorder }"
-                :name="name"
-                :value="val"
-                :placeholder="placeholder"
-                :placeholderStyle="placeholderStyle"
-                :disabled="disabled"
-                placeholder-class="uni-easyinput__placeholder-class"
-                :maxlength="inputMaxlength"
-                :focus="focused"
-                :autoHeight="autoHeight"
-                :cursor-spacing="cursorSpacing"
-                :adjust-position="adjustPosition"
-                @input="onInput"
-                @blur="_Blur"
-                @focus="_Focus"
-                @confirm="onConfirm"
-                @keyboardheightchange="onkeyboardheightchange"
-            ></textarea>
-            <input
-                :enableNative="enableNative"
-                v-else
-                :type="type === 'password' ? 'text' : type"
-                class="uni-easyinput__content-input"
-                :style="inputStyle"
-                :name="name"
-                :value="val"
-                :password="!showPassword && type === 'password'"
-                :placeholder="placeholder"
-                :placeholderStyle="placeholderStyle"
-                placeholder-class="uni-easyinput__placeholder-class"
-                :disabled="disabled"
-                :maxlength="inputMaxlength"
-                :focus="focused"
-                :confirmType="confirmType"
-                :cursor-spacing="cursorSpacing"
-                :adjust-position="adjustPosition"
-                @focus="_Focus"
-                @blur="_Blur"
-                @input="onInput"
-                @confirm="onConfirm"
-                @keyboardheightchange="onkeyboardheightchange"
-            />
-            <!-- #endif -->
             <!-- #ifndef MP-ALIPAY -->
             <textarea
                 v-if="type === 'textarea'"
@@ -60,7 +12,7 @@
                 :value="val"
                 :placeholder="placeholder"
                 :placeholderStyle="placeholderStyle"
-                :disabled="disabled"
+                :disabled="disabled || readonly"
                 placeholder-class="uni-easyinput__placeholder-class"
                 :maxlength="inputMaxlength"
                 :focus="focused"
@@ -84,7 +36,7 @@
                 :placeholder="placeholder"
                 :placeholderStyle="placeholderStyle"
                 placeholder-class="uni-easyinput__placeholder-class"
-                :disabled="disabled"
+                :disabled="disabled || readonly"
                 :maxlength="inputMaxlength"
                 :focus="focused"
                 :confirmType="confirmType"
@@ -98,8 +50,8 @@
             />
             <!-- #endif -->
 
+            <!-- 开启密码时显示小眼睛 -->
             <template v-if="type === 'password' && passwordIcon">
-                <!-- 开启密码时显示小眼睛 -->
                 <uni-icons
                     v-if="isVal"
                     class="content-clear-icon"
@@ -196,7 +148,7 @@
 
     export default {
         name: 'UniEasyinput',
-        emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm', 'clear', 'eyes', 'change', 'keyboardheightchange'],
+        emits: ['click', 'iconClick', 'update:modelValue', 'focus', 'blur', 'confirm', 'clear', 'eyes', 'change', 'keyboardheightchange'],
         model: {
             prop: 'modelValue',
             event: 'update:modelValue',
@@ -248,6 +200,14 @@
                 type: Boolean,
                 default: false,
             },
+
+            /**
+             * <p>是否只读, 跟 disabled 的区别是: 会显示清空图标.</p>
+             */
+            readonly: {
+                type: Boolean,
+                default: false,
+            },
             maxlength: {
                 type: [Number, String],
                 default: 140,
@@ -362,7 +322,7 @@
                     'is-input-border': this.inputBorder,
                     'is-input-error-border': this.inputBorder && this.msg,
                     'is-textarea': this.type === 'textarea',
-                    'is-disabled': this.disabled,
+                    'is-disabled': this.disabled || this.readonly,
                     'is-focused': this.focusShow,
                 });
             },
@@ -371,7 +331,7 @@
                 const borderColor = this.inputBorder && this.msg ? '#dd524d' : focusColor;
                 return obj2strStyle({
                     'border-color': borderColor || '#e5e5e5',
-                    'background-color': this.disabled ? this.styles.disableColor : this.styles.backgroundColor,
+                    'background-color': this.disabled || this.readonly ? this.styles.disableColor : this.styles.backgroundColor,
                 });
             },
             // input右侧样式
@@ -459,9 +419,6 @@
                 }
                 if (this.errMsg) this.errMsg = '';
                 this.val = value;
-                // TODO 兼容 vue2
-                this.$emit('input', value);
-                // TODO　兼容　vue3
                 this.$emit('update:modelValue', value);
             },
 
@@ -527,9 +484,6 @@
              */
             onClear(event) {
                 this.val = '';
-                // TODO 兼容 vue2
-                this.$emit('input', '');
-                // TODO 兼容 vue2
                 // TODO　兼容　vue3
                 this.$emit('update:modelValue', '');
                 // 点击叉号触发
@@ -582,7 +536,7 @@
         position: relative;
         text-align: left;
         color: #333;
-        font-size: 14px;
+        font-size: 13px;
     }
 
     .uni-easyinput__content {
@@ -609,7 +563,7 @@
         overflow: hidden;
         flex: 1;
         line-height: 1;
-        font-size: 14px;
+        font-size: 13px;
         height: 24px;
         // min-height: 36px;
 
@@ -621,17 +575,16 @@
         & ::-ms-clear {
             display: none;
         }
-
-        & ::-o-clear {
-            display: none;
-        }
-
         /*endif*/
     }
 
+    :deep(.uni-easyinput__content-input) .uni-input-input {
+        padding-bottom: 1px;
+    }
+
     .uni-easyinput__placeholder-class {
         color: #999;
-        font-size: 12px;
+        font-size: 13px;
         // font-weight: 200;
     }
 
@@ -648,7 +601,7 @@
         overflow: hidden;
         flex: 1;
         line-height: 1.5;
-        font-size: 14px;
+        font-size: 13px;
         margin: 6px;
         margin-left: 0;
         height: 80px;
@@ -737,7 +690,7 @@
 
         .uni-easyinput__placeholder-class {
             color: #d5d5d5;
-            font-size: 12px;
+            font-size: 13px;
         }
     }
 </style>

package/{dist/uni → uni}/uni-ui/uni-pagination/uni-pagination.vue

@@ -26,8 +26,8 @@
 		</view>
 		<view class="uni-pagination__num uni-pagination__num-flex-none">
 			<view class="uni-pagination__num-current">
-				<text class="uni-pagination__num-current-text is-pc-hide current-index-text">{{ currentIndex }}</text>
-				<text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
+				<text class="uni-pagination__num-current-text is-pc-hide current-index-text">{{ currentIndex }}&nbsp;</text>
+				<text class="uni-pagination__num-current-text is-pc-hide">/&nbsp;{{ maxPage || 0 }}</text>
 				<!-- #ifndef APP-NVUE -->
 				<view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
 					class="uni-pagination__num-tag tag--active is-phone-hide" @click.top="selectPage(item, index)">
@@ -341,10 +341,14 @@
 		justify-content: center;
 		align-items: center;
 		text-align: center;
-		border-radius: 5px;
+		border-radius: 3px;
 		// border-width: 1px;
 		// border-style: solid;
 		// border-color: $uni-border-color;
+        border: 1px solid #ececec !important;
+        border-radius: 3px !important;
+        border-bottom: 1px solid #d3d3d3 !important;
+        background: #fefefe !important;
 	}
 
 	.uni-pagination__child-btn {
@@ -387,7 +391,7 @@
 		line-height: 30px;
 		// border: 1px red solid;
 		color: #999;
-		border-radius: 4px;
+		border-radius: 3px;
 		// border-width: 1px;
 		// border-style: solid;
 		// border-color: $uni-border-color;

package/{dist/uni → uni}/uni-ui/uni-segmented-control/uni-segmented-control.vue

@@ -122,13 +122,13 @@
 
 	.segmented-control__item--button--first {
 		border-left-width: 1px;
-		border-top-left-radius: 5px;
-		border-bottom-left-radius: 5px;
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
 	}
 
 	.segmented-control__item--button--last {
-		border-top-right-radius: 5px;
-		border-bottom-right-radius: 5px;
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
 	}
 
 	.segmented-control__item--text {

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

@@ -0,0 +1,403 @@
+<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="appTouchStart"
+                            @touchend="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="appTouchStart"
+                            @touchend="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="appTouchStart"
+                            @touchend="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="appTouchStart"
+                            @touchend="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>
+    </view>
+    <!-- #endif -->
+</template>
+
+<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} rgihtOptions 					右侧选项内容及样式
+     * @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>