<!DOCTYPE html>
<html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<template id="demo">
<h2>333</h2>
</template>
<div id="app">
<demo ref="mycom" style="width:100px"></demo>
<button @click="getCom">获取组件对象</button>
<button @click="removeClass($event.target,'c-orange')" class="c-orange">删除样式</button>
<button @click="addClass($event.target,'c-orange')" class="">添加样式</button>
</div>
<script type="application/javascript">
//创建Vue对象
new Vue({
el: '#app', methods: {
getCom() {
console.log(this.$refs.mycom.$el);
},
removeClass(el, className) {
// 删除样式
if (!this.hasClass(el, className)) return
let newClassName = el.className.split(' ')
let index = newClassName.findIndex(item => {
return item == className
})
newClassName.splice(index, 1)
el.className = newClassName.join(' ')
},
hasClass(el, className) {
// 判断是否包括样式
let reg = new RegExp('(^|\\s)' + className + '($|\\s)')
console.log('el.className', el.className);
return reg.test(el.className)
},
addClass(el, className) {
// 添加样式
if (this.hasClass(el, className)) return
let newClassName = el.className.split(' ')
newClassName.push(className)
el.className = newClassName.join(' ')
}
},
components: {
'demo': {
template: '#demo'
}
}
});
</script>
</body>
</html>
