中文 | Version Log | Online Use
[TOC]
npm i easy-dom-util
use
import {dom} from 'easy-dom-util';
let el = dom.div; // Returns an element of type Ele, encapsulating the method of dom operation<script src="https://cdn.jsdelivr.net/npm/easy-dom-util"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/easy-dom-util@x.x.x"></script> -->
<script>
var el = EasyDom.dom.div;
</script>easy-dom encapsulates dom elements. Each dom element will be encapsulated into an Ele element.
Most of the methods on the Ele element support chain calls. The following methods are available for the Ele element:
The method list, detailed usage is below:
| Method | Parameters | Return value | Description |
|---|---|---|---|
| dom | -- | HTMLElement | Returns the corresponding native dom element |
| attr | json/name,value/-- | Ele/string/Ele | Set or get element attributes |
| data | json/name/null/--,value/null/-- | any | Temporarily store and operate some data on dom elements |
| hasAttr | string | boolean | Determine whether there is a certain attribute |
| rmAttr | string | Ele/string/Ele | Delete attribute |
| style | json/name,value | Ele/string/Ele | Set or get element style |
| text | [string] | string/Ele | Set or get element innerText |
| value | [string] | string/Ele | Set or get element value |
| html | [string] | string/Ele | Set or get the element innerHTML |
| empty | -- | Ele | Clear element content |
| class | [string] | string/Ele | Set the class for the element or get the class name of the element |
| id | [string] | string/Ele | Set id to element or get element's id |
| click | function | Ele | Set element click event |
| on | json/name,func | Ele | Set the event of the element |
| render | {html,method={},result=null} | Ele | render element |
| addClass | string | Ele | Add class to element |
| rmClass | string | Ele | Remove a class |
| hasClass | string | boolean | Determine whether there is a certain class |
| replaceClass | string,string | Ele | Replace class |
| append | ...Array[dom/Ele] / Array[dom/Ele] | Ele | Insert child nodes into elements |
| insert | index, ...Array[dom/Ele] / Array[dom/Ele] | Ele | Insert child at specified position |
| prepend | ...Array[dom/Ele] / Array[dom/Ele] | Ele | Head-insert child |
| before | ...Array[dom/Ele] / Array[dom/Ele] | Ele | Insert sibling elements before the element |
| after | ...Array[dom/Ele] / Array[dom/Ele] | Ele | Insert sibling elements after the element |
| remove | int/Ele/-- | Ele/-- | Remove child nodes based on position or ele element, or delete itself |
| parent | [index] | Ele/null | Get the parent element or nth-level parent element of the element |
| index | -- | number | Get the position of the element in the parent element |
| children | [index] | Ele/Array[Ele]/null | Get the first or all child elements |
| children | ...Array[dom/Ele] / Array[dom/Ele] | Ele | Insert child nodes into elements |
| next | [index] | Ele/null | Get the previous or nth element of the element |
| prev | [index] | Ele/null | Get the next or nth element after the element |
| exe | function(dom){} | Ele | Execute a method with Ele as this, and the callback parameter is the corresponding dom element |
| src | string | Ele | Set the src attribute of dom |
| query | selector | Array[Ele] | Query all children of an element based on css selector |
Some API usage examples:
Basic usage
let el = dom.div
.class('easy-dom')
.text('easy-dom')
.click(()=>{
alert('click')
})emmet style
let el = dom('div#app.cls1.cls2[attr1=1][attr2]')render method
el.render({
method:{
alert(text){
// this : {el,bindEl,self,method}
console.log(this);
window.alert(text);
}
},
result(el){
console.log(el.div1,el.div2);
},
// Using the es6-string-html plug-in in vscode will make the following html have syntax highlighting
html:/*html*/`
<div @el='div1' @event=alert('test')></div>
<div @el='div2'></div>
`
}).data() Usage
el.data(); // Get data object
el.data(null); // Clear the data object
el.data('name', 'test'); // Set a data
el.data('name'); // Get a data
el.data('name', null); // Remove a data
el.data({ // Batch operation
name: null, // Remove a data
age: 12 //Set a data
});The Ele element has only one attribute, which is .el. Get the corresponding dom element.
api list
| api | parameters | return value | description |
|---|---|---|---|
| create | string | Ele | Generate an Ele element based on tag |
| query | selector[,boolean] | Ele/NodeList/null | Query elements, the following bool parameter indicates whether to query all elements, otherwise only the first one |
| checkDom | string/selector/HTMLElement | HTMLElement/NodeList | Get dom elements |
| classPrefix | string[,function] | -- | Add a default prefix to the class name. If a callback function is used as a parameter, the prefix will be cleared after the callback is completed. Otherwise, please manually call clearClassPrefix to clear |
| clearClassPrefix | -- | -- | Clear class name prefix |
| addCommonStyle | object/name,value | -- | Add css variables and common styles |
| reportStyle | {function, id = 'el-style', usePool = false} | -- | Report css style |
| initStylePool | -- | -- | Initialize style pool |
| registTouchEvent | {el[dom/Ele/selector],touchStart,touchMove,touchEnd} | -- | Mobile touch event encapsulation, compatible with PC |
| windowSize | -- | {width:height} | Get browser size |
| version | properties | -- | easy-dom version information |
Detailed use
import $, {dom} from 'easy-dom-util';
$.classPrefix('el-test-');
dom.div.class('1') // class = el-test-1
$.clearClassPrefix();
// or
$.classPrefix('el-test-',()=>{
dom.div.class('1') // class = el-test-1
});style related
$.addCommonStyle({
fontSize: '12px',
textCenter: 'text-align:center;'
})
$.reportStyle({
func:initStyle,
id: 'MyStyle' // The id of the style tag
}); // Without using the style pool, the style will be added to the head immediately
// or
$.reportStyle({
func:initStyle,
id: 'MyStyle', // id of style tag
usePool: true
}); // Use the style pool. The style will be added to the head after calling initStylePool. When there are many scattered styles, it is recommended to use the style pool.
$.initStylePool();
function initStyle(common){ // common is the public style
// Using the es6-string-css plug-in in vscode will make the following css with syntax highlighting
return /*css*/`
.el-test-1{
color:#f44;
font-size:${common.fontSize};
}
.el-test-text{
${common.textCenter}
color:#222;
}
`
}registerTouchEvent
$.registTouchEvent({
el: 'dom/Ele/selector',
touchStart(touchList){
},
touchMove(touchList){
},
touchEnd(touchList){
},
});[TOC]
npm i tacl-ui
use
import {tool, toast, confirm, alert, loading, drag} from'tacl-ui';
// or
import TaclUI from'tacl-ui';
// TaclUI = {tool, toast, confirm, alert, loading, drag}
// do something ...<script src="https://cdn.jsdelivr.net/npm/tacl-ui"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/tacl-ui@x.x.x"></script> -->
<script>
TaclUI.toast('Hello world!')
</script>Expose the easy-dom tool
Pop up a toast
// simple call
toast(text[, time, position]);
toast('a hint')
// json call
toast({
text:'A prompt',
// Other parameters
})
// new method All components in tacl are an instance by default, you can use the new method to create a new instance
const close = toast.new(...);parameter list
declare interface ToasterOpts {
text?: string;
time?: number;
position?:'top'|'middle'|'bottom';
parent?: DomEle;
onhide?(): void;
onopen?(): void;
contentHtml?: boolean;
showClose?: boolean;
customClass?: string;
button?: {// add a small button
text: string;
onclick(): void;
}
}A confirm confirmation box pops up
// simple call
confirm('Whether to confirm')
confirm('whether to confirm','confirm box')
// json call
confirm({
text:'Are you sure?',
title:'Confirmation box',
confirmText:'confirm',
cancelText:'cancel',
cancelBtn:false, // Do you need a cancel button
theme:'default', //
}).then((result)=>{
if (result) {
} else {
}
})
// new
confirm.new(...).then((result)=>{})parameter list
declare interface ConfirmerOpts {
text?:string;
title?:string;
confirmText?:string;
cancelText?:string;
cancelBtn?:boolean;
closeBtn?:boolean;
parent?: DomEle;
theme?: confirmStyle;
onhide?(): void;
onopen?(): void;
customEl?: DomEle;
customClass?: string;
contentHtml?: boolean; // default false
custom?(box: Ele, $: ToolStatic): void;
type?: confirmType; // default confirmType.confirm
onGetCloseMethod?(fn: void): void; // Get the closed function when user new creates a new pop-up box
clickConfirmClose?: boolean; // default true
clickCancelClose?: boolean; // default true
onconfirm?(): void;
oncancel?(): void;
}enumerate
declare type confirmResultType ='confirm' |'cancel' |'close';
declare type confirmType ='confirm' |'alert' |'pop';
declare type confirmStyle ='yellow2' |'yellow' |'default';Pop up an alert
// simple call
alert('success')
alert('success','success title')
// json call
alert({
text:'Success',
title:'Success Title',
confirmText:'confirm',
theme:'default', //
}).then(()=>{
})
// new
alert.new(...).then((result)=>{})parameter list
Same as confirm
Pop up a pop-up box
// simple call
pop('Are you sure?')
pop('Are you sure?','Confirmation box')
// json call
pop({
text:'Are you sure?',
title:'Confirmation box',
confirmText:'confirm',
cancelText:'cancel',
cancelBtn:false, // Do you need a cancel button
theme:'default', //
}).then((result)=>{
if (result) {
} else {
}
})
// new
pop.new(...).then((result)=>{})parameter list
Same as confirm
Pop up a loading
// simple call
loading(text[,time]);
loading();
loading('Loading...');
loading('Loading...', 1000);
loading.close(); // Manually close
// json call
loading({
text:'Success',
time:1000
})
const close = loading.new(...);parameter list
declare interface LoadingerOpts {
text?:string;
time?:number|null;
parent?: DomEle;
backgroundOpacity?: number;
onopen?(): void;
onhide?(): void;
}Generate a draggable element, compatible with pc and mobile
let el = drag({
el,
parent,
enableDrag = true,
onClick = df,
onSideChange = df,
zIndex = 100,
aside = false,
preventDefault = true,
reinitPosition = false,
margin = 3, // upper right lower left or just pass in a number
})parameter list
| Parameter | Must | Type | Default Value | Description |
|---|---|---|---|---|
| el | Yes | dom/Ele/selector | - | Elements to be dragged |
| parent | No | dom/Ele/selector | - | Specify a parent element, so that the drag can only be carried out in the parent element, and the parent element needs to set the position style |
| enableDrag | No | boolean | true | Whether it can be dragged or not |
| onClick | No | function | function(){} | Click event |
| aside | no | boolean | false | whether to be adsorbed on both sides |
| onSideChange | No | function | function(isLeft){} | Only takes effect when aside=true, and triggers when the suction side changes |
| zIndex | No | number | 100 | z-index of the dragged element |
| preventDefault | No | boolean | true | Whether to prohibit the default event behavior |
| margin | No | number/Array[top,right/bottom/left] | 3 | Top, bottom, left, and right margins |
| reinitPosition | No | boolean | false | Whether to change the position of the drag according to the orientationchange and resize events, it needs to be turned on when the drag is full screen |
declare interface DragParameters {
el: Ele|HTMLElement|string;
parent?: Ele|HTMLElement|string;
onClick?: (event: Event, endX: number, endY: number) => {};
onSideChange?: (isLeft:boolean) => {};
zIndex?: number;
enableDrag?:boolean;
delay?:number;
aside?:boolean;
preventDefault?:boolean;
reinitPosition?:boolean;
margin?:number|Array<number>;
onDragStart?: (event: Event, x: number, y: number) => {};
onDragMove?: (event: Event, x: number, y: number) => {};
onDragEnd?: (event: Event, x: number, y: number) => {};
}
declare class Drag {
constructor(parameters: DragParameters);
setPosition(left: number, top: number): void;
initPosition(): void;
getParentSize(): {width: number, height: number};
aside: boolean;
sideLeft: boolean;
enableDrag: boolean;
preventDefault: boolean;
left: number|string;
top: number|string;
margin: Array<number>;
}Remarks: Regarding preventDefault, preventDefault=true can prohibit the dragging of the browser on the mobile terminal to cause the page to move, and there is a blank at the top But this attribute will also prohibit the click event of the child element, which can be circumvented by the target attribute of the event in the onClick event Both methods have their pros and cons
Attribute list
preventDefault, enableDrag, aside
The use is the same as the parameter list, and the properties can be dynamically modified after generation