easyest-dropdown

easyest-dropdown is the most basic drop-down component that can be positioned intelligently. You can use it to implement any component with drop-down functions, such as custom select, date and time selector, multi-level menu, auto-fill input box, right-menu(contextmenu), etc.

The intelligent positioning of easyest-dropdown is reflected in:
1. When the drop-down pop-up window cannot be fully displayed in the browser viewport or the visible area of the scrolling container, it will be automatically adjusted to the best display position.
2. The drop-down pop-up window is preferentially positioned with right and bottom, which can ensure that the width and height of the drop-down pop-up window are dynamically modified after the pop-up window is displayed, and the display position of the drop-down pop-up window is still normal

easyest-dropdown does not have any external dependencies, so you can use it in projects like native JavaScript, vue, react, angular, etc.

Effect：

!easyest-dropdown effect

Install

1. Install using npm
``bash
npm install easyest-dropdown -S
`
Document and demo

中文文档

use

$3

If your project is a traditional project, you need to download the dist/easyest-dropdown.js file and put it in your project, and then import easyest-dropdown.js through the browser

Show custom dropdown

• Html


• Javascript


• Css


• Vue (渐进式JavaScript框架)


• React (构建Web和原生交互界面的库)


• Angular (一个应用设计框架与开发平台)

`

$3

Method 1: Global Registration(main.js)
`js
import { createApp } from 'vue';
import EasyestDropdownTransition from 'easyest-dropdown/vue3/es';
import 'easyest-dropdown/vue3/es/easyest-dropdown.css';


const app = createApp(...);
app.use(EasyestDropdownTransition);
app.mount('#app');
`

Method 2: Partial Registration
`js
import EasyestDropdownTransition from 'easyest-dropdown/vue3/es';
import 'easyest-dropdown/vue3/es/easyest-dropdown.css';

export default defineComponent({
name: 'ATestComponent',
components: {
EasyestDropdownTransition
}
});
`

Usage：
`html



`

3. Modular development

If you use a modular development mode (applicable to vue, react, angular), you need to import easyest-dropdown, and then use it like a traditional mode:

`javascript
import easyDropdown from 'easyest-dropdown';
// If you don't use the css that comes with easyest-dropdown, then you don't need to import it
// import 'easyest-dropdown/dist/easyest-dropdown.css';

var dropdownPosition = easyDropdown.getDropdownDirection(referenceEl, dropdownEl, 'bottom', true);
console.log('dropdownPosition', dropdownPosition);
``