use slots instead of prop

This commit is contained in:
edbrz9 2022-12-29 16:14:02 +01:00
parent 23a666d150
commit 130398bf9c
2 changed files with 31 additions and 3 deletions

View File

@ -1,4 +1,4 @@
Vue.component('Copybox',{ Vue.component('copybox',{
template : ` template : `
<div class="y2t-output"> <div class="y2t-output">
<button v-on:click="copyToClipboard">Copy</button> <button v-on:click="copyToClipboard">Copy</button>
@ -19,6 +19,31 @@ Vue.component('Copybox',{
} }
}) })
Vue.component('copbox',{
template : `
<div class="y2t-output">
<button v-on:click="copyToClipboard">Copy</button>
<div ref="textToCopy">
<slot></slot>
</div>
</div>
`,
methods : {
copyToClipboard() {
const textToCopy = this.$refs.textToCopy;
const range = document.createRange();
range.selectNode(textToCopy);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
},
}
})
let vm = new Vue({ let vm = new Vue({
}).$mount('#root') }).$mount('#root')

View File

@ -27,8 +27,11 @@
//$checkvar = "sldkfj sldkjf lkjsdf lkj sdlfkj lskdjf lkjf lskdjf lkjflkjsd flkj flksjd flksjd flkjf lskdjf lksjdf lkjsdflk sdlfkj lsdkfj lkjsdflkjdf lkjsdfl kfjf"; //$checkvar = "sldkfj sldkjf lkjsdf lkj sdlfkj lskdjf lkjf lskdjf lkjflkjsd flkj flksjd flksjd flkjf lskdjf lksjdf lkjsdflk sdlfkj lsdkfj lkjsdflkjdf lkjsdfl kfjf";
//$text = htmlspecialchars($item, ENT_QUOTES, 'UTF-8'); //$text = htmlspecialchars($item, ENT_QUOTES, 'UTF-8');
//echo $text; //echo $text;
echo "<Copybox v-bind:txt='\"".$item."\"'></Copybox>"; //echo "<copybox v-bind:txt=' \" " . $item . " \" '></copybox>";
//echo '</div>'; //echo '</div>';
echo "<copbox>";
echo $item;
echo "</copbox>";
} }
?> ?>