这是一个适配 Vue3 Api 的 snippets 插件
setup 快速创建代码块模板
输入 setup 一键创建模板
支持快速 console.log，方便调试
- 输入
clg 一键开起 console，然后直接输入需要打印的变量即可。
注意 :本插件可能不完全适用于 vue2
特性
目前支持的代码片段
模版片段
| 关键词 |
代码片段 |
| setup |
<script setup lang="ts">xxxxxxx<template></template></script><style></style> |
| vinit |
<template></template><script setup lang="ts"></script><style></style> |
| template |
<template><div></div></template> |
| scripte |
<script setup lang="ts"></script> |
| style |
<style lang=""></style> |
| css |
<style scoped></style> |
| scss |
<style lang="scss" scoped></style> |
| Sass |
<style lang="sass" scoped></style> |
| Less |
<style lang="less" scoped></style> |
script&vue 片段
| 关键词 |
代码片段 |
| clg |
console.log('output->${0}',${0:name}) |
| Import |
import {...} from '...' |
| Data |
data(){return {...}} |
| Setup |
setup(){...return{...}} |
| vText |
v-text="..." |
| vHtml |
v-html="..." |
| vShow |
v-show="..." |
| vIf |
v-if="..." |
| velse |
v-else |
| velseif |
v-else-if="..." |
| vFor |
v-for="... in ..." :key="..." |
| vFor(withoutKey) |
v-for="... in ..." |
| vOn |
v-on="..." |
| vBind |
v-bind="..." |
| vModel |
v-model="..." |
| vSlot |
v-slot="..." |
| vOnce |
v-once |
| iscomponent |
<component :is="..."></component> |
| vprops |
const props = defineProps({ foo: String }) |
| vemits |
const emit = defineEmits(['...', '...']) |
vue-router 片段
| 关键词 |
代码片段 |
| beforeeach |
router.beforeEach((to, from, next) =>{...} |
| beforeresolve |
router.beforeResolve((to, from, next) => {...} |
| afterEach |
router.afterEach((to, from) => {...} |
| beforeenter |
beforeEnter(to, from, next) {...} |
| beforeRouteEnter |
beforeRouteEnter(to, from, next) {...} |
| beforeRouteLeave |
beforeRouteLeave(to, from, next) {...} |
| vroute |
{'path':...,name:...,component: () => import('...')} |
| 关键词 |
代码片段 |
| formv2 |
useFormV2 表单组件基础模板 |
sjzy-modal 片段
| 关键词 |
代码片段 |
| modal |
SjzyModal 基础弹窗模板 |
| form-modal |
SjzyFormModal 表单弹窗代码模板 |
| open-modal |
useModal 打开弹窗代码模板 |
| table-modal |
SjzyTableModal 表格弹窗代码模板 |
sjzy-tablev2 片段
| 关键词 |
代码片段 |
| tablev2 |
useTableRender 基础表格模板 |
| http-tablev2 |
useTableRender HTTP请求表格模板 |
| grpc-tablev2 |
useTableRender gRPC请求表格模板 |
| tree-tablev2 |
useTableRender 树形表格模板 |
| drag-col-tablev2 |
useTableRender 列拖拽表格模板 |
| drag-row-tablev2 |
useTableRender 行拖拽表格模板 |
| merge-tablev2 |
useTableRender 合并单元格表格模板 |
| 关键词 |
代码片段 |
| table-formv2 |
useTableFormRender 表格表单组合模板 |
| table-formv2-t-action |
表格操作列插槽模板 |
| table-formv2-t-toolbar_buttons |
表格工具栏按钮插槽模板 |
| table-formv2-t-toolbar_tools-left |
表格工具栏左侧插槽模板 |
| table-formv2-t-toolbar_tools-right |
表格工具栏右侧插槽模板 |
| 关键词 |
代码片段 |
| table-formv2-schema-input |
SjzyInput 输入框表单项 |
| table-formv2-schema-selectv2 |
SjzySelectV2 下拉选择表单项 |
| table-formv2-schema-radio-group |
SjzyRadioGroup 单选框组表单项 |
| table-formv2-schema-custom |
自定义表单项模板 |
Enjoy!
| |
