我想用
vue bootstrap
在中为多个目标弹出
vue js 2.x
. 我可以动态更改Target属性,但它始终针对最后一个目标。是否有可能通过Popover控制?示例代码如下:
JSFiddle Sample is here
我的示例代码如下:
new Vue({
el: '#app',
data: {
name: '',
email: '',
popover: {
target: '',
show: false,
message: ''
}
},
methods: {
callPopover() {
setTimeout(() => {
this.setPopover()
}, 3000)
},
setPopover() {
this.popover.target = 'txtName'
this.popover.show = true
if (!this.name) {
this.popover.message = 'please enter your name to register!!'
} else if (this.name === 'John') {
this.popover.message = 'Hey John!!'
} else if (!this.email) {
this.popover.target = 'txtEmail'
this.popover.message = 'email example is xx@yy.com'
} else {
this.popover.target = 'txtEmail'
this.popover.message = 'thanks for entering details!!'
}
},
onClosePopover() {
this.popover.show = false
}
},
mounted() {
this.callPopover()
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-row class="mb-2 mt-4 ml-4">
<b-col cols="6">
<b-form-input id="txtName" v-model="name" type="text" placeholder="Enter your name"></b-form-input>
</b-col>
<b-col cols="6">
</b-col>
</b-row>
<b-row class="mb-2 ml-4">
<b-col cols="6">
<b-form-input id="txtEmail" v-model="email" type="email" placeholder="Enter your email"></b-form-input>
</b-col>
<b-col cols="6">
<b-btn @click="setPopover"> Show popover</b-btn>
</b-col>
</b-row>
<b-popover :target="popover.target" :show.sync="popover.show" triggers="" placement="topright">
<div class="popover-body">
<p>{{popover.message}}</p>
<div class="d-flex justify-content-center">
<b-btn @click="onClosePopover" size="sm"> gotcha!!</b-btn>
</div>
</div>
</b-popover>
</div>
