vue3如何实现当表单数据为空时，弹出提示

有一个表格，然后里面的数据需要自己添加，然后有个要求，表格中数据为空时，会弹出一个通知，提示需要添加数据，要求的组件来源是iview网址里的内容

如果是原生的表单，就加一个onblur事件就好了，
如果是用了组件库如ElementUI等，找找form表单的validate函数，在其回调里验证。，

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7704175
• 这篇博客你也可以参考下：vue3中怎么注册全局的组件，全局注册组件，只需创建组件不需要引入。不需要每个组件都引入自动引入。全局自定义指令图片懒加载的代码。
• 除此之外, 这篇博客: vue拖拽弹窗中的 最近一直在忙着大屏项目，iview中的弹窗不能满做我拖拽的需求，就自己写了一个。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 小面这张图片是弹窗的样式

  

  
  <template>
   <!--
    * Developer: shiyzhang
    * Date: 2020/08/27
    * email: zsyou0911@163.com
   -->
    <!-- 弹框 -->
    <div id="popupBox1" :style="{'top':top,'left':left,'width':width}" v-if="show" ref="movediv">
      <div class="poput_contant1" >
      <!--   关闭背景图  可替换成自己的背景图  -->
        <span @click="closePopu()" class="pop_close1"></span>
        <h3  class="pop_title1"  @mousedown="move">
          <span class="pop_name1">{{title}}</span>
        </h3>
        <div class="pop_main1 scrollbar_box" :style="{'maxHeight':maxHeight}" id="tableShow">
          <div class="pop_m_box1 scrollbar_box1">
            <!-- 载入动画 -->
            <div class="loadEffect1 scrollbar_box1">
              <slot></slot>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'popubox',
    props: {
      title: {
        type: String,
        default: '明细' // 弹窗标题
      },
      top: { // 弹窗上边边可视窗口距离
        type: String,
        default: '30%' // 220% 50px
      },
      left: { // 弹窗左边可视窗口距离
        type: String,
        default: '30%' // 220% 50px
      },
      width: String, // 弹窗宽度 220% 50px
      maxHeight: { // 弹窗最小高度
        type: String,
        default: '400px' // 220% 50px
      },
      show: Boolean // 弹窗显示隐藏
  
    },
  
    // computed:{
    //   show(){
    //     console.log(this.show,'组件')
    //   }
    // },
    methods: {
      // 关闭弹窗
      closePopu () {
        this.$emit('update:show', false)
        // this.$emit('closePopu')
      },
      // 弹窗拖拽事件
      move (e) {
        let odiv = this.$refs.movediv // 获取当前元素
        // 算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft
        let disY = e.clientY - odiv.offsetTop
        console.log('disX', disX, 'disY', 0 - disY)
        document.onmousemove = (e) => {
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY
          let clH = document.documentElement.clientHeight - odiv.clientHeight 
          let clW = document.documentElement.clientWidth - odiv.clientWidth
          if (left <= 0) left = 0
          if (left >= clW) left = clW
          if (top <= 0) top = 0
          if (top >= clH)top = clH
          // 移动当前元素
          odiv.style.left = left + 'px'
          odiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
  </script>
  
  <style lang='less'  type="text/scss" scoped >
    /* 弹框样式 */
    #popupBox1 {
      position: fixed;
      z-index: 99999;
      border-radius: 4px;
    }
    .poput_contant1 {
      width: 100%;
      height: 100%;
      position: relative;
    }
  
    .poput_contant1 .pop_title1 {
      height: 45px;
      cursor: default;
      line-height: 45px;
      background: linear-gradient(120deg, rgba(34, 84, 127, 1) 0%, rgba(34, 84, 127, 1) 0%, rgba(91, 255, 255, 1) 100%, rgba(91, 255, 255, 1) 100%);
    }
  
    .pop_name1 {
      font-size: 30px;
      font-weight: bold;
      color: #5BFFFF;
      padding-left: 40px;
    }
  
    .pop_close1 {
      display: inline-block;
      float: right;
      height: 45px;
      width: 45px;
      z-index: 1000000;
      background: url(../../images/close_btn.png) no-repeat center;
      background-size: 50% 50%;
      margin-right: 0;
      margin-top: 0;
      cursor: pointer;
    }
  
    .pop_main1 {
      /*height: calc(100% - 45px);*/
      background: linear-gradient(140deg, rgba(34, 84, 127, 1) 0%, rgba(34, 84, 127, 1) 58%, rgba(91, 255, 255, 1) 100%, rgba(91, 255, 255, 1) 100%);
      /*overflow: hidden;*/
      overflow-y: auto;
      box-sizing: border-box;
      padding: 8px;
    }
  
    .pop_m_box1 {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: #f1f1f1;
    }
    /* 滚动条样式 */
    .scrollbar_box1 {
      overflow: hidden;
      overflow-y: auto
    }
  
    .scrollbar_box1::-webkit-scrollbar {
      width: 10px;
      background: #295a86;
      border-radius: 2px;
    }
    .scrollbar_box1::-webkit-scrollbar-thumb {
      width: 4px;
      background: #548bb7;
      border-radius: 10px;
    }
  </style>
  
  

• 您还可以看一下 徐照兴老师的Vue全家桶零基础入门到进阶项目实战第一篇入门准备实操篇课程中的 系列课程介绍小节, 巩固相关知识点