這裡放置 Tree 在 2021 年度的 IT 鐵人賽文章資料收集 , 主題:Web Component
- 介紹 web
- 介紹什麼是 Web Component ? (去年寶哥介紹)
可以利用 Web Component 製作某些 Component
- Typography - 文字定義
- Label
- Checkbox
- Filter-Select
- Multi-Select
- Button - ripple / loading-cat
- Form - validator & error
- Table - fixed / scrollable / expanded ( )
- loader - circle / linear ( 等待畫面 )
- progress - bar / circle ( 進度條 )
- Dialog - 彈跳視窗
- breadcrumb - 麵包屑
- Pagination - 頁碼 / 每頁 n 筆 / 共 n 頁 / 第一頁 . 最後一頁 / 上一頁 . 下一頁
- Stencil JS - 專門製作 Web Component 的 JS 工具
- 7 Tools for Building Web Components
- vue-custom-element - 包裝 Vue 元件 , 將其轉換成 custom-element
- css-doodle - 基於 Web Components 技術的元件
- Virtual DOM | 為了瞭解原理,那就來實作一個簡易 Virtual DOM 吧!
- UmiJS - Umi 是蚂蚁金服的底层前端框架 for React
- DVaJs - React 專用的數據處理工具
- BetterScroll - BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件
- omi.js
-jsonql with GO -APIJSON, 让接口和文档见鬼去吧! -github - APIJSON
在 Windows 中你可以執行 tree [<drive>:][<path>] [/f] [/a]
來顯示下述結構
tree-node-cli
├── LICENSE
├── README.md
├── __tests__
│ ├── __fixtures__
│ ├── __snapshots__
│ ├── fixtures
│ └── tree.test.js
├── bin
│ └── tree
├── jest.config.js
├── package.json
├── tree.js
└── yarn.lock
-
OBS - 線上直播工具
-
async-validator - element-UI 使用的驗證 JS
// in element-UI form-item.vue
function validate(trigger, callback = _=>_) {
this.validateDisabled = false;
const rules = this.getFilteredRule(trigger);
if ((!rules || rules.length === 0) && this.required === undefined) {
callback();
return true;
}
this.validateState = 'validating';
const descriptor = {};
if (rules && rules.length > 0) {
rules.forEach(rule => {
delete rule.trigger;
});
}
descriptor[this.prop] = rules;
const validator = new AsyncValidator(descriptor);
const model = {};
model[this.prop] = this.fieldValue;
validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
this.validateState = !errors ? 'success' : 'error';
this.validateMessage = errors ? errors[0].message : '';
callback(this.validateMessage, invalidFields);
this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
});
}