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"
}