Modal组件api、demo优化讨论

[kagol]

api

Modal组件：https://vue-devui.github.io/components/modal/

1. 命令式调用存在安全问题和可拓展性问题
2. 组件组合能力，自由度问题，如弹出方向、框底色等
3. 二次开发开放能力

[kagol]

Modal应该要能通过组件/子组件方式调用，保证灵活性，这是基础形态，基于此可以提供service调用方式，提升开发者体验。
组件的能力应该由少到多逐步开放，比如一开始只能定制Modal里面的内容modal-header/modal-content/modal-footer，后面根据用户场景和需求开放modal-overlay/modal-close-button等定制能力，这样既能避免过度设计、保持组件的简洁，又能不断扩展，持续满足更多用户的场景和需求，让组件更灵活、更强大。

[shuiche-it]

modal 组件如何按需引入，按照文档提示： DIALOG_SERVICE_TOKEN 找不到

[shuiche-it]

// 按需引入
import Modal from 'vue-devui/modal'

app.use(Modal)

[shuiche-it]

modal 按需引入运行失败，全局引入后，运行成功。我应该如何操作？

[kagol]

可能是个bug，提个issue吧
@shuiche-it

[xingyan95]

Modal优化草案

Modal 组件使用通过子组件+插槽的方式，子组件暂时提供d-modal-header和d-modal-footer，内置默认边距等样式；插槽提供header和footer用于自定义 Modal 顶部和底部。
Modal 目前服务调用通过在全局注册MODAL_SERVICE_TOKEN实现的，这块建议进行调整，通过其他方式提供服务调用。

d-modal 参数

参数	类型	默认	说明
v-model	boolean	false	必选，是否显示 Modal
title	string	-	可选，Modal 的标题
lock-scroll	boolean	true	可选，Modal打开后，是否将 body 滚动锁定
close-on-click-overlay	boolean	true	可选，点击遮罩层是否能关闭 Modal
before-close	(done) => void	-	可选，关闭窗口之前的回调，调用 done 可关闭 Modal

d-modal 插槽

名称	说明
default	Modal 内容
header	自定义 Modal 顶部
footer	自定义 Modal 底部

基础用法

v-model 双向绑定，控制 Modal 是否显示；title参数设置 Modal 标题。

<template>
  <d-button @click="handleClick">打开 modal</d-button>
  <d-modal v-model="visible" title="Start Snapshot Version">
    <div>name: {{ data.name }}</div>
    <div>age: {{ data.age }}</div>
    <div>address: {{ data.address }}</div>
  </d-modal>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);
    const data = reactive({
      name: 'Tom',
      age: 20,
      address: 'Chengdu'
    });
    const handleClick = () => {
      visible.value = true;
    };

    return { visible, data, handleClick };
  }
});
</script>

自定义标题和操作按钮

header插槽可以自定义 Modal 顶部区域，子组件d-modal-header为顶部区域提供了默认样式，自定义样式可通过在子组件设置style/class实现。footer插槽同理。

<template>
  <d-button @click="handleClick">打开 modal</d-button>
  <d-modal v-model="visible">
    <template #header>
      <d-modal-header>
        <d-icon name="like"></d-icon>
        <span>Good Title</span>
      </d-modal-header>
    </template>
    <div>name: {{ data.name }}</div>
    <div>age: {{ data.age }}</div>
    <div>address: {{ data.address }}</div>
    <template #footer>
      <d-modal-footer style="text-align: right;padding-right: 20px;">
        <d-button @click="hidden">取消</d-button>
        <d-button @click="hidden">确认</d-button>
      </d-modal-footer>
    </template>
  </d-modal>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);
    const data = reactive({
      name: 'Tom',
      age: 20,
      address: 'Chengdu'
    });
    const handleClick = () => {
      visible.value = true;
    };
    const hidden = () => {
      visible.value = false;
    };

    return { visible, data, handleClick, hidden };
  }
});
</script>

关闭前回调

before-close在用户点击关闭按钮或者遮罩层时会被调用，可在完成某些异步操作后，通过done参数关闭。

<template>
  <d-button @click="handleClick">打开 modal</d-button>
  <d-modal v-model="visible" :before-close="beforeClose" style="width: 500px;">
    <div>name: {{ data.name }}</div>
    <div>age: {{ data.age }}</div>
    <div>address: {{ data.address }}</div>
    <template #footer>
      <d-modal-footer>
        <d-button @click="hidden">取消</d-button>
        <d-button @click="hidden">确认</d-button>
      </d-modal-footer>
    </template>
  </d-modal>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';
export default defineComponent({
  setup() {
    const visible = ref(false);
    const data = reactive({
      name: 'Tom',
      age: 20,
      address: 'Chengdu'
    });
    const handleClick = () => {
      visible.value = true;
    };
    const hidden = () => {
      visible.value = false;
    };
    const beforeClose = (done) => {
      new Promise((resolve) => {
        setTimeout(resolve, 1000);
      }).then(done);
    };

    return { data, visible, handleClick, hidden, beforeClose };
  }
});
</script>