jayden-ui

Appearance

On this page

Modal 模态框 ​

基础演示 ‘点击蒙层关闭’ ​

Open Modal
html
<j-button @click="modalShow = true" type="primary">Open Modal </j-button>

<j-modal
  :clkOutSideClose="true"
  position="top"
  title="Modal"
  v-model:visable="modalShow"
>
  content...
</j-modal>

自定义标题 ​

Open
html
<j-button @click="modalShow2 = true" type="primary">Open </j-button>
<j-modal
  :clkOutSideClose="true"
  position="top"
  title="Modal"
  v-model:visable="modalShow2"
>
  <template #title>
    <div>我是标题</div>
  </template>
  content...
</j-modal>

自定义页脚 ‘点击蒙层不关闭’ ​

Open
html
<j-button @click="modalShow3 = true" type="primary">Open</j-button>
<j-modal position="top" title="Modal" v-model:visable="modalShow3">
  <template #footer>
    <div>我是页脚</div>
  </template>
  content...
</j-modal>

源代码 ​

jayden-ui > modal