Vue3 前端实现文章内容违规字检测与弹窗提示

首先，在Vue3组件中，我们可以使用v-model指令绑定输入框的值，然后通过@input事件监听输入框的变化。

<template>
  <div>
    <textarea v-model='content' @input='checkContent'></textarea>
  </div>
</template>

在checkContent方法中，我们可以使用正则表达式匹配违规字，并通过弹窗提示用户。

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    checkContent() {
      const regex = /违规字|敏感词/g
      if (regex.test(this.content)) {
        alert('文章内容包含违规字，请修改后重新提交。')
      }
    }
  }
}
</script>

为了防止用户恶意提交违规文章，我们还可以在提交文章的时候再次进行校验。

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    checkContent() {
      const regex = /违规字|敏感词/g
      if (regex.test(this.content)) {
        alert('文章内容包含违规字，请修改后重新提交。')
      }
    },
    submitArticle() {
      const regex = /违规字|敏感词/g
      if (regex.test(this.content)) {
        alert('文章内容包含违规字，请修改后重新提交。')
        return
      }
      // 提交文章的逻辑
    }
  }
}
</script>