Vue 页面禁止选择文本：CSS 样式技巧

Vue 页面禁止选中内容：CSS 样式技巧

在 Vue 页面中，有时需要禁止用户选择页面上的文本内容，例如为了防止用户复制敏感信息或者避免页面出现意外的文字选中状态。

使用 CSS 样式禁止选择文本:

* {
  -webkit-user-select: none; /* 禁止选择文本 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

说明:

• 该代码通过设置 user-select 属性为 none 来禁用整个页面的文本选择功能。
• 不同浏览器需要设置不同的前缀属性，如 -webkit-user-select，-moz-user-select 等。

在特定元素中允许选择文本:

如果需要在某些元素中允许选择文本，可以针对这些元素设置 user-select 属性为 auto。

.element {
  -webkit-user-select: auto; /* 允许选择文本 */
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

示例:

假设需要禁止整个页面选择文本，但允许用户选择 .text-area 类别的元素中的文本，可以将以上代码添加到 Vue 组件的 <style> 标签中：

<template>
  <div>
    <div class='text-area'>可以选中的文本</div>
    <p>无法选中的文本</p>
  </div>
</template>

<style>
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.text-area {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
</style>

通过以上设置，用户可以选中 .text-area 类别元素中的文本，但无法选中其他元素的文本。

注意:

• user-select 属性的值还有其他选项，如 text，element 等，可以根据实际需要进行选择。
• 在实际应用中，需要根据具体的需求设置 user-select 属性的值，以达到最佳效果。