yw-snippets

vscode snippets plugin for yw

version: 0.2.14

author: ywkjFE

Offline Install

git clone http://192.168.0.246/front/yw-vscode-snippets && cd yw-vscode-snippets
# build
npm run build
# install
code --install-extension yw-snippets-0.2.14.vsix

自VS Code版本1.47.0+ 开始, 你可以直接拖拽 .vsix 到侧边栏扩展即可安装; see more

Setting

使用前请先在settings.json中配置个人信息

{
  "ywConfig.Author": "User Name",
  "ywConfig.Email": "user-email@ypzdw.com",
}

Snippets

code

Prefix	Description
`elpagination`	el-pagination 模板
`eltable`	el-table 模板
`elform`	el-form 模板
`elbutton`	el-button
`elselect`	el-select
`elradiogroup`	el-radio-group
`elcheckboxgroup`	el-checkbox-group
`elinputnumber`	el-input-number
`log`	控制台输出
`.then`	then
`.thencatch`	then+catch
`.thenfinally`	then+finally
`.thencatchfinally`	then+catch+finally
`.add`	Service--Object
`.add`	Service--String
`ywbutton`	yw-button 模板
`ywbatchupload`	yw-ui 批量上传
`ywareacheckbox`	yw-ui 区域多选组件
`ywdialog`	yw-dialog 弹窗模板
`ywinputnumber`	yw-input-number 组件(建议弃用)
`ywuploadimg`	yw-upload-img 组件
`ywpopconfirm`	yw-pop-confirm 组件
`ywdataempty`	yw-data-empty 组件
`ywalert`	yw-alert 组件
`ywstatuspoint`	yw-status-point 模板
`ywdatatable`	yw-data-table 模板
`ywdatepicker`	yw-date-picker 模板
`ywvideo`	yw-video 模板
`ywdatasearch`	yw-data-search 模板
`ywdataform`	yw-data-form 模板
`ywpagination`	yw-pagination 模板, @DOC:23

Prefix	Description
`mdcomponent`	yw-ui文档初始化模板
`mddatautils`	data-utils 文档初始化模板

page

Prefix	Description
`-react`	生成 RN 初始化模板
`-taro`	生成 taro 初始化模板

Snippet Details

code

elpagination：【el-pagination 模板】

 .clearfix
 	el-pagination.pull-right(
 		background,
 		hide-on-single-page,
 		layout="total, prev, pager, next",
 		:current-page.sync="pagination.currPage",
 		:page-size="pagination.pageSize",
 		:total="pagination.total",
 		@current-change="()=> getList()",
 	)
 //- pagination: { currPage: 1, pageSize: 10, total: 25 }

eltable：【el-table 模板】

 el-table(border, :data="${1:tableLists}")
 	yw-data-empty(type="list", slot="empty")
 	el-table-column(label="${2:字段名称}", prop="${3:id}")
 	el-table-column(label="${2:插槽}")
 		template(slot-scope="{ row }")
 			span ${2:插槽}{{ row.${3:id} }}

elform：【el-form 模板】

 el-form(size="medium")
 	el-form-item(label="字段名称", prop="id")
 	el-form-item(label="自定义校验", prop="id", :rules="{ validator: ${1:customValidator}, trigger: ['blur', 'change'] }")

elbutton：【el-button】

 el-button(type="${1|primary,success,warning,info,danger|}", ${2|plain,round,circle|}, @click="${3}") ${4:按钮}

elselect：【el-select】

 el-select(v-model="${1:selected}")
 	el-option(v-for="item in ${2:selectOption}", :key="item.label", :label="item.label", :value="item.value")
 	${0}//- ${1:selected}: void 0, ${2:selectOption}: [{ label: '全部', value: void 0 }]

elradiogroup：【el-radio-group】

 el-radio-group(v-model="radio")
 	el-radio(v-for="item in ${2:radioOption}", :key="item.label", :label="item.label") {{ item.value }}
 	${0}//- ${1:radio}: 1, ${2:radioOption}: [{ label: '是', value: 1 }, { label: '否', value: 0 }]

elcheckboxgroup：【el-checkbox-group】

 el-checkbox-group(v-model="checkList")
 	el-checkbox(v-for="item in ${2:checkboxOption}", :key="item.label", :label="item.value") {{ item.label }}
 	${0}//- ${1:checkList}: [1], ${2:checkboxOption}: [{ label: '是', value: 1 }, { label: '否', value: 0 }]

elinputnumber：【el-input-number】

 el-input-number(v-model="${1:value}", :controls="${2|false,true|}", :precision="${3:2}")
 	${0}

log：【控制台输出】

 console.log('${1|LOG:,WARN:,ERROR:,INFO:|}', $0)

.then：【then】

 .then(({ code, data, message }) => {
 	if (code === 0) {
 		$0
 	} else {
 		${1|this.$message.error,Toast.showError,this.$toast|}(message || '获取数据失败')
 	}
 })

.thencatch：【then+catch】

 .then(({ code, data, message }) => {
 	if (code === 0) {
 		$0
 	} else {
 		${1|this.$message.error,Toast.showError,this.$toast|}(message || '获取数据失败')
 	}
 })
 	.catch((err) => {
 		console.log("ERROR:", err)
 		${1|this.$message.error,Toast.showError,this.$toast|}('网络波动, 请重试')
 	})

.thenfinally：【then+finally】

 .then(({ code, data, message }) => {
 	if (code === 0) {
 		$0
 	} else {
 		${1|this.$message.error,Toast.showError,this.$toast|}(message || '获取数据失败')
 	}
 })
 	.finally(() => {
 		this.loading = false
 	})

.thencatchfinally：【then+catch+finally】

 .then(({ code, data, message }) => {
 	if (code === 0) {
 		$0
 	} else {
 		${1|this.$message.error,Toast.showError,this.$toast|}(message || '获取数据失败')
 	}
 })
 	.catch((err) => {
 		console.log("ERROR:", err)
 		${1|this.$message.error,Toast.showError,this.$toast|}('网络波动, 请重试')
 	})
 	.finally(() => {
 		this.loading = false
 	})

.add：【Service--Object】

 
// ${5:方法描述信息}
 // @YAPI: ${4:YAPI地址}
 $TM_CURRENT_LINE({
   name: '${3:methodName}',
   methods: '${2|get,post,jsonp,delete,put|}',
   path: '${1:$CLIPBOARD}',
 })

.add：【Service--String】

 
// ${5:方法描述信息}
 // @YAPI: ${4:YAPI地址}
 $TM_CURRENT_LINE('${3:methodName}', '${2|get,post,jsonp,delete,put|}', '${1:$CLIPBOARD}')

ywbutton：【yw-button 模板】

 yw-button(theme="${1|primary,success,warning,danger|}", type="${2|invert,specific,text|}", @click="${3}") ${4:按钮}

ywbatchupload：【yw-ui 批量上传】

 yw-batch-upload-excel-dialog(
 	:visible.sync="${1:visible}",
 	:upload-file-ser="${2:uploadFileSer}",
 	@uploadSuccess="${3:uploadSuccess}",
 )
${0}

ywareacheckbox：【yw-ui 区域多选组件】

 yw-area-checkbox(
 	v-model="${1:selection}",
 	:include="${2:include}",
 	:checkall-keepaline="${3|true,false|}",
 )
${0}

ywdialog：【yw-dialog 弹窗模板】

 yw-dialog(
 	:visible.sync="${1:visible}",
 	type="${2|success,error,confirm|}",
 	:show-close="${3|true,false|}",
 	@close="closeHandler",
 )
 	${0}

ywinputnumber：【yw-input-number 组件(建议弃用)】

 yw-input-number(type="${1|number,price|}", v-model="${3:value}", placeholder="${2:请输入}")
 ${0://-建议使用 el-input-number 代替 yw-input-number! written in 2021.03.24}

ywuploadimg：【yw-upload-img 组件】

 yw-upload-img(
 	:value-img-url="${1:valueImgUrl}",
 	:is-templete="${2|true,false|}",
 	application="${3:isTemplete为 true 时, application 和 ap-page必填, 否则不生效}",
 	ap-page="${3}",
 	@uploadSuccessHandler="uploadSuccessHandler",
 )
${0}

ywpopconfirm：【yw-pop-confirm 组件】

 yw-pop-confirm(slot-scope="{ row, $index }", v-model="row.${1:_del_confirm}", @confirm="confirmHandler($index)")
${0}

ywdataempty：【yw-data-empty 组件】

 yw-data-empty(type="${1|list,images|}", ${2:slot="empty"})

ywalert：【yw-alert 组件】

 yw-alert(type="${1|primary,success,warning,danger|}") ${0:这是一段文字描述}

ywstatuspoint：【yw-status-point 模板】

 yw-status-point(theme="${1|primary,success,warning,danger,invalid|}") ${4:状态}

ywdatatable：【yw-data-table 模板】

 yw-data-table(:columns="${1:columns}", :data="${2:tableData}")
 	//- 操作插槽
 	yw-pop-confirm(slot="_slot_handler",slot-scope="{ row }", v-model="row._")
 	${0}
 	//- columns: [{ label: '姓名', key: 'name' }, { label: '操作', key: '_slot_handler' }],
 	//- tableData: [{ name: '王五', age: 41, status: 1, _: false }]

ywdatepicker：【yw-date-picker 模板】

 yw-date-picker(v-model="${1:dateRange}", type="${2|year,month,date,dates,week,datetime,datetimerange,daterange,monthrange|}")

ywvideo：【yw-video 模板】

 yw-video(:source="${1:source}", :poster="${2:poster}", :contact="${3|false,true|}", title="${4:测试视频标题}")/>
 ${0}
 //- source: ['http://ywapi.ypzdw.info/varietyMarketing/file/download/tuiyaoyun_27d4a060-b5cf-426e-97bd-fdcc98df908e.mp4'],
 //- poster: 'http://ywapi.ypzdw.info/varietyMarketing/file/download/tuiyaoyun_c4c933e8-e96b-4be1-868d-70f0da7386e2.jpg',

ywdatasearch：【yw-data-search 模板】

 yw-data-search(v-model="${1:searchData}", :options="${2:searchOptions}", :searching="${3:loading}", @search="${4:searchHandler}")
 //-${0}
 	searchData: { keywords: '', areaCode: 510000 },
 	searchOptions: [
 		{ prop: 'keywords', componentType: 'el-input', props: { placeholder: '请输入名称' } },
 		{
 			prop: 'areaCode', label: '经营区域', componentType: 'el-select', componentStyle: { width: '125px' },
 			props: { placeholder: '选择经营区域', maxlength: 100, filterable: true, clearable: true },
 			options: [{ label: '四川', value: 510000 }, { label: '重庆', value: 500000 }],
 		},
 	],

ywdataform：【yw-data-form 模板】

 yw-data-form(ref="form", v-model="form", :options="formOptions", label-width="100px", label-suffix="：")
 //- 
   form: {
     val1: ''
   }
   formOptions: [
     {
       label: '标题',
       prop: 'val1',
       componentType: 'el-input',
     },
   ]

ywpagination：【yw-pagination 模板, @DOC:[23](https://www.baidu.com)】

 yw-pagination(
 	:curr-page.sync="pagination.currPage",
 	:page-size.sync="pagination.pageSize",
 	:total="pagination.total",
 	@change="()=> getList()",
 )
 //-${0} pagination: { currPage: 1, pageSize: 10, total: 25 }

md

mdcomponent：【yw-ui文档初始化模板】

 ## ${1:$CLIPBOARD}

 ### 基础用法

 ### Attributes

 | 参数 | 说明 | 类型 | 可选值 | 默认值 | since |
 | ---- | ---- | ---- | ------ | ------ | ----- |
 |      |      |      |        |        |       |

 ### Events

 | 事件名称 | 说明 | 回调参数 | since |
 | -------- | ---- | -------- | ----- |
 |          |      |          |       |

mddatautils：【data-utils 文档初始化模板】

 ## ${1:$CLIPBOARD}<small>(${2:1.0.0}+)</small>
 > $3

 **example:**
	```javascript

 	import { ${1:$CLIPBOARD} } form '@ywkj/data-utils'

 ${1:$CLIPBOARD}$0
	```

page

-react：【生成 RN 初始化模板】

 import React from 'react';
 import { SafeAreaView, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';

 const propTypes = {};
const defaultProps = {};

 /**
* ${3: desc:$TM_FILENAME_BASE }
* @author ${2: yw-snippet }
* @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND
*/

 class ${1:$TM_FILENAME_BASE} extends React.Component {
 	/* ================================== static methods ================================== */
 	$0
 	/* ================================ lifecycle methods ================================= */

 	constructor(props) {
		super(props);
		this.state = {};
	}

 	componentWillMount() {}

 	componentDidMount() {}

 	componentWillReceiveProps(nextProps) {}

 	shouldComponentUpdate(nextProps, nextState) {
		return true;
	}

 	componentWillUpdate() {}

 	componentDidUpdate() {}

 	componentWillUnmount() {}

 	/* ================================== public methods ================================== */

 	/* ========================== clickHandlers & eventHandlers =========================== */

 	/* ================================== getter methods ================================== */

 	/* ============================== network & util methods ============================== */

 	/* ================================== render methods ================================== */

 	render() {
		return <SafeAreaView>{/* ... */}</SafeAreaView>;
	}
 }
 ${1:$TM_FILENAME_BASE}.propTypes = propTypes;
 ${1:$TM_FILENAME_BASE}.defaultProps = defaultProps;

 const styles = StyleSheet.create({});

 export default ${1:$TM_FILENAME_BASE};

-taro：【生成 taro 初始化模板】

 import Taro, { Component } from '@tarojs/taro'
 import { View } from '@tarojs/components'

 /**
* ${3: desc:$TM_FILENAME_BASE }
* @author ${2: yw-snippet }
* @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND
*/

 class ${1: $TM_FILENAME_BASE } extends Component {
 	config = {
		navigationBarTitleText: '${4:首页}'
	};

 	componentDidMount() {}

 	componentDidShow() {}

 	componentDidHide() {}

 	componentDidCatchError() {}

 	render() {
 		return <View className="">$0</View>;
 	}
 }
 export default ${1: $TM_FILENAME_BASE};

参与贡献

阅读 yw-snippets开发和维护指南参与开发

yw-snippets

药王科技FE

yw-snippets

Offline Install

Setting

Snippets

Snippet Details

code

md

page

参与贡献