Vue+Naive模拟框实现Dialog预设，Naive组件弹框组件使用

用VUE+Naive组件实现弹框，Naive组件官网Naive UI

感兴趣的大佬们可以去看看，vue尤雨溪亲推ui组件库naive，很适合Vue3

实现一个简单的弹框功能：

代码片段：

<n-modal style="width:400px" v-model:show="showModal" preset="dialog" title="新建" :on-mask-click="clearclick">

    <n-form ref="formRef" label-width="100" label-placement="left" :model="formData">

      <n-form-item label="名称" path="value">

        <n-select v-model:value="formData.value" label-field="parcelShopCode" value-field="parcelShopCode"  :options="parceloptions" filterable />

      </n-form-item>

    </n-form>

    <template #action>

      <n-button class="M_r_10" @click="clearclick"> {{ $t('transfer.cancel') }} </n-button>

      <n-button type="error" color="" @click="confirm">{{ $t('login.sure') }}</n-button>

    </template>

  </n-modal>

如图所示，标题会有个红色感叹号，并且关闭icon是聚焦状态，只要在n-modal标签加上:show-icon="false"和:auto-focus="false"就如下图所示

另外底部两个按钮我使用组件的插槽，也可以看文档直接使用Props来设置方法哦！