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