一矩肩、定義一個子組件
<template>
<div class="rules" v-show="showRules">
<div class="rules-container">
<div class="rules-inner">{{ rulesHTML }}</div>
</div>
<div class="rules-close" @click="close"></div>
</div>
</template>
<script>
export default {
name: 'rules',
props: {
rulesHTML: {
type: String,
required: true
},
showRules: {
type: Boolean,
required: true
}
},
methods: {
close() {
this.$emit('update:showRules', false)
}
}
}
</script>
二、父組件中引用
<template>
<div id="app" :style="{overflow: showRules ? 'hidden' : 'auto'}" >
<div class="controls">
<a class="rules" href="javascript: void(0)" @click="showRules = true"></a>
</div>
</div>
</template>
<script>
import rules from '../components/rules'
export default {
name: 'App',
components: {
rules
},
data() {
return {
// 活動規(guī)則
showRules: false,
rulesHTML: ''dasdasd"
}
}
}
</script>
