Modal弹层

标准弹层

点我出弹层 我是弹层内容

<template>
  <div>
    <med-button type="danger"  @click="visible = true">
      点我出弹层
    </med-button>
    <med-s-modal v-model="visible" title="我是标题" @cancel="cancel">
      我是弹层内容
    </med-s-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      }
    },
    methods: {
      cancel() {
        console.log('用户点击了取消！')
      },
    }
  }
</script>

显示代码

大弹层

点我出弹层 我是弹层内容

<template>
  <div>
    <med-button type="danger"  @click="visible = true">
      点我出弹层
    </med-button>
    <med-s-modal size="large" v-model="visible" title="我是标题" @ok="ok" @cancel="cancel">
      我是弹层内容
    </med-s-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      }
    },
    methods: {
      ok() {
        console.log('用户点击了ok！')
      },
      cancel() {
        console.log('用户点击了取消！')
      },
    }
  }
</script>

显示代码

带插槽的弹层

点我出弹层 我是弹层内容

<template>
  <div>
    <med-button type="danger"  @click="visible = true">
      点我出弹层
    </med-button>
    <med-s-modal v-model="visible" title="我是标题" @cancel="cancel">
      我是弹层内容
       <template #footer>
        <med-button>自定义按钮</med-button>
      </template>
    </med-s-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      }
    },
    methods: {
      cancel() {
        console.log('用户点击了取消！')
      },
    }
  }
</script>

显示代码

参数列表

参数	方式	示例	解释
size	Prop	size="small"	设置卡片大小，可选值为 small medium 或者large
footer	Slots	<template #footer>插槽</template>	底部插槽，替换默认按钮