@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-radio/snake-radio.vue

@@ -0,0 +1,271 @@
+<template>
+    <view class="snake-radio" :style="[radioStyle, customStyle]" :class="customClass">
+        <view class="snake-radio__icon-wrap" @tap="toggle" :class="iconClass" :style="iconStyle">
+            <snake-icon name="checkmark" :size="elIconSize" :color="iconColor" />
+        </view>
+        <view class="snake-radio__label" @tap="onClickLabel" :style="{ fontSize: labelFontSize }">
+            <slot>{{ label }}</slot>
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+/**
+ * @component Radio
+ * @description radio 单选框，通过 `name` 参与 RadioGroup 互斥选择。
+ * @see /components/radio
+ */
+
+import { computed, inject } from 'vue';
+import { useParent } from '../../libs/hooks';
+import { RADIO_GROUP_KEY } from '../snake-radio-group/types';
+import { addUnit } from '../../libs/function/unit';
+import { formKey } from '../snake-form/types';
+import Icon from '../snake-icon/snake-icon.vue';
+import { radioProps } from './types';
+import type { RadioEmits } from './types';
+
+defineOptions({
+    name: 'Radio',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+});
+
+const props = defineProps(radioProps);
+const emit = defineEmits<RadioEmits>();
+
+// 使用组件关系 hooks 获取父组件
+const { parent: radioGroup } = useParent(RADIO_GROUP_KEY);
+const form = inject(formKey, null);
+
+// radio 的数据项标识符
+const radioValue = computed(() => props.name);
+
+// 父组件数据，供子组件使用（兼容没有父组件的场景，各字段回退为 null）
+const parentData = computed(() => {
+    const group = radioGroup.value;
+    return {
+        iconSize: group?.props.iconSize ?? null,
+        labelDisabled: group?.props.labelDisabled ?? null,
+        disabled: group?.props.disabled ?? null,
+        shape: group?.props.shape ?? null,
+        activeColor: group?.props.activeColor ?? null,
+        size: group?.props.size ?? null,
+        width: group?.props.width ?? null,
+        value: group?.props.modelValue ?? null,
+        wrap: group?.props.wrap ?? null
+    };
+});
+
+// 根据 size 定义不同的配置
+const sizeConfig = {
+    small: { size: 28, fontSize: 24, iconSize: 16 },
+    default: { size: 34, fontSize: 28, iconSize: 20 },
+    large: { size: 40, fontSize: 32, iconSize: 24 }
+};
+
+// 获取实际使用的 size 值（优先级：props.size > snake-radio-group.size > snake-form.size）
+const actualSize = computed(() => {
+    if (props.size !== '') return String(props.size);
+    if (radioGroup.value?.props.size) return String(radioGroup.value.props.size);
+    if (form?.size.value) return String(form.size.value);
+    return 'default';
+});
+
+// 判断实际使用的 size 是否在预设配置中
+const isInSizeConfig = computed(() => actualSize.value in sizeConfig);
+
+// 获取预设 size（用于查找 sizeConfig 配置，如图标大小、高度等）
+const presetSize = computed(() => {
+    return (isInSizeConfig.value ? actualSize.value : 'default') as 'small' | 'default' | 'large';
+});
+
+// 获取当前尺寸配置
+const currentSizeConfig = computed(() => sizeConfig[presetSize.value]);
+
+// 是否禁用，如果父组件 snake-radio-group 禁用的话，将会忽略子组件的配置
+const elDisabled = computed(() =>
+    props.disabled !== '' ? props.disabled : parentData.value.disabled !== null ? parentData.value.disabled : false
+);
+
+// 是否禁用 label 点击
+const elLabelDisabled = computed(() =>
+    props.labelDisabled !== ''
+        ? props.labelDisabled
+        : parentData.value.labelDisabled !== null
+          ? parentData.value.labelDisabled
+          : false
+);
+
+// 组件尺寸，对应 size 的值，默认值为 34rpx
+const elSize = computed(() => currentSizeConfig.value.size);
+
+// 组件的勾选图标的尺寸，默认 20
+const elIconSize = computed(() => {
+    if (props.iconSize) return props.iconSize;
+    if (radioGroup.value?.props.iconSize) return radioGroup.value.props.iconSize;
+    if (isInSizeConfig.value) return currentSizeConfig.value.iconSize;
+    return 20;
+});
+
+// label 字体大小，默认 28
+const labelFontSize = computed(() => {
+    if (isInSizeConfig.value) return addUnit(currentSizeConfig.value.fontSize, 'rpx');
+    return props.labelSize ? addUnit(props.labelSize, 'rpx') : '';
+});
+
+// 组件选中激活时的颜色
+const elActiveColor = computed(() =>
+    props.activeColor
+        ? props.activeColor
+        : parentData.value.activeColor
+          ? parentData.value.activeColor
+          : 'var(--snake-color-primary, #06D290)'
+);
+
+// 组件的形状
+const elShape = computed(() =>
+    props.shape ? props.shape : parentData.value.shape ? parentData.value.shape : 'circle'
+);
+
+// 设置 radio 的状态，要求 radio 的 name 等于 parent 的 value 时才为选中状态
+const iconStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (elActiveColor.value && parentData.value.value == radioValue.value && !elDisabled.value) {
+        style.borderColor = elActiveColor.value;
+        style.backgroundColor = elActiveColor.value;
+    }
+    style.width = addUnit(elSize.value, 'rpx');
+    style.height = addUnit(elSize.value, 'rpx');
+    return style;
+});
+
+const iconColor = computed(() => (radioValue.value == parentData.value.value ? '#fff' : 'transparent'));
+
+const iconClass = computed(() => {
+    const classes: string[] = [];
+    classes.push(`snake-radio__icon-wrap--${elShape.value}`);
+    if (radioValue.value == parentData.value.value) classes.push('snake-radio__icon-wrap--checked');
+    if (elDisabled.value) classes.push('snake-radio__icon-wrap--disabled');
+    if (radioValue.value == parentData.value.value && elDisabled.value)
+        classes.push('snake-radio__icon-wrap--disabled--checked');
+    return classes.join(' ');
+});
+
+const radioStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (parentData.value.width) {
+        style.width = addUnit(parentData.value.width, 'rpx');
+        // #ifdef MP
+        // 各家小程序因为它们特殊的编译结构，使用 float 布局
+        style.float = 'left';
+        // #endif
+        // #ifndef MP
+        // H5 和 APP 使用 flex 布局
+        style.flex = `0 0 ${addUnit(parentData.value.width, 'rpx')}`;
+        // #endif
+    }
+    if (parentData.value.wrap) {
+        style.width = '100%';
+        // #ifndef MP
+        // H5 和 APP 使用 flex 布局，将宽度设置 100%，即可自动换行
+        style.flex = '0 0 100%';
+        // #endif
+    }
+    return style;
+});
+
+/**
+ * 点击 label
+ */
+function onClickLabel() {
+    if (!elLabelDisabled.value && !elDisabled.value) {
+        setRadioCheckedStatus();
+    }
+}
+
+/**
+ * 点击 icon
+ */
+function toggle() {
+    if (!elDisabled.value) {
+        setRadioCheckedStatus();
+    }
+}
+
+/**
+ * 发出事件
+ * snake-radio 的 name 不等于父组件的 v-model 的值时(意味着未选中)，才发出事件，避免多次点击触发事件
+ */
+function emitEvent() {
+    if (parentData.value.value != radioValue.value) emit('change', radioValue.value);
+}
+
+/**
+ * 改变组件选中状态
+ * 通过父组件 setValue 更新 v-model，父级变化后所有 radio 由 computed 重新计算选中状态
+ */
+function setRadioCheckedStatus() {
+    emitEvent();
+    radioGroup.value?.setValue(radioValue.value);
+}
+</script>
+<style scoped>
+.snake-radio {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1.8;
+}
+.snake-radio__icon-wrap {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 42rpx;
+    height: 42rpx;
+    color: transparent;
+    text-align: center;
+    transition-property: color, border-color, background-color;
+    font-size: 20px;
+    border: 1px solid var(--snake-color-border, #dcdfe6);
+    transition-duration: 0.2s;
+    /* #ifdef MP-TOUTIAO */
+    /* 头条小程序兼容性问题，需要设置行高为 0，否则图标偏下 */
+    line-height: 0;
+    /* #endif */
+}
+.snake-radio__icon-wrap--circle {
+    border-radius: 100%;
+}
+.snake-radio__icon-wrap--square {
+    border-radius: 3px;
+}
+.snake-radio__icon-wrap--checked {
+    color: #fff;
+    background-color: var(--snake-color-primary, #06d290);
+    border-color: var(--snake-color-primary, #06d290);
+}
+.snake-radio__icon-wrap--disabled {
+    background-color: var(--snake-color-disabled-bg, #f1f1f1);
+    border-color: var(--snake-color-border, #dcdfe6);
+}
+.snake-radio__icon-wrap--disabled--checked {
+    color: var(--snake-color-disabled-bg, #f1f1f1) !important;
+}
+.snake-radio__label {
+    word-wrap: break-word;
+    margin-left: 10rpx;
+    margin-right: 24rpx;
+    color: var(--snake-color-text, #303133);
+    font-size: 30rpx;
+}
+</style>

package/components/snake-radio/types.ts

@@ -0,0 +1,64 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** radioProps 运行时属性及默认值。 */
+export const radioProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 展示标签文本。 */
+    label: { type: String, default: '' },
+    /** 数据项名称或唯一标识。 */
+    name: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 组件形状，square 为方形，circle 为圆形。 */
+    shape: { type: String as PropType<'square' | 'circle'>, default: '' },
+    /** 是否禁用。 */
+    disabled: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 是否禁止点击标签选中。 */
+    labelDisabled: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 选中状态下的颜色，设置后将覆盖父级 activeColor。 */
+    activeColor: { type: String, default: '' },
+    /** 勾选图标的大小，单位 rpx。 */
+    iconSize: { type: [String, Number] as PropType<UnitValue>, default: '' },
+    /** 标签文字大小，单位 rpx。 */
+    labelSize: { type: [String, Number] as PropType<UnitValue>, default: '' },
+    /** 组件整体大小，small/default/large 或自定义数值。 */
+    size: { type: [String, Number] as PropType<string | number>, default: '' }
+} as const;
+
+/** RadioResolved 组件的公开属性。 */
+export type RadioResolvedProps = ExtractPropTypes<typeof radioProps>;
+
+/** Radio 组件的公开属性。 */
+export interface RadioProps {
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 展示标签文本。 */
+    label?: string;
+    /** 数据项名称或唯一标识。 */
+    name?: string | number;
+    /** 组件形状，square 为方形，circle 为圆形。 */
+    shape?: 'square' | 'circle';
+    /** 是否禁用。 */
+    disabled?: string | boolean;
+    /** 是否禁止点击标签选中。 */
+    labelDisabled?: string | boolean;
+    /** 选中状态下的颜色，设置后将覆盖父级 activeColor。 */
+    activeColor?: string;
+    /** 勾选图标的大小，单位 rpx。 */
+    iconSize?: UnitValue;
+    /** 标签文字大小，单位 rpx。 */
+    labelSize?: UnitValue;
+    /** 组件整体大小，small/default/large 或自定义数值。 */
+    size?: string | number;
+}
+
+/** Radio 组件的事件契约。 */
+export type RadioEmits = {
+    /** 未选中变为选中时触发，携带当前 radio 的 name。 */
+    change: [value: string | number];
+};

package/components/snake-radio-group/snake-radio-group.vue

@@ -0,0 +1,98 @@
+<template>
+    <view class="snake-radio-group snake-radio-group--clearfix" :style="customStyle" :class="customClass">
+        <slot />
+    </view>
+</template>
+<script setup lang="ts">
+/**
+ * @component RadioGroup
+ * @description radio 父组件，管理一组 Radio 的互斥值、禁用状态与布局。
+ * @see /components/radio
+ */
+
+import { inject } from 'vue';
+import { useChildren } from '../../libs/hooks';
+import { RADIO_GROUP_KEY } from './types';
+import { formItemKey } from '../snake-form-item/types';
+import type { RadioGroupEmits, RadioGroupProps } from './types';
+
+defineOptions({
+    name: 'RadioGroup',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+});
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+    customStyle: '',
+    customClass: '',
+    disabled: false,
+    modelValue: '',
+    activeColor: 'var(--snake-color-primary, #06D290)',
+    size: '',
+    labelDisabled: false,
+    shape: 'circle',
+    iconSize: '',
+    width: 'auto',
+    wrap: false
+});
+
+const emit = defineEmits<RadioGroupEmits>();
+const formItem = inject(formItemKey, null);
+
+// 收集子 radio 并注册父组件上下文（linkChildren 的调用在 setValue 定义之后）
+const { linkChildren } = useChildren(RADIO_GROUP_KEY);
+
+/**
+ * 父组件数据，供子组件使用
+ */
+function getData() {
+    return {
+        iconSize: props.iconSize,
+        labelDisabled: props.labelDisabled,
+        disabled: props.disabled,
+        shape: props.shape,
+        activeColor: props.activeColor,
+        size: props.size,
+        width: props.width,
+        wrap: props.wrap,
+        value: props.modelValue
+    };
+}
+
+/**
+ * 设置选中值
+ * @param val 选中的 radio 的 name 值
+ */
+function setValue(val: string | number) {
+    // 通过 emit 事件，设置父组件通过 v-model 双向绑定的值
+    emit('update:modelValue', val);
+    emit('change', val);
+    // 通知 snake-form-item 进行校验
+    void formItem?.notify('change');
+}
+
+// 向子 radio 提供上下文：props（含 modelValue）实时联动 + 选中值入口
+linkChildren({ props, setValue });
+
+defineExpose({ props, getData, setValue });
+</script>
+<style scoped>
+.snake-radio-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+}
+/* MP 下子项以 float 布局时，容器需要清除浮动 */
+.snake-radio-group--clearfix::after {
+    content: '';
+    display: block;
+    overflow: hidden;
+    clear: both;
+}
+</style>

package/components/snake-radio-group/types.ts

@@ -0,0 +1,48 @@
+import type { InjectionKey } from 'vue';
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** RadioGroup 组件的公开属性。 */
+export interface RadioGroupProps {
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 是否禁用所有 radio。 */
+    disabled?: boolean;
+    /** 匹配某一个 radio 组件，如果某个 radio 的 name 值等于此值，那么这个 radio 就被会选中。 */
+    modelValue?: string | number;
+    /** 选中状态下的颜色，应用到所有子 radio。 */
+    activeColor?: string;
+    /** 组件整体大小，small/default/large 或自定义数值。 */
+    size?: string | number;
+    /** 是否禁止点击标签选中。 */
+    labelDisabled?: boolean;
+    /** 组件形状，square 为方形，circle 为圆形。 */
+    shape?: 'square' | 'circle';
+    /** 勾选图标的大小，单位 rpx。 */
+    iconSize?: UnitValue;
+    /** 每个 radio 占 snake-radio-group 的宽度，需带单位。 */
+    width?: UnitValue;
+    /** 是否每个 radio 都换行。 */
+    wrap?: boolean;
+}
+
+/** RadioGroup 组件的事件契约。 */
+export type RadioGroupEmits = {
+    /** 更新当前选中值。 */
+    'update:modelValue': [value: string | number];
+    /** 任一个 radio 状态发生变化时触发，携带最新选中值。 */
+    change: [value: string | number];
+};
+
+/** RadioGroup 向子 radio 提供的配对上下文（useChildren / useParent 通道）。 */
+export interface RadioGroupContext {
+    /** 父组件的响应式 props 对象，子项读取 modelValue 派生选中态。 */
+    props: RadioGroupProps;
+    /** 子项点击后由 group 统一更新 v-model 并派发 change。 */
+    setValue(val: string | number): void;
+}
+
+/** RadioGroup ↔ Radio 配对注入键。 */
+export const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext> = Symbol('snake-radio-group');

package/components/snake-read-more/snake-read-more.vue

@@ -0,0 +1,140 @@
+<template>
+    <view>
+        <view
+            class="snake-read-more__content"
+            :class="[elId, customClass]"
+            :style="[
+                {
+                    height: isLongContent && !showMore ? `${showHeight}rpx` : 'auto',
+                    textIndent: textIndent
+                },
+                customStyle
+            ]"
+        >
+            <slot />
+        </view>
+        <view
+            v-if="isLongContent"
+            class="snake-read-more__toggle"
+            :class="{ 'snake-read-more__toggle--open': showMore }"
+            :style="[innerShadowStyle]"
+            @click="toggleReadMore"
+        >
+            <text
+                class="snake-read-more__toggle__btn"
+                :style="{
+                    fontSize: `${fontSize}rpx`,
+                    color: color
+                }"
+            >
+                {{ showMore ? openTextValue : closeTextValue }}
+            </text>
+            <view class="snake-read-more__toggle__btn__icon">
+                <snake-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'" />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component ReadMore
+ * @description 阅读更多，用于内容较长时预先收起一部分、点击展开全部内容的场景，支持自定义提示与阴影。
+ * @see /components/read-more
+ */
+
+import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue';
+import { guid } from '../../libs/function/guid';
+import { getRect } from '../../libs/function/getRect';
+import { useLocale } from '../../libs/hooks/useLocale';
+import { readMoreProps, type ReadMoreEmits, type ReadMoreExpose } from './types';
+
+defineOptions({ name: 'ReadMore', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(readMoreProps);
+const emit = defineEmits<ReadMoreEmits>();
+const { t } = useLocale('readMore');
+
+// 是否需要隐藏一部分内容
+const isLongContent = ref(false);
+// 当前隐藏与显示的状态，true 显示，false 收起
+const showMore = ref(false);
+// 生成唯一 class 用于测量内容高度
+const elId = ref('');
+const instance = getCurrentInstance();
+let measureVersion = 0;
+
+// 展开后无需阴影，收起时才需要阴影样式
+const innerShadowStyle = computed(() => (showMore.value ? {} : props.shadowStyle));
+
+const openTextValue = computed(() => props.openText || t('openText'));
+const closeTextValue = computed(() => props.closeText || t('closeText'));
+
+// 监听 toggle 和 showHeight 变化，重新初始化
+watch(
+    () => `${props.toggle}-${props.showHeight}`,
+    () => {
+        init();
+    }
+);
+
+onMounted(() => {
+    elId.value = guid();
+    void init();
+});
+
+/** 初始化内容高度判断，决定是否显示展开/收起按钮。 */
+async function init() {
+    const version = ++measureVersion;
+    // 先移除折叠高度，避免把已裁切的高度当作完整内容高度。
+    isLongContent.value = false;
+    await nextTick();
+    if (!elId.value) return;
+    const rect = await getRect(`.${elId.value}`, instance);
+    if (version !== measureVersion) return;
+    isLongContent.value = rect.height > uni.upx2px(Number(props.showHeight));
+    if (!isLongContent.value) showMore.value = false;
+}
+
+defineExpose<ReadMoreExpose>({ init });
+
+/** 展开或收起内容，发出 open/close 事件。 */
+function toggleReadMore() {
+    showMore.value = !showMore.value;
+    // toggle 为 false 时，隐藏收起部分的内容
+    if (props.toggle === false) isLongContent.value = false;
+    if (showMore.value) emit('open', props.index);
+    else emit('close', props.index);
+}
+</script>
+
+<style scoped>
+.snake-read-more__content {
+    overflow: hidden;
+    font-size: 30rpx;
+    color: var(--snake-color-text-secondary, #606266);
+    line-height: 1.8;
+    text-align: left;
+}
+.snake-read-more__toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding-bottom: 26rpx;
+}
+.snake-read-more__toggle--open {
+    padding-top: 0;
+    margin-top: 20rpx;
+    background: none;
+}
+.snake-read-more__toggle__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+.snake-read-more__toggle__btn__icon {
+    margin-left: 14rpx;
+}
+</style>

package/components/snake-read-more/types.ts

@@ -0,0 +1,53 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** readMoreProps 运行时属性及默认值。 */
+export const readMoreProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 默认的显示占位高度，数值按 rpx 处理，内容超出才显示展开按钮。 */
+    showHeight: { type: [Number, String] as PropType<number | string>, default: 400 },
+    /** 展开后是否显示收起按钮。 */
+    toggle: { type: Boolean, default: false },
+    /** 收起状态的提示文字。 */
+    closeText: { type: String, default: '' },
+    /** 展开状态的提示文字。 */
+    openText: { type: String, default: '' },
+    /** 提示文字的颜色。 */
+    color: { type: String, default: 'var(--snake-color-primary, #06D290)' },
+    /** 提示文字的大小，数值按 rpx 处理。 */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 28 },
+    /** 收起时覆盖在内容底部的阴影样式，对象形式。 */
+    shadowStyle: {
+        type: [Object, Array] as PropType<StyleValue>,
+        default: () => ({
+            backgroundImage:
+                'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, var(--snake-color-surface, #fff) 80%)',
+            paddingTop: '300rpx',
+            marginTop: '-300rpx'
+        })
+    },
+    /** 段落首行缩进的字符个数。 */
+    textIndent: { type: String, default: '2em' },
+    /** open 和 close 事件回调中返回的标识值。 */
+    index: { type: [Number, String] as PropType<number | string>, default: '' }
+} as const;
+
+/** ReadMore 组件的公开属性。 */
+export type ReadMoreProps = ExtractPropTypes<typeof readMoreProps>;
+
+/** ReadMore 组件的事件契约。 */
+export type ReadMoreEmits = {
+    /** 展开时触发。 */
+    open: [index: string | number];
+    /** 收起时触发。 */
+    close: [index: string | number];
+};
+
+/** ReadMore 组件实例公开的方法。 */
+export interface ReadMoreExpose {
+    /** 重新测量内容高度并刷新展开状态。 */
+    init(): void;
+}