easyest-dropdown
Advanced tools
Readme
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:
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 normaleasyest-dropdown does not have any external dependencies, so you can use it in projects like native JavaScript, vue, react, angular, etc.
Effect：
npmnpm install easyest-dropdown -S
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 <script> tag.
<head>
<!--If you don't use the css that comes with easyest-dropdown, then you don't need to import it-->
<!--<link rel="stylesheet" href="./easyest-dropdown.css">-->
<script src="./easyest-dropdown.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" id="referenceEl">Show custom dropdown</button>
<ul id="dropdownEl" class="my-custom-dropdown easyest-dropdown-transition">
<li>Html</li>
<li>Javascript</li>
<li>Css</li>
<li>Vue <small>(渐进式JavaScript框架)</small></li>
<li>React <small>(构建Web和原生交互界面的库)</small></li>
<li>Angular <small>(一个应用设计框架与开发平台)</small></li>
</ul>
<script>
var referenceEl = document.getElementById('referenceEl');
var dropdownEl = document.getElementById('dropdownEl');
var isShow = false;
referenceEl.addEventListener('click', function () {
if (isShow) {
dropdownEl.style.display = 'none';
isShow = false;
return;
}
var dropdownPosition = easyestDropdown.getDropdownDirection(referenceEl, dropdownEl, 'bottom', true);
console.log('dropdownPosition', dropdownPosition);
dropdownEl.style.left = dropdownPosition.right == null ? (dropdownPosition.left + 'px') : 'auto';
dropdownEl.style.right = dropdownPosition.right != null ? (dropdownPosition.right + 'px') : '';
dropdownEl.style.top = dropdownPosition.bottom == null ? (dropdownPosition.top + 'px') : 'auto';
dropdownEl.style.bottom = dropdownPosition.bottom != null ? (dropdownPosition.bottom + 'px') : '';
dropdownEl.style.display = 'block';
var classNameArr = dropdownEl.className.split(' ');
var placementClassName = classNameArr.find(function (className) {
return className.startsWith('easyest-placement-');
});
if (placementClassName) {
dropdownEl.classList.remove(placementClassName);
}
dropdownEl.classList.add('easyest-placement-' + easyestDropdown.camelCase2KebabCase(dropdownPosition.direction));
isShow = true;
}, false);
</script>
</body>
Method 1: Global Registration(main.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
import EasyestDropdownTransition from 'easyest-dropdown/vue3/es';
import 'easyest-dropdown/vue3/es/easyest-dropdown.css';
export default defineComponent({
name: 'ATestComponent',
components: {
EasyestDropdownTransition
}
});
Usage：
<template>
<bs-button ref="referenceRef" type="primary" @click="showDropdown">{{ show ? 'Hide' : 'Show' }} custom dropdown</bs-button>
<bs-button type="primary" @click="allowTeleport = true">Teleport to body</bs-button>
<teleport :disabled="!allowTeleport" to="body">
<easyest-dropdown-transition
:will-visible="willVisible"
:reference-ref="referenceRef">
<ul
ref="dropdownRef"
v-show="show"
class="my-custom-dropdown">
<li>Html</li>
<li>Javascript</li>
<li>Css</li>
<li>Vue <small>(渐进式JavaScript框架)</small></li>
<li>React <small>(构建Web和原生交互界面的库)</small></li>
<li>Angular <small>(一个应用设计框架与开发平台)</small></li>
</ul>
</easyest-dropdown-transition>
</teleport>
</template>
<script>
import EasyestDropdownTransition from 'easyest-dropdown/vue3/es';
import 'easyest-dropdown/vue3/es/easyest-dropdown.css';
export default defineComponent({
name: 'ATestComponent',
components: {
EasyestDropdownTransition
},
setup () {
let willVisible = ref(false);
let show = ref(false);
let allowTeleport = ref(false);
let referenceRef = ref();
let dropdownRef = ref();
let showDropdown = function () {
// willVisible must precede show to ensure that the <easyest-dropdown-transition> component correctly calculates the transition animation name
willVisible.value = !willVisible.value;
let timer = setTimeout(function () {
clearTimeout(timer);
show.value = !show.value;
}, 60);
};
// Hide the drop-down menu immediately after the mouse clicks outside the drop-down menu
useClickOutside([referenceRef, dropdownRef], function (isClickOutside) {
if (isClickOutside) {
show.value = false;
willVisible.value = false;
}
});
return {
willVisible,
show,
allowTeleport,
referenceRef,
dropdownRef,
showDropdown
};
}
});
</script>
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:
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);
FAQs
`easyest-dropdown` is the most basic drop-down component for intelligent positioning, you can use it to implement any component with drop-down function, such as custom select, date and time selector, multi-level menu, auto-fill input box, etc.
The npm package easyest-dropdown receives a total of 47 weekly downloads. As such, easyest-dropdown popularity was classified as not popular.
We found that easyest-dropdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.