fix: 调整提示框默认样式的最小高度为100px

oh-my-live2d · Mar 12, 2024 · fe2b19b · fe2b19b
1 parent 3850838
commit fe2b19b
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 10 deletions.
diff --git a/packages/oh-my-live2d/src/config/style.ts b/packages/oh-my-live2d/src/config/style.ts
@@ -130,7 +130,7 @@ export const TIPS_DEFAULT_STYLE: CSSProperties = {
   filter: 'drop-shadow(0 0 5px #999)',
   border: '2px solid #fff',
   color: '#fff',
-  padding: '15px 5px',
+  padding: '5px 5px',
   opacity: 0,
   visibility: 'hidden',
   transform: 'translateX(-50%)',
@@ -141,5 +141,8 @@ export const TIPS_DEFAULT_STYLE: CSSProperties = {
   animationIterationCount: '1, infinite',
   width: '60%',
   left: '50%',
-  top: 0
+  top: 0,
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: '100px'
 };
diff --git a/packages/oh-my-live2d/src/modules/tips.ts b/packages/oh-my-live2d/src/modules/tips.ts
@@ -34,6 +34,7 @@ export class Tips {
     // this.setStyle();
 
     this.setContentStyle({
+      wordBreak: 'break-all',
       display: '-webkit-box',
       textOverflow: 'ellipsis',
       WebkitBoxOrient: 'vertical',

diff --git a/packages/oh-my-live2d/src/types/options.ts b/packages/oh-my-live2d/src/types/options.ts
@@ -85,10 +85,10 @@ export interface Options {
   parentElement?: HTMLElement;
 
   /**
-   * 组件是否使用固定定位 <Badge type="danger" text="已弃用将在下个版本移除" />
+   * 组件是否使用固定定位 <Badge type="danger" text="已弃用" />
    *
    * > [!WARNING]
-   * > 注意, 关闭这个属性后舞台的定位属性将从 fixed 改为 relative, 使舞台回到文档流, 另外该属性不影响状态条定位属性, 状态条与舞台之间相互独立,样式互不干扰.
+   * > 该属性将在下个版本移除, 现在您可以通过模型选项的stageStyle属性为舞台元素设置定位属性
    * @valueType boolean
    * @default true
    * @deprecated 已弃用将在下个版本移除

diff --git a/packages/oh-my-live2d/src/types/tips.ts b/packages/oh-my-live2d/src/types/tips.ts
@@ -15,15 +15,15 @@ export interface TipsOptions {
   messageLine?: number;
   /**
    *
-   * 定义提示框样式, 支持传入CSS对象,  提示框的默认情况下, 始终与舞台保持水平居中, 默认宽度为舞台的60%, 高度自动被内容撑开.
+   * 定义提示框样式, 支持传入CSS对象,  提示框的默认情况下, 始终与舞台保持水平居中, 默认宽度为舞台的60%, 最小高度为 100px, 内容默认垂直水平居中.
    *
    * @valueType object
    */
   style?: CommonStyleType;
 
   /**
    *
-   * 移动端时的提示框样式, 支持传入CSS对象,  提示框的默认情况下, 始终与舞台保持水平居中, 默认宽度为舞台的60%, 高度自动被内容撑开.
+   * 移动端时的提示框样式, 支持传入CSS对象,  提示框的默认情况下, 始终与舞台保持水平居中, 默认宽度为舞台的60%, 最小高度为 100px, 内容默认垂直水平居中.
    */
   mobileStyle?: CommonStyleType;
   /**

diff --git a/tests/vite-app/public/index.min.js b/tests/vite-app/public/index.min.js
diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts
@@ -24,6 +24,7 @@ void loadOml2d({
     }
   ],
   tips: {
+    messageLine: 2,
     mobileStyle: {
       padding: '0px 5px'
     },