Reproduction Link
localhost
Vant Version
2.13.9
Describe the Bug
"vant": "^2.13.9"
"@vant/auto-import-resolver": "^1.3.0",
vite: 5.4.21
在vue中使用tsx在函数里面使用Toast的时候,并不会自动加载对应样式,导致Toast显示异常
Reproduce Steps
AutoImport({
dirs: ['src/components', 'src/utils', 'src/enum', 'src/locales'],
imports: [
'vue',
{
'vue-i18n-composable': ['useI18n'],
},
],
resolvers: [VantResolver({ importStyle: true })],
dts: './types/auto-imports.d.ts', // 生成类型声明文件
viteOptimizeDeps: true,
include: [/.vue$/, /.vue?vue/, /.ts$/, /.tsx$/, /.js$/, /.jsx$/],
// 在其他导入语句的末尾注入导入语句
injectAtEnd: true,
}),
Components({
// 包含目录
directoryAsNamespace: true,
resolvers: [
VantResolver({ importStyle: true })
],
dts: './types/components.d.ts', // 生成组件类型声明文件
dirs: ['src/components'], // 自动注册自己项目中的组件
extensions: ['vue', 'tsx', 'jsx'],
include: [/.vue$/, /.vue?vue/, /.tsx$/, /.jsx$/],
}),
使用:
import { TransportCategory } from 'ac-logger'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: {
type: String,
default: 'Hello World!',
},
},
setup(props) {
// 使用 Composition API
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
const increment = () => {
count.value++
}
onMounted(() => {
console.log('Component mounted')
})
const send = () => {
try {
Toast({ message: '日志已发送1', duration: 60000 })
} catch (error) {
}
}
// 返回 render 函数,使用 JSX 语法
return () => (
<div class='w-80 border p-4'>
<h1 class='text-xl font-bold text-[red]'>{props.msg}</h1>
<p>Count: {count.value}</p>
<p>Double: {doubleCount.value}</p>
<button onClick={increment}>Increment</button>
<Button
type='info'
loading-text='加载中...'
on-click={() => {
console.log('999 :>> ', 999)
send()
}}
>
发送日志
</Button>
<CellGroup>
<Cell title='单元格' value='内容' />
<Cell title='单元格' value='内容' />
<Cell title='单元格' value='内容' />
</CellGroup>
{/* <van-icon name="chat-o" dot /> */}
</div>
)
},
})
Device / Browser
chromelatest
Reproduction Link
localhost
Vant Version
2.13.9
Describe the Bug
"vant": "^2.13.9"
"@vant/auto-import-resolver": "^1.3.0",
vite: 5.4.21
在vue中使用tsx在函数里面使用Toast的时候,并不会自动加载对应样式,导致Toast显示异常
Reproduce Steps
AutoImport({
dirs: ['src/components', 'src/utils', 'src/enum', 'src/locales'],
imports: [
'vue',
{
'vue-i18n-composable': ['useI18n'],
},
],
resolvers: [VantResolver({ importStyle: true })],
dts: './types/auto-imports.d.ts', // 生成类型声明文件
viteOptimizeDeps: true,
include: [/.vue$/, /.vue?vue/, /.ts$/, /.tsx$/, /.js$/, /.jsx$/],
// 在其他导入语句的末尾注入导入语句
injectAtEnd: true,
}),
Components({
// 包含目录
directoryAsNamespace: true,
resolvers: [
VantResolver({ importStyle: true })
],
dts: './types/components.d.ts', // 生成组件类型声明文件
dirs: ['src/components'], // 自动注册自己项目中的组件
extensions: ['vue', 'tsx', 'jsx'],
include: [/.vue$/, /.vue?vue/, /.tsx$/, /.jsx$/],
}),
使用:
import { TransportCategory } from 'ac-logger'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: {
type: String,
default: 'Hello World!',
},
},
setup(props) {
// 使用 Composition API
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
},
})
Device / Browser
chromelatest