@tuya-miniapp/smart-ui 2.3.0-beta-8 → 2.3.0-beta-10

package/lib/circle/index.js

@@ -11,13 +11,12 @@ function percentToDecimal(percent) {
     percent = percent.replace('%', '');
     return percent / 100;
 }
+var idListRef = {
+    value: [],
+};
 (0, component_1.SmartComponent)({
     props: {
         className: String,
-        canvasId: {
-            type: String,
-            value: 'circle_' + Date.now(),
-        },
         customStyle: String,
         size: {
             type: String,
@@ -46,7 +45,9 @@ function percentToDecimal(percent) {
             type: Number,
             value: 0,
             observer: function (val) {
-                this.render(val);
+                if (this.data.canvasId) {
+                    this.render(val, this.data.canvasId);
+                }
             },
         },
         mode: {
@@ -59,7 +60,46 @@ function percentToDecimal(percent) {
             value: true,
         },
     },
+    data: {
+        canvasId: '',
+        dpr: 1,
+    },
+    created: function () {
+        this.initId();
+        this.initRate();
+    },
+    mounted: function () {
+        this.render(this.data.percent, this.data.canvasId);
+    },
+    destroyed: function () {
+        var _this = this;
+        idListRef.value = idListRef.value.filter(function (id) { return id !== _this.data.canvasId; });
+    },
     methods: {
+        initId: function () {
+            if (this.data.canvasId)
+                return;
+            var id = "smart-ui-circle_".concat(String(+new Date()).slice(-4), "_").concat(String(Math.random()).slice(-2));
+            if (idListRef.value.includes(id)) {
+                this.initId();
+                return;
+            }
+            this.setData({
+                canvasId: id,
+            });
+            idListRef.value.push(id);
+        },
+        initRate: function () {
+            var _this = this;
+            wx.getSystemInfo({
+                success: function (res) {
+                    var dpr = res.pixelRatio; // 获取设备像素比
+                    _this.setData({
+                        dpr: dpr,
+                    });
+                },
+            });
+        },
         renderAll: function (canvas, ctx, progress, ops) {
             if (ops === void 0) { ops = {
                 lineCap: 'round',
@@ -100,6 +140,7 @@ function percentToDecimal(percent) {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -145,6 +186,7 @@ function percentToDecimal(percent) {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -201,24 +243,29 @@ function percentToDecimal(percent) {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
             drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
         },
-        render: function (val) {
+        render: function (val, canvasId) {
             // @ts-ignore
-            var context = ty.createCanvasContext(this.data.canvasId);
+            var context = ty.createCanvasContext(canvasId);
             var sizeVal = this.parseSize();
             var params = {
-                width: sizeVal,
-                height: sizeVal,
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
                 lineWidth: this.data.trackWidth,
                 trackColor: this.data.trackColor,
                 fillColor: this.data.fillColor,
                 fillColorStops: this.data.fillColorStops,
                 maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
             };
+            this.setData(params);
             if (this.data.mode === 'basic') {
                 this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/lib/circle/index.wxml

@@ -1 +1,9 @@
-<canvas class="smart-progress-circle" type="2d" canvas-id="{{canvasId}}" style="width: {{size}}; height:{{size}};"></canvas>
+<canvas 
+  class="smart-progress-circle" 
+  type="2d" 
+  wx:if="{{canvasId}}" 
+  width="{{ canvasWidth * dpr }}"
+  height="{{ canvasHeight * dpr }}"
+  canvas-id="{{canvasId}}" 
+  style="width: {{width}}px; height:{{height}}px;"
+></canvas>

package/lib/common/appLog.js

@@ -16,7 +16,7 @@ var init = function (tag) {
     }
     // @ts-ignore
     if (!ty.getLogManager) {
-        console.warn('不支持ty.getLogManager');
+        // console.warn('不支持ty.getLogManager');
         return null;
     }
     // @ts-ignore
@@ -43,7 +43,7 @@ var info = function (data, devId) {
             // console.log('success ty.Log', res);
         },
         failure: function (err) {
-            console.log('fail ty.Log', err);
+            // console.log('fail ty.Log', err);
         },
     });
 };
@@ -62,10 +62,10 @@ var warn = function (data, devId) {
     Log.debug({
         message: data,
         success: function (res) {
-            console.log('success ty.debug', res);
+            // console.log('success ty.debug', res);
         },
         failure: function (err) {
-            console.log('fail ty.debug', err);
+            // console.log('fail ty.debug', err);
         },
     });
 };
@@ -97,10 +97,10 @@ var error = function (data, devId) {
     Log.error({
         message: _data,
         success: function (res) {
-            console.log('success ty.error', res);
+            // console.log('success ty.error', res);
         },
         failure: function (err) {
-            console.log('fail ty.error', err);
+            // console.log('fail ty.error', err);
         },
     });
 };

package/lib/common/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
@@ -8,7 +7,7 @@ export { getSystemInfoSync } from './version';
 export declare function range(num: number, min: number, max: number): number;
 export declare function nextTick(cb: (...args: any[]) => void): void;
 export declare function addUnit(value?: string | number): string | undefined;
-export declare function requestAnimationFrame(cb: () => void): NodeJS.Timeout;
+export declare function requestAnimationFrame(cb?: () => void): Promise<void>;
 export declare function pickExclude(obj: unknown, keys: string[]): {};
 export declare function getRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
 export declare function getAllRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;

package/lib/common/utils.js

@@ -31,9 +31,12 @@ function addUnit(value) {
 }
 exports.addUnit = addUnit;
 function requestAnimationFrame(cb) {
-    return setTimeout(function () {
-        cb();
-    }, 1000 / 30);
+    return new Promise(function (resolve) {
+        setTimeout(function () {
+            cb === null || cb === void 0 ? void 0 : cb();
+            resolve();
+        }, 1000 / 30);
+    });
 }
 exports.requestAnimationFrame = requestAnimationFrame;
 function pickExclude(obj, keys) {

package/lib/datetime-picker/index.js

@@ -146,6 +146,9 @@ var defaultFormatter = function (type, value) {
         formatterFunc: function (type, value, data) {
             var _a;
             var _b, _c;
+            if (type === 'part') {
+                return value === 0 ? data.amText : data.pmText;
+            }
             var _d = (_b = this === null || this === void 0 ? void 0 : this.data) !== null && _b !== void 0 ? _b : data, formatterMap = _d.formatterMap, _e = _d.formatter, formatter = _e === void 0 ? defaultFormatter : _e;
             var mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
             if (typeof mapDetail === 'string') {
@@ -375,8 +378,8 @@ var defaultFormatter = function (type, value) {
                     part: part,
                 });
                 values = [
-                    part,
-                    formatter('hour', part ? (!hour ? 12 : hour - 12) : hour, this.data),
+                    formatter('part', part, this.data),
+                    formatter('hour', part ? (!hour ? '12' : (hour - 12).toString().padStart(2, '0')) : hour, this.data),
                     formatter('minute', minute, this.data),
                 ];
             }

package/lib/dialog/dialog.js

@@ -99,6 +99,7 @@ var Dialog = function (options) {
     prom.catch(function (err) {
         appLog_1.default.info("Dialog promise Error", err);
         console.log(err, '---Dialog-error');
+        queueRef.value = [];
     });
     return prom;
 };

package/lib/dialog/index.js

@@ -199,5 +199,12 @@ var dialog_1 = require("./dialog");
                 callback(actionType, this);
             }
         },
+        // 兜底防止 通过api方式打开组件失败 导致队列没有清除
+        onPopUpError: function () {
+            var _a = this.data, callback = _a.callback, actionType = _a.actionType;
+            if (callback) {
+                callback(actionType, this);
+            }
+        },
     },
 });

package/lib/dialog/index.wxml

@@ -17,6 +17,8 @@
   bind:before-leave="onBeforeLeave"
   bind:leave="onLeave"
   bind:after-leave="onAfterLeave"
+  bind:enter-error="onPopUpError"
+  bind:leave-error="onPopUpError"
 >
   <view
     wx:if="{{ title || useTitleSlot }}"

package/lib/mixins/transition.js

@@ -1,11 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transition = void 0;
 // @ts-nocheck
-var appLog_1 = __importDefault(require("../common/appLog"));
 var utils_1 = require("../common/utils");
 var validator_1 = require("../common/validator");
 var getClassNames = function (name) { return ({
@@ -38,6 +70,8 @@ function transition(showDefaultValue) {
             type: '',
             inited: false,
             display: false,
+            animating: false,
+            status: '',
         },
         ready: function () {
             if (this.data.show === true) {
@@ -46,7 +80,6 @@ function transition(showDefaultValue) {
         },
         methods: {
             observeShow: function (value, old) {
-                appLog_1.default.info("transition component observeShow value: ".concat(value, ";old: ").concat(old));
                 if (value === old) {
                     return;
                 }
@@ -54,104 +87,133 @@ function transition(showDefaultValue) {
             },
             enter: function () {
                 var _this = this;
-                if (this.enterFinishedPromise)
+                if (this.enterFinishedPromise || this.data.animating)
                     return;
-                appLog_1.default.info("transition component enter success");
-                this.enterFinishedPromise = new Promise(function (resolve) {
-                    var _a = _this.data, duration = _a.duration, name = _a.name;
-                    var classNames = getClassNames(name);
-                    var currentDuration = (0, validator_1.isObj)(duration) ? duration.enter : duration;
-                    if (_this.status === 'enter') {
-                        return;
-                    }
-                    _this.status = 'enter';
-                    _this.$emit('before-enter');
-                    (0, utils_1.requestAnimationFrame)(function () {
-                        if (_this.status !== 'enter') {
-                            return;
+                this.setData({
+                    animating: true,
+                    status: 'enter',
+                });
+                // eslint-disable-next-line no-async-promise-executor
+                this.enterFinishedPromise = new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, duration, name, classNames, currentDuration;
+                    var _this = this;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = this.data, duration = _a.duration, name = _a.name;
+                                classNames = getClassNames(name);
+                                currentDuration = (0, validator_1.isObj)(duration) ? duration.enter : duration;
+                                this.$emit('before-enter');
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 1:
+                                _b.sent();
+                                this.$emit('enter');
+                                this.setData({
+                                    inited: true,
+                                    display: true,
+                                    classes: classNames.enter,
+                                    currentDuration: currentDuration,
+                                });
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 2:
+                                _b.sent();
+                                this.transitionEnded = false;
+                                this.setData({ classes: classNames['enter-to'] });
+                                clearTimeout(this.timer);
+                                this.timer = setTimeout(function () {
+                                    _this.$emit("after-enter");
+                                    _this.setData({
+                                        animating: false,
+                                    });
+                                    _this.checkShowStatus();
+                                }, currentDuration + 20);
+                                resolve();
+                                return [2 /*return*/];
                         }
-                        _this.$emit('enter');
-                        _this.setData({
-                            inited: true,
-                            display: true,
-                            classes: classNames.enter,
-                            currentDuration: currentDuration,
-                        });
-                        (0, utils_1.requestAnimationFrame)(function () {
-                            if (_this.status !== 'enter') {
-                                return;
-                            }
-                            _this.transitionEnded = false;
-                            appLog_1.default.info("transition component enter transitionEnded false");
-                            _this.setData({ classes: classNames['enter-to'] });
-                            resolve();
-                        });
                     });
-                });
+                }); });
                 this.enterFinishedPromise.catch(function (err) {
                     _this.enterFinishedPromise = null;
-                    appLog_1.default.info("enter enterFinishedPromise catch", err);
+                    _this.setData({ animating: false });
                     console.log(err, '---error-enter');
+                    _this.$emit('enter-error', err);
                 });
             },
             leave: function () {
-                var _this = this;
-                if (!this.enterFinishedPromise)
-                    return;
-                appLog_1.default.info("transition component leave success");
-                this.enterFinishedPromise
-                    .then(function () {
-                    if (!_this.data.display) {
-                        return;
-                    }
-                    var _a = _this.data, duration = _a.duration, name = _a.name;
-                    var classNames = getClassNames(name);
-                    var currentDuration = (0, validator_1.isObj)(duration) ? duration.leave : duration;
-                    _this.status = 'leave';
-                    _this.$emit('before-leave');
-                    (0, utils_1.requestAnimationFrame)(function () {
-                        if (_this.status !== 'leave') {
-                            return;
-                        }
-                        _this.$emit('leave');
-                        _this.setData({
-                            classes: classNames.leave,
-                            currentDuration: currentDuration,
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        if (!this.enterFinishedPromise || this.data.animating)
+                            return [2 /*return*/];
+                        this.setData({
+                            animating: true,
+                            status: 'leave',
                         });
-                        (0, utils_1.requestAnimationFrame)(function () {
-                            if (_this.status !== 'leave') {
-                                return;
-                            }
-                            _this.transitionEnded = false;
-                            appLog_1.default.info("transition component leave transitionEnded false");
-                            setTimeout(function () {
-                                _this.enterFinishedPromise = null;
-                                appLog_1.default.info("transition component enterFinishedPromise cleared");
-                                _this.onTransitionEnd();
-                            }, currentDuration);
-                            _this.setData({ classes: classNames['leave-to'] });
+                        this.enterFinishedPromise
+                            .then(function () { return __awaiter(_this, void 0, void 0, function () {
+                            var _a, duration, name, classNames, currentDuration;
+                            var _this = this;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        _a = this.data, duration = _a.duration, name = _a.name;
+                                        classNames = getClassNames(name);
+                                        currentDuration = (0, validator_1.isObj)(duration) ? duration.leave : duration;
+                                        this.$emit('before-leave');
+                                        return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                                    case 1:
+                                        _b.sent();
+                                        this.$emit('leave');
+                                        this.setData({
+                                            classes: classNames.leave,
+                                            currentDuration: currentDuration,
+                                        });
+                                        return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                                    case 2:
+                                        _b.sent();
+                                        this.transitionEnded = false;
+                                        clearTimeout(this.timer);
+                                        setTimeout(function () {
+                                            _this.enterFinishedPromise = null;
+                                            _this.$emit("after-leave");
+                                            _this.setData({
+                                                display: false,
+                                                animating: false,
+                                            });
+                                            _this.checkShowStatus();
+                                        }, currentDuration + 20);
+                                        this.setData({ classes: classNames['leave-to'] });
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })
+                            .catch(function (err) {
+                            _this.enterFinishedPromise = null;
+                            _this.setData({ animating: false });
+                            console.log(err, '---error-leave');
+                            _this.$emit('leave-error', err);
                         });
+                        return [2 /*return*/];
                     });
-                })
-                    .catch(function (err) {
-                    _this.enterFinishedPromise = null;
-                    appLog_1.default.info("leave enterFinishedPromise catch", err);
-                    console.log(err, '---error-enter');
                 });
             },
-            onTransitionEnd: function () {
-                appLog_1.default.info("transition component in transitionEnded ".concat(this.transitionEnded));
-                if (this.transitionEnded) {
-                    return;
-                }
-                this.transitionEnded = true;
-                appLog_1.default.info("transition component in transitionEnded true");
-                this.$emit("after-".concat(this.status));
-                appLog_1.default.info("transition component onTransitionEnd ".concat(this.status, " success"));
-                var _a = this.data, show = _a.show, display = _a.display;
-                if (!show && display) {
-                    this.setData({ display: false });
-                }
+            checkShowStatus: function () {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _a, status, show;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = this.data, status = _a.status, show = _a.show;
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 1:
+                                _b.sent();
+                                if ((status === 'enter' && show) || (status === 'leave' && !show))
+                                    return [2 /*return*/];
+                                show ? this.enter() : this.leave();
+                                return [2 /*return*/];
+                        }
+                    });
+                });
             },
         },
     });

package/lib/popover/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
+@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/lib/popover/index.js

@@ -13,7 +13,6 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable prefer-destructuring */
 var component_1 = require("../common/component");
-var transition_1 = require("../mixins/transition");
 var IconSrc = function (deg) {
     return "<svg style=\"transform: rotate(".concat(deg, ")\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"none\" version=\"1.1\" width=\"18.00000052453666\" height=\"6.000001573609978\" viewBox=\"0 0 18.00000052453666 6.000001573609978\"><g transform=\"matrix(-1,-8.742277657347586e-8,-8.742277657347586e-8,1,36.00000104907346,0.0000015736100241790166)\"><path d=\"M18.026037824536658,0.006179333609978323C18.827028524536658,0.014487173609978322,19.72353052453666,0.026256673609978323,20.50303052453666,0.3038745736099783C21.34506052453666,0.6038775736099783,21.90250052453666,1.1284215736099783,22.46337052453666,1.7457315736099783C22.867160524536658,2.1897415736099783,23.66033052453666,3.137051573609978,24.04654052453666,3.5944415736099784C24.36263052453666,3.9694415736099784,24.98139052453666,4.710681573609978,25.31923052453666,5.0693015736099785C25.74452052453666,5.520461573609978,26.270210524536658,6.000001573609978,27.00036052453666,6.000001573609978C27.730510524536662,6.000001573609978,28.25600052453666,5.520461573609978,28.681000524536657,5.069761573609978C29.01880052453666,4.711371573609978,29.63760052453666,3.969671573609978,29.95390052453666,3.5949015736099783C30.33970052453666,3.137511573609978,31.13280052453666,2.1902015736099782,31.53690052453666,1.7461915736099782C32.09870052453666,1.1288815736099784,32.65520052453666,0.6043385736099783,33.49700052453666,0.3043355736099783C34.276700524536665,0.027410573609978322,35.17340052453666,0.014948673609978322,35.97390052453666,0.006640913609978322C36.811100524536656,-0.0018975863900216774,17.189137524536658,-0.0023591663900216775,18.026037824536658,0.006179333609978323Z\" fill-rule=\"evenodd\" fill=\"#FFFFFF\" fill-opacity=\"1\"/></g></svg>");
 };
@@ -30,7 +29,6 @@ function createSvgIcon(svg) {
         'leave-to-class',
         'close-icon-class',
     ],
-    mixins: [(0, transition_1.transition)(false)],
     props: {
         // `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
         placement: {
@@ -41,9 +39,12 @@ function createSvgIcon(svg) {
             type: Boolean,
             observer: function (value) {
                 if (value !== this.data.currentShow) {
-                    this.setData({
-                        currentShow: value,
-                    });
+                    if (value) {
+                        this.onOpen();
+                    }
+                    else {
+                        this.onClose();
+                    }
                 }
             },
         },
@@ -57,10 +58,10 @@ function createSvgIcon(svg) {
         },
         duration: {
             type: Number,
-            value: 2000,
+            value: 20000,
         },
     },
-    data: { currentShow: false },
+    data: { currentShow: false, showStyle: '' },
     mounted: function () { },
     created: function () { },
     methods: {
@@ -172,11 +173,19 @@ function createSvgIcon(svg) {
             this.setData(params);
         },
         onClick: function () {
+            this.onOpen();
+        },
+        onOpen: function () {
             var _this = this;
             this.getButtonPosition();
             this.setData({
                 currentShow: true,
             });
+            setTimeout(function () {
+                _this.setData({
+                    showStyle: 'opacity: 1;',
+                });
+            }, 100);
             this.$emit('show-change', true);
             if (this.data.duration) {
                 setTimeout(function () {
@@ -185,11 +194,17 @@ function createSvgIcon(svg) {
             }
         },
         onClose: function () {
+            var _this = this;
             this.setData({
-                currentShow: false,
+                showStyle: 'opacity: 0;',
             });
-            this.$emit('show-change', false);
-            this.$emit('close', false);
+            setTimeout(function () {
+                _this.setData({
+                    currentShow: false,
+                });
+                _this.$emit('show-change', false);
+                _this.$emit('close', false);
+            }, 300);
         },
     },
 });

package/lib/popover/index.json

@@ -1,7 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "smart-transition": "../transition/index",
     "smart-overlay": "../overlay/index"
   }
 }