cx-snippets片段

格式： 参考（react-cxr中的文件）

"名称（唯一）": {
  "prefix": ["cxr-component(唯一)"],
  "description": "创建基础的react组件",
  "scope": "typescriptreact",
  "author": "作者",
  "body": [
    "import React, { useState, useEffect } from 'react';"
  ]
},

react-cxr

vue-cxv

通用-cx

| 名称 | 短文 | 应用文件 | 描述 | 作者 | | ---- | ---- | --- | --- | --- | |log剪贴板 | cx-log | javascript,typescript,javascriptreact,typescriptreact | console 剪贴板的内容 | maotong | |log剪贴板+绿色 | cx-log-green | javascript,typescript,javascriptreact,typescriptreact | console 剪贴板的内容 + 绿色 | maotong | |log剪贴板+红色 | cx-log-red | javascript,typescript,javascriptreact,typescriptreact | console 剪贴板的内容 + 红色 | maotong | |log剪贴板+蓝色 | cx-log-blue | javascript,typescript,javascriptreact,typescriptreact | console 剪贴板的内容 + 蓝色 | maotong | |log剪贴板+黄色 | cx-log-yellow | javascript,typescript,javascriptreact,typescriptreact | console 剪贴板的内容 + 黄色 | maotong | |log剪贴板+灰色 | cx-log-grey | javascript,typescript,javascriptreact,typescriptreact | console 剪贴板的内容 + 灰色 | maotong |

cxr-component: React Compnent起步

创建基础的react组件

import React, { useState, useEffect } from 'react';

interface IProps {
	$2
}
export const ${1:Component}: React.FC<IProps> = () => {
	const [first, setfirst] = useState(second)
	useEffect(() => {
		first
		return () => {
			second
		}
	}, [third])
	$0
	return <></>
}

cxr-mobx-component: Component(Mobx)起步

创建基础的react + mobx组件

import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';

interface IProps {
	$2
}
export const ${1:Component}: React.FC<IProps> = observer(() => {
	const [first, setfirst] = useState(second)
	useEffect(() => {
		first
		return () => {
			second
		}
	}, [third])
	$0
	return <></>
})

cxr-mobx: Mobx起步

创建基础的mobx代码

import { makeAutoObservable } from 'mobx';
import _ from 'lodash';

class ${1:Store} {
	/** 属性 */
	${3:props}: ${4:string};
	$0

	constructor() {
		makeAutoObservable(this);
		this.init()
	}

	async updateByObj(payload: Partial<Store>) {
		_.forEach(payload, (val, key) => {
			this[key] = val;
		});
	}

	/** 初始化 */
	init() {
		this.props = ''
	}
}

export const ${2:store} = new ${1:Store}();

cxr-hoc: React Hoc 起步

创建react高阶组件函数(扩展props)

export interface IPropsKey {
	${2:key}: ${3:string}
}

export function ${1:ComponentHoc}<TProps, TInjProps extends IPropsKey>(Component: React.JSXElementConstructor<TProps>, keyMap: TInjProps) {
	const CustomItem: unknown = (props: any) => {
		return <Component
			{...props}
			{...keyProps}
			/>;
	}
	return CustomItem as React.JSXElementConstructor<TInjProps | TProps>;
}

cxr-comp-custom-formitem: Antd自定义FormItem

创建Antd自定义FormItem中的表单组件

import React, { useState, useEffect } from 'react';

interface IProps {
	value: any
	onChange: Function
}
export const ${1:Component}: React.FC<IProps> = ({ value, onChange }) => {
	const [first, setfirst] = useState(second)
	useEffect(() => {
		first
		return () => {
			second
		}
	}, [third])

	$0
	return <div>
	
	</div>
}

cxr-mini-formitem: AntdFormItem片段

创建Antd FormItem 片段

<Form.Item
	label="${1:lable}"
	name="${2:name}"
	rules={[{ required: true, message: '${3:message}' }]}
	$0
</Form.Item>

cxr-mini-column: AntdTableColumn片段

创建Antd Column 片段

{
	title: '${1:title}',
	dataIndex: '${2:dataIndex}',
	key: '${3:key}',
	width: ${4:60},
	ellipsis: ${5:true|false},
	render: v => {
		return v;
	},
},

cxr-page-table: antd表格起步

创建react antd表格起步文件

import React, { useEffect, useState } from 'react';
import { Table } from 'antd'

interface IProps {
	$0
}
export const ${1:Component}: React.FC<IProps> = () => {
	const [pageInfo, setPageInfo] = useState({
		current: 1,
		total: 0,
		pageSize: 20,
		showSizeChanger: false,
	})
	const [isLoading, setIsLoading] = useState(false)
	const [sourceList, setSourceList] = useState([])

	useEffect(() => {
		setSourceList([])
	}, [])

	const columns = [
		{
			title: '',
			dataIndex: '',
			key: '',
			width: 60,
			ellipsis: true,
			render: v => {
				return v;
			},
		}
	]

	function onPageChange(pagination) {
		pageInfo.current = pagination.current
		setPageInfo(Object.assign({}, pageInfo))
	}

	return <div>
		<Table
			rowKey={'id'}
			pagination={pageInfo}
			loading={isLoading}
			scroll={{ x: 'max-content' }}
			columns={columns}
			dataSource={sourceList}
			sticky={true}
			onChange={onPageChange}
			/>
	</div>
}

cxr-page-form: antd表单起步

创建react antd表单起步文件

import React, { useState, useEffect } from 'react';
import { Form, Input } from antd

interface IProps {
	$0
}
interface IFormType {
	$1
}
export const ${1:Component}: React.FC<IProps> = () => {
	const [first, setfirst] = useState(second)
	const form = Form.useForm<IFormType>()
	useEffect(() => {
		first
	}, [third])

	function onValuesChange(values: Partial<IProps>) {
	}

	function onFinish(values: IFormType) {
	}

	function onFinishFailed(errorInfo: any) {
	}

	return <div>
		<Form
			form={form}
			onValuesChange={onValuesChange}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			>
			<Form.Item
				label=""
				name=""
				rules={[{ required: true, message: '请输入' }]}
				>
				<Input />
			</Form.Item>
		</Form>
	</div>
}

cxv-component-scss: Vue Compnent起步

创建基础的vue组件

<template>
	<div class="$TM_FILENAME_BASE">
	
	</div>
</template>

<script>
export default {
	
}

<style lang="scss" scoped>
.$TM_FILENAME_BASE {
	
}
</style>

cx-log: log剪贴板

console 剪贴板的内容

console.log('${1:$CLIPBOARD}', ${2:$CLIPBOARD})

cx-log-green: log剪贴板+绿色

console 剪贴板的内容 + 绿色

console.log(
	'%c ${1:$CLIPBOARD} ',
	'border: 1px solid #b7eb8f; color: #52c41a; background: #f6ffed',
	${2:$CLIPBOARD}
)

cx-log-red: log剪贴板+红色

console 剪贴板的内容 + 红色

console.log(
	'%c ${1:$CLIPBOARD} ',
	'border: 1px solid #ffccc7; color: #ff4d4f; background: #fff2f0',
	${2:$CLIPBOARD}
)

cx-log-blue: log剪贴板+蓝色

console 剪贴板的内容 + 蓝色

console.log(
	'%c ${1:$CLIPBOARD} ',
	'border: 1px solid #91d5ff; color: #1890ff; background: #e6f7ff',
	${2:$CLIPBOARD}
)

cx-log-yellow: log剪贴板+黄色

console 剪贴板的内容 + 黄色

console.log(
	'%c ${1:$CLIPBOARD} ',
	'border: 1px solid #ffe58f; color: #faad14; background: #fffbe6',
	${2:$CLIPBOARD}
)

cx-log-grey: log剪贴板+灰色

console 剪贴板的内容 + 灰色

console.log(
	'%c ${1:$CLIPBOARD} ',
	'border: 1px solid #d9d9d9; color: #000000d9; background: #fafafa',
	${2:$CLIPBOARD}
)