Code Monkey home page Code Monkey logo

ithome_ironman_2021's Introduction

2021 年度 IT 鐵人賽文章

這裡放置 Tree 在 2021 年度的 IT 鐵人賽文章資料收集 , 主題:Web Component

Idea 收集

  • 介紹 web

目錄 ?

  • 介紹什麼是 Web Component ? (去年寶哥介紹)

可以利用 Web Component 製作某些 Component

  1. Typography - 文字定義
  2. Label
  3. Checkbox
  4. Filter-Select
  5. Multi-Select
  6. Button - ripple / loading-cat
  7. Form - validator & error
  8. Table - fixed / scrollable / expanded ( )
  9. loader - circle / linear ( 等待畫面 )
  10. progress - bar / circle ( 進度條 )
  11. Dialog - 彈跳視窗
  12. breadcrumb - 麵包屑
  13. Pagination - 頁碼 / 每頁 n 筆 / 共 n 頁 / 第一頁 . 最後一頁 / 上一頁 . 下一頁

製作 Web Component 可用的相關套件

vue-custom-element

相關影片

許許多多的 JS

  • UmiJS - Umi 是蚂蚁金服的底层前端框架 for React
  • DVaJs - React 專用的數據處理工具
  • BetterScroll - BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件
  • omi.js

JSONql

-jsonql with GO -APIJSON, 让接口和文档见鬼去吧! -github - APIJSON

寫 Markdown 的工具

在 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

其他

// 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);
  });
}

ithome_ironman_2021's People

Contributors

andrew781026 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.