update

src/components/XNoticeBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {onMounted, ref, watch} from "vue";
 import warn from '../static/icons/warn.png';
 import success from '../static/icons/info.png';
 
@@ -37,6 +37,22 @@ const XNoticeBox = ref();
 const Context = ref();
 const roll = ref(false);
 
+watch(
+    () => text,
+    () => {
+        if (!tile) {
+            if (
+                Context.value.$el.clientWidth
+                >
+                XNoticeBox.value.$el.clientWidth
+            ) {
+                roll.value = true;
+            }
+        }
+    },
+    {deep: true}
+)
+
 onMounted(() => {
     if (!tile) {
         if (
@@ -56,9 +72,9 @@ onMounted(() => {
               :style="{alignItems: tile ? 'start' : 'center'}">
             <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
             <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
-            <text v-if="!tile" class="!whitespace-nowrap flex-shrink-0" :style="{color: textColor}">{{ text }}</text>
-            <text v-else :style="{color: textColor}">
-                {{ text }}
+            <text v-if="!tile" class="!whitespace-nowrap flex-shrink-0" :style="{color: textColor}"
+                  v-html="text"></text>
+            <text v-else :style="{color: textColor}" v-html="text">
             </text>
         </view>
     </view>

src/components/XUpload.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
+import CLOSE_ICON from "../static/icons/close2.png";
 import ADDICON from "../static/icons/add.png";
 import {uploadFile} from "../utils/uils";
 import XImage from "./XImage.vue";
 
-const {size} = defineProps({
+const {size, single, del} = defineProps({
     size: {
         type: String,
         default: "160rpx"
+    },
+    single: {
+        type: Boolean,
+        default: false,
+    },
+    del: {
+        type: Boolean,
+        default: false,
     }
 });
 const emits = defineEmits(['success']);
@@ -15,7 +24,8 @@ const files = defineModel('files');
 const upload = async () => {
     uploadFile({
         count: 1,
-    }).then(({data}) => {
+    }).then(([res]) => {
+        const {data} = res;
         files.value?.push(data);
         emits('success', data);
     })
@@ -24,22 +34,25 @@ const upload = async () => {
 
 <template>
     <view class="!flex gap-[12rpx] flex-wrap">
-        <view class="x-upload" @click="upload">
+        <view class="x-upload" @click="upload" v-if="single && files.length < 1">
             <image class="!size-[28rpx]" :src="ADDICON"></image>
             <view>上传图片</view>
         </view>
 
-        <x-image
-            :style="{
+        <view class="!relative" v-for="(v, index) in files" :key="v">
+            <image v-if="del" @click="files.splice(index, 1)" :src="CLOSE_ICON"
+                   class="!size-[48rpx] !absolute !z-10 !top-0 !right-0"
+                   mode="aspectFill"></image>
+            <x-image
+                :style="{
             width: size,
             height: size,
         }"
-            class="border border-[rgb(229,230,235)]"
-            v-for="v in files"
-            :src="v"
-            :list="[v]"
-            :key="v">
-        </x-image>
+                class="border border-[rgb(229,230,235)]"
+                :src="v"
+                :list="[v]">
+            </x-image>
+        </view>
     </view>
 </template>