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

简介: 【Vue & JavaScript & Css】Multiple class name duplication problem(js/jq原生导致多个类名重复问题)

组件 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>

Vue与原生JavaScript之间存在一些差异,虽然在某些情况下仍然可以使用原生JavaScript进行DOM操作,并不是极力不推荐

如果想在 Vue 中实现以上类似的功能,可在 className 中使用 hash code…

相关文章
|
3天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
16 3
|
24天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
24天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
103 1
|
29天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
19天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
3月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
51 0
JS配合CSS3实现动画和拖动小星星小Demo
|
7月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
51 0
JS+CSS3点击粒子烟花动画js特效
|
前端开发 JavaScript
js css 悬浮动画字体
js css 悬浮动画字体
|
Web App开发 前端开发 JavaScript
孤陋寡闻了,才知道已经可以用 JS 来控制 CSS 动画了
最近翻 MDN 突然发现一套叫 Web Animations API 的东东,点进去看才知道,原来是一套控制 css animation 的 API,而且已经有段时间了 🤦‍♂️,而我居然一直不知道。
|
JavaScript 前端开发 索引