An overview of

Hi, I’m Peryl, and today I’m bringing you my personal open source Vue3.0 component library: Plain-UI; Nonsense not to say, directly on the talent;

  • IO/plain-UI-do…
  • Component Overview: plain-pot.gize. IO/plain-uI-do…

features

  • Support invue-cli.viteAnd other projects directly installed to use, support static construction (in a static HTML file to introduce several JS, CSS files can be used) and components on demand;
  • When importing components on demand or building from source code (alias plain-UI is configured to point to node_modules/ plain-UI/SRC /index), ICONS can be loaded on demand.
  • Documents support online debugging, fast open, no need to climb over the wall. What you see is what you get, all examples in the documentation are generated based on the code they debug, and there is no inconsistency between the examples and the debugged source code;
  • All components are usedCompositionApi + Typescript + JSXImplementation, with no implicit any type, if you are interested in using any of these skills in depth using Vue development, thenplain-uiComponents are excellent learning objects;
  • Lightweight, less than 200K after gzip compression, CSS only 50KB after gzip compression;
  • Powerful date component, support year, year, month, day, year, month, day time, week, quarter six kinds of views, and each view supports single selection, range selection and limit the maximum and minimum time, except for the year, month, day and time view, other views support multiple selection.
  • Powerful tree components, support single, multiple, lazy loading, virtual scrolling and drag, and has its own scrollbar style optimization;
  • Form the basis of strong components: supports packet header, fixed head and columns, scope slot custom content, open column, tree form (with all the characteristics of the component tree), line drag, column, drag, merge rows and columns, the virtual rolling, inline editing and form validation, and other functions, and come with the scroll bar style optimization;

Finally, it is the core of the component library: editable table — PlTablePro. PlTablePro is a business table with comprehensive business capability, which aims at daily development and can meet powerful business functions through a small amount of configuration information. The specific features are shown as follows:

  • Edit: add, delete and modify the data of the table, including in-line edit of the table, multi-line edit (batch submission), form edit (automatically generate popbox form), batch modify (select the field to be modified and row batch modify), and batch delete;
  • Filter: search bar, filter form, column search, de-replay filter, advanced filter and custom expression filter;
  • Sort: single-field sort and multi-field combination sort;
  • Personalization: Modify the basic information of the column, such as column name, width, whether to fix the column, whether to hide the column, column order, etc.
  • Configure cache: Cache the current filter parameters and personality Settings to the local, can be switched at will;
  • Data import and export;
  • Rich editable columns, the existing columns include: input box column, linkage of provinces and counties column, check box column, color column, date column, score column, picture column, number column, object selection column, drop-down column, text field column, switch column and so on;
  • Rich shortcut key support;

other

  • Since it’s a personal open source component library, it’s not a big deal, so don’t expect too much from it.
  • The main purpose of developing a component library is continuous learning, and the vast majority of components are original. Original means that the design idea or implementation source code is original, but the API usage of the component will mostly refer to the existing component library, such as some component properties and event referencesElementUI.Ant DesignEtc., mainly to reduce the learning cost of developers;
  • At present, the style of the component library is relatively poor, mainly because there are fewer variables and the style of the component is simple. And so on xiaobian after the apprentice special money to redesign the UI again. – _ -!
  • At present, there is still a lack of multi-language internationalization function, which belongs to physical work, and I will make it up later when I have time.

Finally, the relevant link address is attached:

  • Plain-ui-composition document address;
  • Give defineComponent enchantsExplained:plain-ui-compositionIn thedesignComponentwithdefineComponentThe difference between a gold digging article;
  • Plain-ui component library video explanation;
  • Plain-design-pro: the online address and account password of TablePro shown in the video are admin/888888. This is a semi-finished product, and its core is a self-developed micro-front-end framework and micro-front-end routing.
  • Plain-design-composition document: Use the VueCompositionApi in React;
  • Plain-design document address:plain-uiThe React version has 99% source similarity;