我正在使用v-tooltip。我想向按鈕添加一些工具提示文本并且我想要換行符，但我無法確定是否可以使用此方法進行換行符。我查看了檔案，看不到任何地方都參考了它。
<button v-tooltip="`This is one line \n This is another line`">
工具提示的理想輸出：
This is one line
This is another line
然而，文本出現在一行上。也許使用\n不是方式，還有其他建議嗎？謝謝。
uj5u.com熱心網友回復：
您可以使用一個物件作為具有內容屬性的指令的值，該屬性br在內容中具有標記來換行并html:true作為第二個屬性：
<button v-tooltip="{ content: 'This is one line <br/> This is another line', html: true }">
uj5u.com熱心網友回復：
使用</br>而不是\n.
演示：
Vue.use(VTooltip);
new Vue({
el: '#app',
data: {
showTooltip: false,
message: "クリックでメッセージ"
},
computed: {
messageObj() {
return {
content: this.message,
trigger: 'manual',
show: this.showTooltip
}
}
},
methods: {
setTooltip(visibility) {
this.showTooltip = visibility;
}
}
});.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
.tooltip.popover .popover-inner {
background: #f9f9f9;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.tooltip.popover .popover-arrow {
border-color: #f9f9f9;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/v-tooltip"></script>
<div id="app">
<button v-tooltip="`This is one line </br> This is another line`">Show Tooltip</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/490531.html