https://github.com/xyzdata/git/issues/3
# todo
ant design
https://ant.design/docs/react/introduce-cn
Last active
August 11, 2022 15:01
-
-
Save xyzdata/f2b41a63feb21081e9f51d464d7434d7 to your computer and use it in GitHub Desktop.
Ant-Design
tree
Project Structure
$ tree --help
$ tree
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies
tree command Linux
https://www.cyberciti.biz/faq/linux-show-directory-structure-command-line/
$ sudo apt-get install tree
tree command Windows
https://www.computerhope.com/treehlp.htm
# TREE [Drive:[[Path] [/F] [/A]
Drive:\Path
> Drive and directory containing disk for display of directory structure.
/F
> Displays file names in each directory.
/A
> ext characters used for linking lines, instead of graphic characters.
/a is used with code pages that do not support graphic characters and to send output to printers that do not properly interpret graphic characters.
https://www.computerhope.com/jargon/t/treestru.htm
https://www.computerhope.com/unix/tree.htm
https://www.computerhope.com/dirhlp.htm
$ tree
Input & Row & Col & Cascader & Switch
Search = Input.Search
https://ant.design/components/input-cn/#API
<Cascader options={options} onChange={onChange} />
https://ant.design/components/cascader-cn/#API
<Cascader
size="large"
style={{width: '100%'}}
options={city}
placeholder="Please pick an address"
onChange={handleChange.bind(null, 'address')}
/>https://ant.design/components/grid-cn/#API
<Row gutter={24}>
<Col
{...ColProps}
xl={{span: 4}}
md={{span: 6}}
>
{
getFieldDecorator('name', {initialValue: name})(
<Search
placeholder="Search Name"
size="large"
onSearch={handleSubmit}
/>
)
}
</Col>
</Row>
Select
Option = Select.Option;
https://ant.design/components/select-cn/
https://ant.design/components/input-cn/#API
const selectBefore = (
<Select defaultValue="Http://" style={{ width: 80 }}>
<Option value="Http://">Http://</Option>
<Option value="Https://">Https://</Option>
</Select>
);
const selectAfter = (
<Select defaultValue=".com" style={{ width: 70 }}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
);
<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
Radio
Mock
https://github.com/nuysoft/Mock/wiki/Getting-Started
'roleId|1': [1, 2, 3],
'roleName|1': function() {
return ["管理员", "教师", "学生"][this.roleId - 1]
},
const arr = ["管理员", "教师", "学生"];
arr[0];
arr[1];
arr[2];https://gist.github.com/xgqfrms-GitHub/94607b60e14b998eab87ca8ab86588e4#gistcomment-2141365
fake.js
// 使用 Mock
import Mock from 'mockjs';
let data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'users|1-100': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 101
}]
});
// 输出结果
console.log(
JSON.stringify(data, null, 4)
);
// JSON.stringify(value[, replacer[, space]]);
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
phone & Regex
phone: /^1[34578]\d{9}$/
https://regexper.com/#%2F%5E1%5B34578%5D%5Cd%7B9%7D%24%2Fg
let usersListData = Mock.mock({
'data|80-100': [
{
id: '@id',
name: '@name',
nickName: '@last',
phone: /^1[34578]\d{9}$/,
'age|11-99': 1,
address: '@county(true)',
isMale: '@boolean',
email: '@email',
createTime: '@datetime',
avatar () {
return Mock.Random.image('100x100', Mock.Random.color(), '#ccc', 'png', this.nickName.substr(0, 1));
}
}
]
});
@ 占位符。
https://github.com/nuysoft/Mock/wiki/Syntax-Specification
isMale: '@boolean',
// 'isMale|1': ['Man', 'Woman'],
// shit api
'bm': '@boolean',
'isMale|1': function() {
return ["Man", "Woman"][this.bm + 0]
},
// 连字符转驼峰
String.prototype.hyphenToHump = function() {
return this.replace(/-(\w)/g, function() {
return arguments[1].toUpperCase()
});
};
// 驼峰转连字符
String.prototype.humpToHyphen = function() {
return this.replace(/([A-Z])/g, '-$1').toLowerCase();
};
eslint error
jsx-eslint/eslint-plugin-react#447
// redux constants
export const PAGE_SIZE = 3;
// [eslint] Parsing error: The keyword 'export' is reserved.eslintrc
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"plugins": [
"react"
],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"rules": {
"comma-dangle": 0
},
"settings": {
"react": {
"pragma": "React",
"version": "15.4.2"
}
}
}
form layout
https://ant.design/components/form-cn/#components-form-demo-layout
inline
// Form
mode="inine" ???
in brief
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
PropTypes