我需要在vue-tippy
元素(https://github.com/KABBOUCHI/vue-tippy)中显示带有数据绑定元素的html内容,但它不起作用,
<div id="demo">
<p>{{message}}</p>
<br />
<input v-model="message" title="Input">
<br />
Default example (it works)
<button title="Hi!" v-tippy> My Button! </button>
<br />
Data binding example (it not works)
<button title="{{ message }} " v-tippy> {{ message }} </button>
<br />
Data binding example (it works)
<button :title="message" v-tippy> {{ message }} </button>
<br />
Data binding example html content (it not works)
<button id="button3" v-tippy data-html="#contentpopup"> {{ message }} - html content </button>
<br />
<br />
<div id="contentpopup" style="background:red;">
<div>
{{ message }} - My html content
</div>
</div>
<br />
</div>
JS
var vueTippy = require('vue-tippy')
Vue.use(vueTippy)
var data = {
message: 'Hello Vue.js!'
}
var demo = new Vue({
el: '#demo',
data: data
})
我该如何解决这个问题?
感谢
答案 0 :(得分:0)
我添加了对HTML模板和Vue组件的支持。
将vue-tippy软件包更新到最新版本,您的代码将正常运行。
示例:
new Vue({
el: "#app",
data() {
return {
message: 'Hello Vue.js!'
}
}
})
.btn {
margin: 0;
color: white;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
background: linear-gradient(135deg, #73a5ff, #5477f5);
letter-spacing: 0.5px;
font-family: inherit;
display: inline-block;
font-weight: 400;
line-height: 1.25;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .5rem 1rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<script src="https://kabbouchi.com/vue-tippy/vue-tippy.min.js"></script>
<div id="app">
<button class="btn" v-tippy data-distance="15" data-theme="light" data-animation="scale" data-arrowsize="big" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true" data-html="#contentpopup">
Popover HTML <small class="opacity-low">(click)</small>
</button>
<div id="contentpopup" style="display: none">
<div>
<h3> Header</h3>
<p style="color: black"> {{ message }} - data binding </p>
</div>
</div>
</div>