博主:_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>
Vue与原生JavaScript之间存在一些差异,虽然在某些情况下仍然可以使用原生JavaScript进行DOM操作,并不是极力不推荐
如果想在 Vue 中实现以上类似的功能,可在 className 中使用 hash code…