【Vue & JavaScript & Css】Multiple class name duplication problem（js/jq原生导致多个类名重复问题）

本文链接：https://blog.csdn.net/Dongfang_project/article/details/132148164

在这里插入图片描述

博主：_LJaXi Or 東方幻想郷
专栏： 写代码遇到的文题
开发工具：Vs Code

我竟然在 Vue 里操作原生

组件 s-select

<template>
  <div class="custom-dropdown">
    <button class="dropdown-toggle">选择一个选项 <i class="up-icon"></i></button>
    <ul class="dropdown-menu">
      <li>选项</li>
    </ul>
  </div>
</template>

<script>
import './index.css';
import { showSelectItem } from './dom.js';
export default {
  name: 's-select',
  mounted() {
    showSelectItem();
  },
};
</script>

dom.js

export const showSelectItem = () => {
  let selectState = false;
  $('.dropdown-toggle').on('click', function() {
    $('.dropdown-menu')[0].style.display = selectState ? 'none' : 'block';
    selectState = !selectState;
  });
};

功能是点击button，会下拉出一个 select-item 下拉框，结果运行时，有多个 <s-select></s-select>, 所以就会有很多 className 重复，导致成为一次性组件

进行修改

使用 Vue 事件绑定操作组件的 ref 属性中的 style
使用ref属性可以为DOM元素或组件指定一个唯一的引用标识符

修改后的代码

<template>
  <div class="custom-dropdown">
    <button class="dropdown-toggle" @click="toggleDropdown">
      选择一个选项 <i class="up-icon"></i>
    </button>
    <ul class="dropdown-menu" ref="dropdownMenu">
      <li>选项</li>
    </ul>
  </div>
</template>

<script>
import './index.css';
export default {
  name: 's-select',
  mounted() {
    this.showSelectItem();
  },
  methods: {
    toggleDropdown() {
      this.$refs.dropdownMenu.style.display = this.$refs.dropdownMenu.style.display === 'none' ? 'block' : 'none';
    },
    showSelectItem() {
      this.$refs.dropdownMenu.style.display = 'none';
    }
  }
};
</script>