oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-table-col/types.ts

@@ -32,9 +32,9 @@ export const tableColumnProps = {
    */
   label: makeRequiredProp(String),
   /**
-   * 列宽度，单位px
+   * 列宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
-  width: makeNumericProp(100),
+  width: makeNumericProp(200),
   /**
    * 是否开启列排序
    */

package/components/oxy-tabs/index.scss

@@ -30,7 +30,7 @@
 
       @include when(active) {
         color: $-dark-color;
-        border: 1px solid $-tabs-nav-active-color;
+        border: 2rpx solid $-tabs-nav-active-color;
         background-color: $-dark-background;
       }
 
@@ -125,7 +125,7 @@
 
   @include e(line) {
     position: absolute;
-    bottom: 4px;
+    bottom: 8rpx;
     left: 0;
     z-index: 1;
     height: $-tabs-nav-line-height;
@@ -139,6 +139,25 @@
     }
   }
 
+  @include edeep(nav-item-pills){
+    .oxy-tabs__nav-item-text {
+      padding: $-tabs-nav-pills-padding-y $-tabs-nav-pills-padding-x;
+    }
+    .oxy-tabs__nav-item-badge {
+      .oxy-badge__content {
+        margin-top: $-tabs-nav-pills-padding-y;
+        margin-right: $-tabs-nav-pills-padding-x;
+      }
+    }
+    @include when(active) {
+      .oxy-tabs__nav-item-text {
+        background-color: $-tabs-nav-pills-bg-color;
+        border-radius: $-tabs-nav-pills-border-radius;
+        color: $-tabs-nav-pills-color;
+      }
+    }
+  }
+
   @include e(container) {
     overflow: hidden;
   }
@@ -179,8 +198,8 @@
       position: absolute;
       content: '';
       top: 0;
-      left: -24px;
-      width: 24px;
+      left: -48rpx;
+      width: 48rpx;
       height: $-tabs-nav-height - 1;
       background: $-tabs-nav-map-btn-before-bg;
     }
@@ -197,7 +216,7 @@
 
   @include e(map-header) {
     position: relative;
-    padding-left: 17px;
+    padding-left: 34rpx;
     height: $-tabs-nav-height;
     line-height: $-tabs-nav-height;
     font-size: $-tabs-nav-map-fs;
@@ -216,7 +235,7 @@
   @include e(map-body) {
     display: flex;
     flex-wrap: wrap;
-    padding: 20px 15px 10px;
+    padding: 40rpx 30rpx 20rpx;
     background: #fff;
     transition: transform .3s;
     transform: scaleY(0);
@@ -243,12 +262,12 @@
     @include buttonClear;
     @include lineEllipsis;
     display: inline-block;
-    width: 107px;
-    height: 32px;
-    line-height: 32px;
+    width: 214rpx;
+    height: 64rpx;
+    line-height: 64rpx;
     background-color: $-tabs-nav-map-button-back-color;
     border-color: transparent;
-    margin-bottom: 10px;
+    margin-bottom: 20rpx;
     border-radius: $-tabs-nav-map-button-radius;
     color: $-tabs-nav-map-color;
     font-size: $-tabs-nav-map-fs;
@@ -257,7 +276,7 @@
 
     @include when(active) {
       color: $-tabs-nav-active-color;
-      border: 1px solid $-tabs-nav-active-color;
+      border: 2rpx solid $-tabs-nav-active-color;
       background-color: $-tabs-nav-bg
     }
 
@@ -281,19 +300,28 @@
   @include when(slide) {
     .oxy-tabs__nav-item {
       flex: 0 0 auto;
-      padding: 0 17px;
+      padding: 0 34rpx;
     }
   }
 
   @include when(map) {
     .oxy-tabs__nav--wrap {
-      padding-right: 40px;
+      padding-right: 80rpx;
+    }
+  }
+
+  @include when(fullscreen) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .oxy-tabs__container {
+      flex: 1;
     }
   }
 }
 
 @media screen and (max-width: 330px) {
   .oxy-tabs__map-nav-btn {
-    width: 90px;
+    width: 180rpx;
   }
-}
+}

package/components/oxy-tabs/oxy-tabs.vue

@@ -2,7 +2,9 @@
   <template v-if="sticky">
     <oxy-sticky-box>
       <view
-        :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`"
+        :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+          fullscreen ? 'is-fullscreen' : ''
+        }`"
         :style="customStyle"
       >
         <oxy-sticky :offset-top="offsetTop">
@@ -14,17 +16,32 @@
                     @click="handleSelect(index)"
                     v-for="(item, index) in children"
                     :key="index"
-                    :class="`oxy-tabs__nav-item  ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                    :class="`oxy-tabs__nav-item ${props.pills ? 'oxy-tabs__nav-item-pills' : ''} ${state.activeIndex === index ? 'is-active' : ''} ${
+                      item.disabled ? 'is-disabled' : ''
+                    }`"
                     :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
                   >
                     <oxy-badge v-if="item.badgeProps" v-bind="item.badgeProps">
-                      <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                      <text
+                        class="oxy-tabs__nav-item-text"
+                        :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                      >
+                        {{ item.title }}
+                      </text>
                     </oxy-badge>
-                    <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
-
-                    <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                    <text
+                      v-else
+                      class="oxy-tabs__nav-item-text"
+                      :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                    >
+                      {{ item.title }}
+                    </text>
+                    <view
+                      class="oxy-tabs__line oxy-tabs__line--inner"
+                      v-if="!props.pills && state.activeIndex === index && state.useInnerLine"
+                    ></view>
                   </view>
-                  <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+                  <view v-if="!props.pills" class="oxy-tabs__line" :style="state.lineStyle"></view>
                 </view>
               </scroll-view>
             </view>
@@ -75,7 +92,11 @@
   </template>
 
   <template v-else>
-    <view :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`">
+    <view
+      :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+        fullscreen ? 'is-fullscreen' : ''
+      }`"
+    >
       <view class="oxy-tabs__nav">
         <view class="oxy-tabs__nav--wrap">
           <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
@@ -84,16 +105,29 @@
                 v-for="(item, index) in children"
                 @click="handleSelect(index)"
                 :key="index"
-                :class="`oxy-tabs__nav-item ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                :class="`oxy-tabs__nav-item ${props.pills ? 'oxy-tabs__nav-item-pills' : ''} ${state.activeIndex === index ? 'is-active' : ''} ${
+                  item.disabled ? 'is-disabled' : ''
+                }`"
                 :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
               >
                 <oxy-badge custom-class="oxy-tabs__nav-item-badge" v-if="item.badgeProps" v-bind="item.badgeProps">
-                  <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                  <text
+                    class="oxy-tabs__nav-item-text"
+                    :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                  >
+                    {{ item.title }}
+                  </text>
                 </oxy-badge>
-                <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
-                <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                <text
+                  v-else
+                  class="oxy-tabs__nav-item-text"
+                  :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                >
+                  {{ item.title }}
+                </text>
+                <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="!props.pills && state.activeIndex === index && state.useInnerLine"></view>
               </view>
-              <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+              <view v-if="!props.pills" class="oxy-tabs__line" :style="state.lineStyle"></view>
             </view>
           </scroll-view>
         </view>
@@ -145,7 +179,7 @@ import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxySticky from '../oxy-sticky/oxy-sticky.vue'
 import OxyStickyBox from '../oxy-sticky-box/oxy-sticky-box.vue'
 import { computed, getCurrentInstance, onMounted, watch, nextTick, reactive, type CSSProperties, type ComponentInstance } from 'vue'
-import { addUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle } from '../common/util'
+import { withDefaultUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle, unitConvert } from '../common/util'
 import { useTouch } from '../composables/useTouch'
 import { TABS_KEY, tabsProps, type TabsExpose } from './types'
 import { useChildren } from '../composables/useChildren'
@@ -316,23 +350,23 @@ async function updateLineStyle(animation: boolean = true) {
   try {
     const lineStyle: CSSProperties = {}
     if (isDef(lineWidth)) {
-      lineStyle.width = addUnit(lineWidth)
+      lineStyle.width = withDefaultUnit(lineWidth)
     } else {
       if (autoLineWidth) {
         const textRects = await getRect($itemText, true, proxy)
         const textWidth = Number(textRects[state.activeIndex].width)
-        lineStyle.width = addUnit(textWidth)
+        lineStyle.width = unitConvert(textWidth, 0, { output: 'px' })
       }
     }
     if (isDef(lineHeight)) {
-      lineStyle.height = addUnit(lineHeight)
-      lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+      lineStyle.height = withDefaultUnit(lineHeight)
+      lineStyle.borderRadius = `calc(${withDefaultUnit(lineHeight)} / 2)`
     }
     const rects = await getRect($item, true, proxy)
     const rect = rects[state.activeIndex]
     let left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
     if (left) {
-      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+      lineStyle.transform = `translateX(${unitConvert(left, 0, { output: 'px' })}) translateX(-50%)`
       if (animation) {
         lineStyle.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);'
       }

package/components/oxy-tabs/types.ts

@@ -52,11 +52,11 @@ export const tabsProps = {
    */
   autoLineWidth: makeBooleanProp(false),
   /**
-   * 底部条宽度，单位像素
+   * 底部条宽度，支持 `px/rpx`
    */
   lineWidth: numericProp,
   /**
-   * 底部条高度，单位像素
+   * 底部条高度，支持 `px/rpx`
    */
   lineHeight: numericProp,
   /**
@@ -80,7 +80,19 @@ export const tabsProps = {
    * 可选值：'auto' | 'always'
    * @default auto
    */
-  slidable: makeStringProp<TabsSlidable>('auto')
+  slidable: makeStringProp<TabsSlidable>('auto'),
+  /**
+   * 是否开启胶囊模式
+   */
+  pills: makeBooleanProp(false),
+  /**
+   * 胶囊背景颜色
+   */
+  pillsColor: makeStringProp(''),
+  /**
+   * 是否开启全屏模式
+   */
+  fullscreen: makeBooleanProp(false)
 }
 
 export type TabsExpose = {

package/components/oxy-tag/index.scss

@@ -8,23 +8,23 @@
     background: transparent;
     color: $normalColor;
     border: 1px solid $normalColor;
-    padding: 0 4px;
+    padding: 0 8rpx;
   }
   @include when(round) {
     line-height: 1.2;
     font-size: $-tag-fs;
-    padding: 4px 11px;
+    padding: 8rpx 22rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
     border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
     border-radius: $-tag-round-radius;
   }
   @include when(mark) {
-    padding: 1px 6px;
+    padding: 2rpx 12rpx;
     border-radius: $-tag-mark-radius;
 
     @include when(plain) {
-      padding: 0 6px;
+      padding: 0 12rpx;
     }
   }
   @include when(active) {
@@ -36,8 +36,8 @@
   font-size: $-tag-small-fs;
   display: inline-block;
   color: $-tag-color;
-  padding: 0 3px;
-  border-radius: 2px;
+  padding: 0 6rpx;
+  border-radius: 4rpx;
   transition: opacity .3s;
   vertical-align: middle;
   line-height: initial;
@@ -60,11 +60,11 @@
   @include when(icon) {
     font-size: $-tag-fs;
     line-height: 1.2;
-    padding: 2px 5px;
+    padding: 4rpx 10rpx;
   }
   @include when(dynamic) {
     box-sizing: border-box;
-    width: 88px;
+    width: 176rpx;
     transition: .3s;
 
     &:active {
@@ -77,7 +77,7 @@
   }
   @include edeep(icon) {
     display: inline-block;
-    margin-right: 4px;
+    margin-right: 8rpx;
     font-size: $-tag-fs;
     line-height: 1.2;
     vertical-align: baseline;
@@ -87,9 +87,9 @@
     vertical-align: text-top;
   }
   @include e(add-text) {
-    width: 60px;
-    height: 14px;
-    min-height: 14px;
+    width: 120rpx;
+    height: 28rpx;
+    min-height: 28rpx;
     display: inline-block;
     font-size: $-tag-fs;
     vertical-align: middle;
@@ -97,10 +97,10 @@
   }
   @include e(close) {
     display: inline-block;
-    margin-left: 24px;
-    margin-right: -4px;
+    margin-left: 48rpx;
+    margin-right: -8rpx;
     font-size: $-tag-close-size;
-    height: 14px;
+    height: 28rpx;
     line-height: 1.1;
     vertical-align: text-bottom;
     color: $-tag-close-color;

package/components/oxy-text/index.scss

@@ -34,4 +34,8 @@
   @include when(success) {
     color: $-text-success-color;
   }
-}
+
+  @include e(btn) {
+    color: $-text-primary-color;
+  }
+}

package/components/oxy-text/oxy-text.vue

@@ -1,8 +1,16 @@
 <template>
-  <text @click="handleClick" :class="rootClass" :style="rootStyle">
+  <oxy-tooltip v-if="props.tooltip && isTextOverflow" :content="formattedText">
+    <text @click="handleClick" :class="`${rootClass} is-lines-${props.lines}`" :style="rootStyle">
+      <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
+      <text>{{ formattedText }}</text>
+      <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+    </text>
+  </oxy-tooltip>
+  <text v-else :id="textId" @click="handleClick" :class="rootClass" :style="rootStyle">
     <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
-    <text>{{ formattedText }}</text>
+    <text>{{ props.toggleExpand && isTextOverflow && !expanded ? realText : formattedText }}</text>
     <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+    <text v-if="props.toggleExpand && isTextOverflow" class="oxy-text__btn" @click.stop="handleToggle">{{ expanded ? '收起' : '展开' }}</text>
   </text>
 </template>
 
@@ -18,15 +26,24 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { isDef, objToStyle } from '../common/util'
+import { computed, ref, watch, nextTick, getCurrentInstance } from 'vue'
+import { isDef, objToStyle, uuid, getRect } from '../common/util'
 import { textProps } from './types'
 import dayjs from '../../dayjs'
+import OxyTooltip from '../oxy-tooltip/oxy-tooltip.vue'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(textProps)
 const emit = defineEmits(['click'])
 
+const { proxy } = getCurrentInstance() as any
+const textId = ref<string>(`oxy-text${uuid()}`)
+const expanded = ref<boolean>(false)
+const isTextOverflow = ref<boolean>(false)
+const realText = ref<string>('')
+const offset = ref<number>(0)
+const showTooltip = ref<boolean>(false)
+
 // 存储文本类名的响应式变量
 const textClass = ref<string>('')
 
@@ -39,7 +56,9 @@ watch(
     color: props.color,
     bold: props.bold,
     lines: props.lines,
-    format: props.format
+    format: props.format,
+    toggleExpand: props.toggleExpand,
+    tooltip: props.tooltip
   }),
   ({ type }) => {
     // 验证 type 属性
@@ -77,12 +96,12 @@ const rootStyle = computed(() => {
 
 // 计算文本类名的函数
 function computeTextClass() {
-  const { type, color, bold, lines } = props
+  const { type, color, bold, lines, toggleExpand, tooltip } = props
   const textClassList: string[] = []
   if (!color) {
     textClassList.push(`is-${type}`)
   }
-  if (isDef(lines)) {
+  if (isDef(lines) && !toggleExpand && !tooltip) {
     textClassList.push(`is-lines-${lines}`)
   }
   bold && textClassList.push('is-bold')
@@ -128,6 +147,56 @@ const formattedText = computed(() => {
   return formatText(`${text}`, format, mode)
 })
 
+watch(
+  formattedText,
+  (value) => {
+    nextTick(() => {
+      if (props.toggleExpand || props.tooltip) {
+        realText.value = value
+        offset.value = realText.value.length
+        const view = uni.createSelectorQuery().in(proxy).select(`#${textId.value}`)
+        view
+          .fields({ computedStyle: ['fontSize', 'lineHeight'] }, (res: any) => {
+            getRect(`#${textId.value}`, true, proxy)
+              .then((rects: any) => {
+                if (res && Array.isArray(rects) && rects.length && props.lines) {
+                  const lines = rects[0].height / Number.parseFloat(res.lineHeight.replace('px', ''))
+                  isTextOverflow.value = lines > props.lines
+                  if (props.toggleExpand && isTextOverflow.value) {
+                    const size = Math.floor(rects[0].width / Number.parseFloat(res.fontSize.replace('px', '')))
+                    // 中英文字符长度区分
+                    const length = size * props.lines - 4
+                    let realOffset = 0
+                    let realLength = 0
+                    for (let i = 0; i < offset.value; i++) {
+                      if (realText.value.charCodeAt(i) > 127) {
+                        realLength += 1
+                      } else {
+                        realLength += 0.5
+                      }
+                      realOffset++
+                      if (realLength >= length) {
+                        offset.value = realOffset
+                        break
+                      }
+                    }
+                    realText.value = `${value.substring(0, offset.value)}...`
+                  }
+                }
+              })
+              .catch(() => {})
+          })
+          .exec()
+      }
+    })
+  },
+  { deep: true, immediate: true }
+)
+
+function handleToggle() {
+  expanded.value = !expanded.value
+}
+
 // 处理点击事件
 function handleClick(event: Event) {
   emit('click', event)

package/components/oxy-text/types.ts

@@ -79,6 +79,18 @@ export const textProps = {
    * 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
    */
   lines: Number,
+  /**
+   * 文本超出，展开收起显示全部
+   * 类型：boolean
+   * 默认值：false
+   */
+  toggleExpand: makeBooleanProp(false),
+  /**
+   * 文本超出，tooltip显示全部
+   * 类型：boolean
+   * 默认值：false
+   */
+  tooltip: makeBooleanProp(false),
   /**
    * 文本行高
    * 类型：string

package/components/oxy-textarea/index.scss

@@ -144,11 +144,11 @@
     box-sizing: border-box;
 
     @include when(show-limit) {
-      padding-bottom: 36px;
+      padding-bottom: 72rpx;
     }
 
     @include when(suffix) {
-      padding-right: calc($-textarea-icon-size + 8px);
+      padding-right: calc($-textarea-icon-size + 16rpx);
     }
   }
 
@@ -164,7 +164,7 @@
     border: none;
     box-sizing: border-box;
     word-break: break-word;
-    min-height: 24px;
+    min-height: 48rpx;
 
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
@@ -198,12 +198,12 @@
 
   @include e(count) {
     position: absolute;
-    bottom: 8px;
+    bottom: 16rpx;
     right: 0;
     font-size: $-textarea-count-fs;
     color: $-textarea-count-color;
     background: $-textarea-bg;
-    line-height: 20px;
+    line-height: 40rpx;
     display: inline-flex;
   }
 
@@ -258,7 +258,7 @@
 
   @include when(auto-height) {
     &:not(.is-cell) {
-      padding: 5px 0;
+      padding: 10rpx 0;
     }
 
     &::after {

package/components/oxy-toast/oxy-toast.vue

@@ -31,8 +31,10 @@
         :class-prefix="classPrefix"
         :name="iconClass"
       ></oxy-icon>
-      <!--文本-->
-      <view v-if="msg" class="oxy-toast__msg">{{ msg }}</view>
+      <!--文本/插槽内容-->
+      <view v-if="hasContent" class="oxy-toast__msg">
+        <slot>{{ msg }}</slot>
+      </view>
     </view>
   </oxy-transition>
 </template>
@@ -54,13 +56,14 @@ import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 
-import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import { computed, inject, onBeforeMount, ref, useSlots, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
 import { defaultOptions, getToastOptionKey, toastIcon } from '.'
 import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
-import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, isFunction, objToStyle } from '../common/util'
 
 const props = defineProps(toastProps)
+const slots = useSlots()
 const iconName = ref<string>('') // 图标类型
 const msg = ref<string>('') // 消息内容
 const position = ref<string>('middle')
@@ -124,10 +127,19 @@ const transitionStyle = computed(() => {
   return objToStyle(style)
 })
 
+const hasCustomContent = computed(() => {
+  const slotNodes = slots.default?.()
+  return !!slotNodes?.length
+})
+
+const hasContent = computed(() => {
+  return !!msg.value || hasCustomContent.value
+})
+
 const rootClass = computed(() => {
   return `oxy-toast ${props.customClass} oxy-toast--${position.value} ${
-    (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'oxy-toast--with-icon' : ''
-  } ${iconName.value === 'loading' && !msg.value ? 'oxy-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
+    (iconName.value !== 'loading' || hasContent.value) && (iconName.value || iconClass.value) ? 'oxy-toast--with-icon' : ''
+  } ${iconName.value === 'loading' && !hasContent.value ? 'oxy-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
 })
 
 const svgStyle = computed(() => {
@@ -184,8 +196,12 @@ function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
   zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex
   loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
   loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
-  iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
-  loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
+  iconSize.value = isDef(option.iconSize) ? withDefaultUnit(option.iconSize) : isDef(props.iconSize) ? withDefaultUnit(props.iconSize) : undefined
+  loadingSize.value = isDef(option.loadingSize)
+    ? withDefaultUnit(option.loadingSize)
+    : isDef(props.loadingSize)
+    ? withDefaultUnit(props.loadingSize)
+    : undefined
   cover.value = isDef(option.cover!) ? option.cover! : props.cover
   classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix
   direction.value = isDef(option.direction) ? option.direction : props.direction