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
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
React SPA登录与身份认证
http://blog.csdn.net/awaw00/article/details/54926125
admin-on-rest
https://marmelab.com/admin-on-rest/Authentication.html
https://github.com/marmelab/admin-on-rest