This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging
The Dropdown component is a familiar one. When you have a large number of actions, you usually use this component to put together a menu with one click. What are the hurdles you need to overcome to implement the Dropdown component? This article will focus on a few key points.
Component structure selection
Assuming that the outer component of the custom component is BP-Dropdown, there are roughly two structures. One is to encapsulate the menu options into components and nest them in bP-Dropdown, and the general form is as follows:
<bp-dropdown @change="onChange" title="Operation">
<bp-dropdown-option value="add">new</bp-dropdown-option>
<bp-dropdown-option value="edit">The editor</bp-dropdown-option>
</bp-dropdown>
Copy the code
The second option is to put the menu options in the BP-Dropdown property without component wrapping, and render through the component. Example:
<bp-dropdown :options="basicOptions" @change="onChange">operation</bp-dropdown>Const basicOptions = [{label: "add", value: "add"}, {label: "edit", value: "edit"},];Copy the code
triggered
Generally speaking, it is enough to support the click trigger, but in order to experience consideration, and special use scenarios, or need to do the hover. Specific configuration:
const triggerList = ["click"."hover"]; // Triggers are available
props: {
trigger: {
type: String.default: "click".validator: (value) = >triggerList.indexOf(value) ! = = -1,},// Trigger mode
},
Copy the code
Specific trigger implementation
const optionShow = ref(false);
const onClick = () = > {
if (props.trigger === "hover") return;
optionShow.value ? onClose() : onOpen();
};
const onMouseEnter = () = > {
if (props.trigger === "click") return;
onOpen();
};
const onMouseLeave = () = > {
if (props.trigger === "click") return;
onClose();
};
Copy the code
Clicking on an element triggers an event external to the element
The implementation of clicking on the external element trigger usually adopts the form of instruction encapsulation, Vue2 and Vue3 custom instruction implementation is slightly different, here is not a repetition, directly provide the click on the external element trigger instruction code:
export const clickOutside = {
// Initialize the event
beforeMount(el, binding, vnode) {
function handleClick(e) {
// If it is the element itself, return
if (el.contains(e.target) || e.target.className.includes(binding.arg)) {
return false;
}
// If a function is bound, return execution
binding.value(e);
}
el.__vueClickOutside__ = handleClick;
document.addEventListener('click', handleClick);
},
// Disable event listening
unmounted(el, binding) {
document.removeEventListener('click', el.__vueClickOutside__);
deleteel.__vueClickOutside__; }};Copy the code
Example:
import { clickOutside } from ".. /directives.js";
export default {
directives: { clickOutside },
}
Copy the code
Welcome to other articles
- Internationalizing your website with Vite2+Vue3 | More challenges in August
- Actual: Front-end interface request parameter confusion
- Actual: Implement a Message component with Vue3
- Actual: Vue3 to implement the Image component, by the way, support lazy loading
- One Piece, Vue.js 3.0 brings what updates
- This article digests the major new features of ES7, ES8, and ES9
- Technical team’s common problems and solutions
- 10 new features commonly used in ES6
- Vue3’s Script setup grammar sugar is really cool