antd vue的modal组件如何与btn按钮建立对应关联？

  • Z时代
  • 2024-03-01
  • 分类：IT

antd vue的modal组件如何与btn按钮建立对应关联？

Ant Design Vue框架的modal对话框组件，其简单型中，一般是一个btn组件对应一个a-modal;我设计一个页面有多个btn按钮，对应多个a-modal,一般采取不同名的visible响应每个btn，如果是2-3个，还好处理,如下方代码。
但如果是10个以上，怎么办?不断地设置不同的响应变量吗？

<template>
  <div>
    <a-button type="primary" @click="showModal1">Open Modal1</a-button>
    <a-modal v-model:visible="visible1" title="Basic Modal" @ok="handleOk">
      <p>Some contents...1</p>
    </a-modal>
    <a-button type="primary" @click="showModal2">Open Modal1</a-button>
    <a-modal v-model:visible="visible2" title="Basic Modal" @ok="handleOk">
      <p>Some contents...2</p>
    </a-modal>
    <a-button type="primary" @click="showModal3">Open Modal1</a-button>
    <a-modal v-model:visible="visible3" title="Basic Modal" @ok="handleOk">
      <p>Some contents...3</p>
    </a-modal>
    <a-button type="primary" @click="showModal4">Open Modal1</a-button>
    <a-modal v-model:visible="visible4" title="Basic Modal" @ok="handleOk">
      <p>Some contents...4</p>
    </a-modal>
......
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const visible1 = ref(false);
......
    const showModal1 = () => {
      visible1.value = true;
    };
......
    return {
      visible1,
.......
    };
  },
});
</script>

新手上路，还望勿见笑

回答：

比如类似下面这样的形式

<template>
  <div>
    <a-button type="primary" @click="showModal(DialogType.error)">Open Modal error</a-button>
    <a-button type="primary" @click="showModal(DialogType.success)" style="margin: 0 20px;">Open Modal success</a-button>
    <a-button type="primary" @click="showModal(DialogType.warn)">Open Modal warn</a-button>
    <a-modal :visible="dialogType!=DialogType.close" title="Basic Modal" @ok="closeDialog" @cancel="closeDialog">
      <p>{{content}}</p>
    </a-modal>
  </div>
</template>
<script>
const DialogType = createEnum(['close','error', 'success', 'warn'])
function createEnum(keys, start=0) {
  return Object.freeze(keys.reduce((res, k, i) => {
    res[ res[k] = start+i ] = k;
    return res;
  }, {}))
}
export default {
  data: () => ({
    dialogType: DialogType.close,
    DialogType,
  }),
  computed: {
    content() {
      return ['','error','success','warn'][this.dialogType] + 'content'
    }
  },
  methods: {
    showModal(dialogType) {
      this.dialogType = dialogType;
    },
    closeDialog() {
      this.dialogType = DialogType.close
    },
  }
};
</script>

可以用枚举，减少变量使用，modal如果配置上没啥区别，只是内容不一样的话，那变化内容就行了，modal就用一个，具体要看内容多复杂，如果只是像示例中文案不同，那用compute根据具体枚举返回对应文案就可以了。如果是复杂的结构，那可以抽象成组件，用component去映射到对应组件即可，这样就不需要很多变量，也不需要写一堆if...else

以上是 antd vue的modal组件如何与btn按钮建立对应关联？ 的全部内容， 来源链接： utcz.com/p/936984.html

回到顶部