Vue Disable Text Selection:In Vue, you can disable text selection by applying the “user-select” CSS property to the targeted element with a value of “none”. This CSS property prevents users from selecting text within the element, including highlighting, copying, or dragging text. However, it does not affect other elements on the page, so users can still select text in other areas. This can be useful when you want to prevent users from accidentally copying or pasting content, or when you want to restrict access to certain text on your page.
How can I disable text selection in Vue js?
The code creates a Vue app with a button that toggles text selection on a paragraph element. The allowSelect data property controls whether or not text selection is allowed, and the no-select class applies the user-select: none CSS property to disable text selection. The selectCSS computed property returns auto or none based on the value of allowSelect, and the toggleSelect method toggles the value of allowSelect on button click.
Vue Disable Text Selection using CssExample
<div id="app">
<button @click="toggleSelect">Toggle text selection</button>
<p :class="{ 'no-select': !allowSelect }">
This text {{ allowSelect ? 'can' : 'cannot' }} be selected.
</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
allowSelect: false,
};
},
computed: {
selectCSS() {
return this.allowSelect ? 'auto' : 'none';
},
},
methods: {
toggleSelect() {
this.allowSelect = !this.allowSelect;
},
},
});
app.mount('#app');
</script>
<style scoped>
.no-select {
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
}
</style>
Output of Vue Disable Enable Text Selection
