antd-mini/es/AutoResize/index.js

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

import { __awaiter, __generator } from "tslib";
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
import { Component, getValueFromProps } from '../_util/simply';
import { AutoResizeDefaultProps } from './props';
Component(AutoResizeDefaultProps, {
    getInstance: function () {
        if (this.$id) {
            return my;
        }
        return this;
    },
    getBoundingClientRect: function (query) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
                    case 1: return [2 /*return*/, _a.sent()];
                }
            });
        });
    },
    adjustFontSize: function () {
        var _this = this;
        // 用createSelectorQuery来获取容器尺寸信息
        this.getBoundingClientRect('.ant-autoresize-fontsize-container').then(function (rect) {
            if (!rect)
                return;
            var _a = getValueFromProps(_this, [
                'text',
                'maxFontSize',
                'ratio',
            ]), text = _a[0], maxFontSize = _a[1], ratio = _a[2];
            // 假设自适应逻辑是基于容器宽度来设置字号
            var containerWidth = rect.width;
            var textLength = text.length;
            /** 判断是否还有空隙 总宽度 - 字体宽度 > 0 */
            var hasSpace = containerWidth - (maxFontSize / ratio) * textLength > 0;
            if (!hasSpace) {
                _this.checkTextOverflow();
            }
        });
    },
    // 检查是否超长
    checkTextOverflow: function () {
        var _this = this;
        // 子组件插槽的类名是default-slot
        Promise.all([
            this.getBoundingClientRect('.ant-autoresize-slot'),
            this.getBoundingClientRect('.ant-autoresize-fontsize-container'),
        ]).then(function (rects) {
            var textRect = rects[0];
            var containerRect = rects[1];
            if (textRect && containerRect) {
                var _a = getValueFromProps(_this, [
                    'wrap',
                    'minFontSize',
                ]), wrap = _a[0], minFontSize = _a[1];
                var newStyle = '';
                // 如果容器宽度小于文本宽度，且容器高度支持换行，则换行；
                // wrap为true时，文案超长会换行，注意样式如margin-top重叠
                if (containerRect.height / 2 > textRect.height || wrap) {
                    newStyle = "font-size: ".concat(minFontSize, "rpx; overflow: visible; white-space: pre-wrap; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;");
                }
                else {
                    // 如果不支持换行，则直接出现省略号；
                    newStyle = "font-size: ".concat(minFontSize, "rpx; max-width: ").concat(textRect.width, "px; width: ").concat(textRect.width, "px; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; -webkit-box-orient: vertical;");
                }
                // 设置样式...
                _this.setData({
                    wrapAndEllipsisStyle: newStyle,
                });
            }
        });
    },
}, {
    /** 换行或省略号样式 */
    wrapAndEllipsisStyle: '',
}, undefined, {
    didMount: function () {
        this.adjustFontSize();
    },
});