think-vuele

A framework for integrated secondary development based on Vue and ElementUI frameworks. Provides some controls that elementUI doesn’t have or didn’t have at the time. Optimized or simplified some controls that facilitate 2B software development

demo：vuele.tennetcn.com

Github:github.com/chfree/thin…

The element-UI control library is used in the el+ control name manner. Tennetcn-ui is a control library that starts with tc. If you want to call back el, just change the prefix tc to EL. The extended properties and method callbacks provided by TC do not work.

Try it out and you’ll like it

The installation

npm i tennetcn-ui -S
Copy the code

If tennetcn-UI is installed, it automatically relies on element-UI

reference

You can introduce the entire TennetCN-UI, like element-UI, or just a few components as needed. Let’s start with how to introduce the full TennetCN-UI.

A complete introduction

import Vue from 'vue';
import TennetcnUI from 'tennetcn-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(TennetcnUI);

new Vue({
  el: '#app'.render: h= > h(App)
});
Copy the code

Newly provided controls

Compared with the element- UI control, some are not completely handwritten, most are from Github, unified encapsulation calls, interaction and fusion with the Element – UI control, and style as much as possible to keep consistent with element- UI.

Block

A container block control that groups functional areas of a page. Provides basic features for maximizing, minimizing, and full-screen display

More

Collapsible containers, which you can use for more information in your project. The essence is a simple rework of El-Collapse.

Icon

Elementui already provides an icon component, which is used solely for reference by other font icon libraries such as Font-awesome and Remixicon.

InputMoney

The source code is from github,kevinongko/vue-numeric would like to thank the god kevinongko.

The author of this control uses the standard input, SO I changed it to TC-INPUT, which is supported by TC and EL. InputMoney supports both. For example, when a typical TC-form is disabled, all controls in the form are disabled

The function of this control is that the input amount is scientific count amount, can take amount symbol, can define a few delimiters, but the value of the V-model, is the ordinary number. Of course kevinongko offers a lot of control features on its own, even more so when combined with elementui.

InputPhone

Mobile phone number rule verification, the basis of the regular loose verification of China’s mobile phone number, but also one is to provide global verification. Source is also a lot of open source validation library catamphetamine/libphonenumber – js. Here is a cool example of demoLouisMazel/vue-phone-number-input based on this open source validation library: demoLouisMazel/vue-phone-number-input

The specific rules for using this control are described in the sample documentation

InputTag

The control element- UI has not provided a good official control, after searching Github to find a more suitable one, the initial idea was to directly rely on, then label packaging, later encountered various bugs can not be solved, simply pull down the source code, modify their own, and integrate with element- UI. Trust me, you’ll be happy with it.

This control is thanks to JohMun for the JohMun/ VUe-tag-input open source contribution.

AceEditor

An online code editor function, support language is quite a lot, for vUE version of the web has a lot of packaging support. This is its own, provides some ease of use, and is integrated with Element’s form. No forced dependencies, dev import.

CodeDisplay

AceEditor for HTML, CSS, JS if not real-time display results, it is not fun, so we made a real-time display of the code function. Thanks to the iview author for the code contribution in the nuggets booklet.

Loading

I saw a loading effect of pure CSS3 on the Internet, so I couldn’t let it go. I directly changed it to vue tag and provided relevant parameters.

LetterAvatar

Avatar is provided in a version of EL, and this control is also referenced to github source eliep/ VUe-Avatar

Clamp

Text truncation, when a text control displays too much content is not very friendly, the current style can be controlled, display as… And so on. But always have a little pursuit, make the user experience better.

This control references Justineo/ VUe-Clamp’s code base on Github

With EL tip tip fusion, extended tip tip; Improved the function of folding and expanding. Try it out. I’m sure you’ll like it.

Skeleton

Skeleton screen is generally used more in mobile terminals, and many skeleton screen articles are intelligent skeleton screen, which automatically calculates the loading area according to the content area. So, this is an easy one, and it comes from Michalsnik/Vietnam-Content-Placeholder on Github

It is repackaged to provide field area encapsulation unique to 2B software. And integrate with dialog.

Optimized related controls

Element – the UI has been doing very well, provides a very convenient properties and events, but for 2 b software, assigned to a control to repeat the same value, when the leader suddenly say to unified change, not good, so this element optimization is not do well – the UI, but targeted optimization, facilitate unified invocation.

Button

There’s really nothing to optimize about this component. But I’ve only done a little bit of this, but it’s important, especially when testing e2E; For example, when we used Cypress for e2E testing, there were a bunch of buttons on the interface. When we were developing, we rarely gave the buttons a name or AN ID. In this case, you couldn’t tell what the buttons were called

<tc-button @click="add" />/ / HTML<button vevent="bound_add" . />
Copy the code

Concrete implementation can look at the source code of vevent-mixin.js implementation

Select

Every time I use it, I feel very cumbersome, so I have to carry out the OPTION loop of V-for every time. I added a provider property to select. Just define the standard data source format and bind it to the SELECT tag. As for selection judgment, that’s the business of V-Model bidirectional binding.

[{"id":""."text":""."value":""}]
Copy the code

RadioGroup

As with SELECT, it’s too cumbersome to loop the data source yourself; you just need to define a data source attribute. The data source format is the same as select.

CheckboxGroup

With the radioGroup

Input

Very common, as with Button, in e2E testing, we rarely name controls, but mostly give v-Model attributes

<tc-input v-model="user.name" />/ / HTML<input vname="user_name" . />
Copy the code

For specific implementation, see source code vname-mixin.js mixed

The input control also extends support for regex. Js already supports regex, but we need to write a lot of checkouts. This control simplifies this uniformly and provides common regular expression type inputs, such as positive integers, natural numbers, and so on. You only need to pass in the supported re type or re, which will automatically filter out illegal input. For details, go to sample documentation.

InputNumber

The number input box provides the +- operator, support more vname-mixin mixed, support input re and re type parameters

Form

There is nothing to optimize about this control, it is just a boring work of imagination, I do not know whether there is a real business scenario.

When designing forms, we will put new, edit, view on a page, use parameters to control read-only, and save the bottom one and close the other. When viewing forms, we can set the disabled to true, but the close button should not be disabled, right? This is done by adding a forceEnabled attribute to the corresponding button.

DatePicker

Date controls, which control the date range, such as the start time cannot be greater than the end time, the official selection mode is not likely to provide this idea. Unfortunately, such a simple usage, encountered some data refresh problems, not yet resolved.

<tc-form>
  <tc-form-item label="Start time">
    <tc-date-picker v-model="date1" less-than="date2" />
  </tc-form-item>
  <tc-form-item label="End time">
    <tc-date-picker v-model="date2" greater-than="date1" />
  </tc-form-item>
</tc-form>
Copy the code

Table

The usage frequency is very high. Online comments say el is not ideal for loading large amount of data. This is also based on EL, and my optimization point is not the optimization of large amount of data. There are mainly the following points

  • jsonDefine the columns
  • The first column ordinal is parameterized
  • checkboxParameter control
  • Single and multiple parameter control
  • Select and select synchronization control
  • Provides method exposure to get the selected value

TreeTable

Originally elementUI didn’t have a table tree, but my implementation was a different idea, and when it was provided by later VERSIONS of EL, the name was redefined. But the extension points of Table above are supported.

EditTable

Extended from Table to provide the ability to edit data directly in the Table. Online can edit the form, there are two modes, one is to click the line, then edit the line. One is direct full table editable. My implementation of two modes can be parametric controlled.

Table edit types support input\select\date

EditTreeTable

Editable table tree control, TreeTable and EditTable combined.

Pager

The name is too long to remember, so I’ll simplify it. And optimized for incoming parameters, requiring only a pager object.

In addition, the callback function was modified to include a pager-change, which is triggered when pageIndex and pageSize change. Otherwise, the code would have a page component listening twice, because most of the time we are listening directly to the backend method. We don’t care if it’s index or size.

{
  "pageIndex": 1."pageSize": 20."totalCount": 100
}
Copy the code

MessageBox

El official make a popover prompt, passed too many parameters, simplified

Dialog

2B software with popover should be a lot of it, of course, some approach is to open TAB page. Once, a colleague said that TAB page practice is disrespectful to user experience, a system, if you want to view the data in the Atab page, to the Btab page for subsequent operations, is that the user experience is not well designed? Of course, this is up to the software decision makers.

Optimizations for dialog are as follows:

  • To optimize thetitle“Looks more like a window
  • providesopentoopenedtheloadingsupport
  • providesopentoopenedtheskeletonSkeleton screen support
  • Width and height percentage support
  • dialogBottom fixed strip support
  • More hook functions are provided for exampleopen,opened,close,closed,beforeCloseEtc.

Tool components

Common tool kit

Very basic toolkit, currently you can also choose from other optimized open source tools component package, which is only built-in common.

import { xxx } from 'tennetcn-ui/lib/utils'
Copy the code

The random number

import { random } from 'tennetcn-ui/lib/utils'
Copy the code

Provide a variety of styles of random numbers, range, size, floating point, etc., there is always to meet your random needs.

regular

Common re is provided, as well as a simple way to call.