HBuilderX新增自定义vue代码块之ulistMedia
HBuilderX有不少vue代码块可直接调用,uListMedia不是内置的,需要新增自定义。
依次打开HBuilderX菜单:工具 -> 代码块设置 -> vue代码块,将如下粘贴在vue.json文件内,保存即可,然后在 .vue 文件中输入uli弹出ulistMedia代码块
"uListMedia": {
"body": [
"<view class=\"uni-list\">",
"\t<view class=\"uni-list-cell\" hover-class=\"uni-list-cell-hover\" v-for=\"(item,index) in list\" :key=\"index\">",
"\t\t<view class=\"uni-media-list\">",
"\t\t\t<image class=\"uni-media-list-logo\" :src=\"item.img\"></image>",
"\t\t\t<view class=\"uni-media-list-body\">",
"\t\t\t\t<view class=\"uni-media-list-text-top\">{{item.title}}</view>",
"\t\t\t\t<view class=\"uni-media-list-text-bottom uni-ellipsis\">{{item.content}}</view>",
"\t\t\t</view>",
"\t\t</view>",
"\t</view>",
"</view>"
],
"prefix": "ulistmedia",
"project": "uni-app",
"scope": "source.vue.html"
}