0.0.17 • Published 2 years ago
vite-plugin-vue-sfcextendtag v0.0.17
vite-plugin-vue-sfcextendtag
说明
vue3 组件现在支持多个根元素了, 但是在某些特殊场景,比如想为页面切换时添加过渡动画:
<tempalte>
// transition 不支持多个元素过渡
<transition>
<router-view></router-view>
</transition>
</tempalte>
但你又不想添加一级嵌套, 你只需在template根标签上添加tag属性, 这样看起来似乎就没有多一级嵌套了(插件会在vue处理之前帮你格式化好)
使用
- 安装
npm i vite-plugin-vue-sfcextendtag
- 配置
// vite.config.ts
...
import sfcExtendTag from "vite-plugin-vue-sfcextendtag"
...
{
...
plugins: [
...
vue(...),
sfcExtendTag(),
...
]
...
}
- 使用
<!-- xxx.vue -->
<script>...</script>
<!-- 不要设置lang属性 -->
<template tag="div" class="root" a="1" @click="handlerClick">
<h1>hello</h1>
<h2>world</h2>
</tempalte>
<style>
.root {
...
}
</style>
<!-- 插件会解析template根标签的属性,并转换成: -->
<script>...</script>
<template>
<div class="root" a="1" @click="handlerClick">
<h1>hello</h1>
<h2>world</h2>
</div>
</tempalte>
<style>
.root {
...
}
</style>
注意
- 不支持 template lang="pug"