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