vue3.0模态框组件应用实例

 
 <NButton class="addBtn" type="primary" @click="switchModel"
        >发布公告</NButton
      >

//  默认模态框状态为false，绑定点击事件，点击后模态框的值为true，即可点击后展示

<NModal
        v-model:show="addBtn"
        preset="dialog"
        title="确认"
        content="你确认?"
        positive-text="确认"
        @positive-click="submitCallback"
        @negative-click="cancelCallback"
        negative-text="算了"
      />

//绑定模态框与点击事件

  const addBtn = ref(false),
      switchModel = () => {
        addBtn.value = !addBtn.value;
      };



  return {
      
      addBtn,
      switchModel,
      }


//模态框点击确定后执行的内容写到了模态框方法里面
 methods: {
   
     cancelCallback() {
        this.message.success("Cancel");
      },
    submitCallback() {
        console.log(this.message);
        this.message.success("Submit");
        this.data.push(this.input);
        addNotice(this.input);
        this.reload();
      },
      }