fix: 修复NutUI图标字体样式并添加图片预览关闭事件
为NutUI图标添加正确的字体样式修复,同时在多个页面的图片预览组件中添加关闭事件处理函数,确保预览关闭时状态正确更新。修复Taro样式文件导入路径错误。
Showing
6 changed files
with
30 additions
and
12 deletions
| ... | @@ -3,13 +3,13 @@ | ... | @@ -3,13 +3,13 @@ |
| 3 | @tailwind utilities; | 3 | @tailwind utilities; |
| 4 | 4 | ||
| 5 | /* 修复 NutUI 图标字体样式 */ | 5 | /* 修复 NutUI 图标字体样式 */ |
| 6 | -// .nut-icon { | 6 | +.nut-icon { |
| 7 | -// font-style: normal !important; | 7 | + font-style: normal !important; |
| 8 | -// font-weight: normal !important; | 8 | + font-weight: normal !important; |
| 9 | -// } | 9 | +} |
| 10 | 10 | ||
| 11 | /* 修复所有可能的图标字体 */ | 11 | /* 修复所有可能的图标字体 */ |
| 12 | -// [class*="nut-icon"] { | 12 | +[class*="nut-icon"] { |
| 13 | -// font-style: normal !important; | 13 | + font-style: normal !important; |
| 14 | -// font-weight: normal !important; | 14 | + font-weight: normal !important; |
| 15 | -// } | 15 | +} | ... | ... |
| ... | @@ -155,6 +155,7 @@ | ... | @@ -155,6 +155,7 @@ |
| 155 | <nut-image-preview | 155 | <nut-image-preview |
| 156 | v-model:show="avatarPreviewVisible" | 156 | v-model:show="avatarPreviewVisible" |
| 157 | :images="[formData.avatar || defaultAvatar]" | 157 | :images="[formData.avatar || defaultAvatar]" |
| 158 | + @close="closePreview" | ||
| 158 | /> | 159 | /> |
| 159 | 160 | ||
| 160 | <!-- 成功提示 --> | 161 | <!-- 成功提示 --> |
| ... | @@ -199,6 +200,10 @@ const schoolPickerVisible = ref(false) | ... | @@ -199,6 +200,10 @@ const schoolPickerVisible = ref(false) |
| 199 | const avatarPreviewVisible = ref(false) | 200 | const avatarPreviewVisible = ref(false) |
| 200 | const toastVisible = ref(false) | 201 | const toastVisible = ref(false) |
| 201 | 202 | ||
| 203 | +const closePreview = () => { | ||
| 204 | + avatarPreviewVisible.value = false | ||
| 205 | +} | ||
| 206 | + | ||
| 202 | // 手机号相关 | 207 | // 手机号相关 |
| 203 | const newPhone = ref('') | 208 | const newPhone = ref('') |
| 204 | const verifyCode = ref('') | 209 | const verifyCode = ref('') | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-06-28 10:33:00 | 2 | * @Date: 2025-06-28 10:33:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-02 17:18:10 | 4 | + * @LastEditTime: 2025-07-02 20:49:05 |
| 5 | * @FilePath: /jgdl/src/pages/index/index.vue | 5 | * @FilePath: /jgdl/src/pages/index/index.vue |
| 6 | * @Description: 捡个电驴首页 | 6 | * @Description: 捡个电驴首页 |
| 7 | --> | 7 | --> |
| ... | @@ -159,7 +159,7 @@ | ... | @@ -159,7 +159,7 @@ |
| 159 | 159 | ||
| 160 | <script setup> | 160 | <script setup> |
| 161 | import Taro from '@tarojs/taro' | 161 | import Taro from '@tarojs/taro' |
| 162 | -// import '@tarojs/taro/html.css' 和 nutui组件居然有冲突? | 162 | +import '@tarojs/taro/html5.css' //和 nutui组件居然有冲突? |
| 163 | import { ref, onMounted } from 'vue' | 163 | import { ref, onMounted } from 'vue' |
| 164 | import { useDidShow, useReady } from '@tarojs/taro' | 164 | import { useDidShow, useReady } from '@tarojs/taro' |
| 165 | import { Clock, Star, RectRight, Addfollow, HeartFill, Check, Search2, Shop } from '@nutui/icons-vue-taro' | 165 | import { Clock, Star, RectRight, Addfollow, HeartFill, Check, Search2, Shop } from '@nutui/icons-vue-taro' | ... | ... |
| ... | @@ -127,6 +127,7 @@ | ... | @@ -127,6 +127,7 @@ |
| 127 | <nut-image-preview | 127 | <nut-image-preview |
| 128 | v-model:show="avatarPreviewVisible" | 128 | v-model:show="avatarPreviewVisible" |
| 129 | :images="[formData.avatar || defaultAvatar]" | 129 | :images="[formData.avatar || defaultAvatar]" |
| 130 | + @close="closePreview" | ||
| 130 | /> | 131 | /> |
| 131 | 132 | ||
| 132 | <!-- 成功提示 --> | 133 | <!-- 成功提示 --> |
| ... | @@ -172,6 +173,10 @@ const toastVisible = ref(false) | ... | @@ -172,6 +173,10 @@ const toastVisible = ref(false) |
| 172 | const toastMessage = ref('') | 173 | const toastMessage = ref('') |
| 173 | const toastType = ref('success') | 174 | const toastType = ref('success') |
| 174 | 175 | ||
| 176 | +const closePreview = () => { | ||
| 177 | + avatarPreviewVisible.value = false | ||
| 178 | +} | ||
| 179 | + | ||
| 175 | // 验证码相关 | 180 | // 验证码相关 |
| 176 | const codeCountdown = ref(0) | 181 | const codeCountdown = ref(0) |
| 177 | const isRegistering = ref(false) | 182 | const isRegistering = ref(false) | ... | ... |
| ... | @@ -83,7 +83,7 @@ | ... | @@ -83,7 +83,7 @@ |
| 83 | </view> | 83 | </view> |
| 84 | 84 | ||
| 85 | <!-- 图片预览组件 --> | 85 | <!-- 图片预览组件 --> |
| 86 | - <nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" /> | 86 | + <nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" @close="closePreview" /> |
| 87 | </view> | 87 | </view> |
| 88 | 88 | ||
| 89 | <!-- 所在学校 --> | 89 | <!-- 所在学校 --> |
| ... | @@ -322,6 +322,10 @@ const previewVisible = ref(false) | ... | @@ -322,6 +322,10 @@ const previewVisible = ref(false) |
| 322 | const previewImages = ref([]) | 322 | const previewImages = ref([]) |
| 323 | const previewIndex = ref(0) | 323 | const previewIndex = ref(0) |
| 324 | 324 | ||
| 325 | +const closePreview = () => { | ||
| 326 | + previewVisible.value = false | ||
| 327 | +} | ||
| 328 | + | ||
| 325 | // 表单数据 | 329 | // 表单数据 |
| 326 | const formData = reactive({ | 330 | const formData = reactive({ |
| 327 | school: '', | 331 | school: '', | ... | ... |
| ... | @@ -79,7 +79,7 @@ | ... | @@ -79,7 +79,7 @@ |
| 79 | </view> | 79 | </view> |
| 80 | 80 | ||
| 81 | <!-- 图片预览组件 --> | 81 | <!-- 图片预览组件 --> |
| 82 | - <nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" /> | 82 | + <nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" @close="closePreview" /> |
| 83 | </view> | 83 | </view> |
| 84 | 84 | ||
| 85 | <!-- 车辆详情表单 --> | 85 | <!-- 车辆详情表单 --> |
| ... | @@ -172,6 +172,10 @@ const previewVisible = ref(false) | ... | @@ -172,6 +172,10 @@ const previewVisible = ref(false) |
| 172 | const previewImages = ref([]) | 172 | const previewImages = ref([]) |
| 173 | const previewIndex = ref(0) | 173 | const previewIndex = ref(0) |
| 174 | 174 | ||
| 175 | +const closePreview = () => { | ||
| 176 | + previewVisible.value = false | ||
| 177 | +} | ||
| 178 | + | ||
| 175 | // 表单数据 | 179 | // 表单数据 |
| 176 | const formData = reactive({ | 180 | const formData = reactive({ |
| 177 | brand: '', | 181 | brand: '', | ... | ... |
-
Please register or login to post a comment