做了一款element-ui在sublime text上的code snippet

2024年4月5日 343次阅读 来源: snowell

原本希望用Emmet，可以自动补全element-ui，但是在MacOS的sublime text上，输入el-input，然后敲tab，并没有自动变成<el-input></el-input>。需要按ctrl+e才可以。因为按ctrl+e比较别扭，用起来麻烦多了。

然后突发奇想，干脆做一套code snippet，然后除了补齐标签，再额外添加一些反正都要用的属性，再绑定一些必须的事件，这样开发起来岂不是很方便？

比如el-button:

elb -> <el-button type="${1:text}" @click="$2"></el-button>

一些带子元素的，补起来就更爽了，比如el-menu:

elmen ->

<el-menu mode="${1:horizontal}" :default-active="$2" @select="$3">
    <el-submenu v-for="(${4:submenus}, ${5:index}) in ${6:menus}" 
        :index="${5:index} + 1" 
        :key="${4:submenus}.${5:key}">
        <template slot="title">${4:submenus}.${6:title}</template>
        <el-menu-item v-for="(${7:item}, ${8:subIndex}) in ${4:submenus}"
            :index="(${5:index} + 1) + '-' + (${8:subIndex} + 1)">
                ${7:item}.${9:title}
        </el-menu-item>
    </el-submenu>
</el-menu>

方便快捷了很多。节省了很多敲繁琐代码的时间。

代码地址：Element-UI-Snippets-ST

已经提交到Package Control了，搜索Element UI Snippet，已经可以搜索到了。

觉得好用的话，可以点个星，万分感谢。

    原文作者：snowell
    原文地址: https://segmentfault.com/a/1190000012578436
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞