安装方式

npm install hzzt-message-box

import HzztMessageBox from 'hzzt-message-box';
import 'hzzt-message-box/dist/index.css'
import {createApp} from 'vue'
import App from './App.vue'

const app = createApp(App);

app.use(HzztMessageBox, {
    size: 'small',
    // i18n: i18n  vue-i18n实例
})

app.mount('#app')

HzztDialog组件

在ElDialog的基础上扩展了熟悉

Props

| 属性 | 类型 | 默认值 | 说明 | |------------|---------|------|-----------| | minWidth | number | 300 | 最小宽度 | | minHeight | number | 100 | 最小高度 | | resizeable | boolean | true | 可拖动调整弹框大小 |

示例

<template>
  <hzzt-dialog title="Title" v-model="visible">
    Content
  </hzzt-dialog>
  <el-button @click="confirm">Dialog</el-button>
  <el-button @click="HzztMessageboxDialog">Dialog</el-button>
  <el-button @click="hzztDrawer">Drawer</el-button>
  <el-button ref="buttonRef" @click="hzztPopover">Popover</el-button>
  <el-button @click="hzztSelectBox">SelectBox</el-button>
  <el-button @click="hzztCascaderBox">CascaderBox</el-button>
  <el-button @click="hzztForm">Form</el-button>
</template>
<script setup lang="ts">
  import {h, ref} from 'vue'
  import {HzztMessageBox} from "hzzt-message-box";

  const visible = ref(false);
  const buttonRef = ref();

  function confirm() {
    visible.value = true;
  }

  function HzztMessageboxDialog() {
    HzztMessageBox.dialog({
      title: 'Title',
      slots: {
        default: () => h('div', 'HzztMessageBox'),
        footer: false,
      }
    })
  }

  function hzztDrawer() {
    HzztMessageBox.drawer({
      title: 'Title',
      slots: {
        default: () => h('div', 'Content'),
      }
    })
  }

  function hzztPopover() {
    HzztMessageBox.popover({
      virtualRef: buttonRef,
      title: '标题',
      content: '内容',
      slots: {
        default: () => h('div', 'Content'),
      }
    })
  }

  function hzztSelectBox() {
    HzztMessageBox.select({
      message: '请选择用户',
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      require: true,
      requireMsg: '请选择用户',
      messageProps: {
        modelValue: '1',
        options: [{
          label: '用户1',
          value: '1',
        }, {
          label: '用户2',
          value: '2',
        }],
        clearable: false,
        placeholder: '请选择用户',
      },
    }).then((form) => {
      console.log(form);
    }).catch((e) => {
      console.log(e);
    });
  }

  function hzztCascaderBox() {
    HzztMessageBox.cascader({
      message: '请选择用户',
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      require: true,
      requireMsg: '请选择用户',
      messageProps: {
        options: [{
          label: '用户1',
          value: '1',
        }, {
          label: '用户2',
          value: '2',
        }],
        clearable: false,
      },
    }).then((form) => {
      console.log(form);
    }).catch((e) => {
      console.log(e);
    });
  }

  function hzztForm() {
    HzztMessageBox.form({
      title: '表单提交',
      form: {
        model: {},
        rules: {
          'select': [{required: true, message: '请选择选项', trigger: 'change'}]
        },
        formList: [{
          type: 'select',
          name: 'select',
          props: {
            placeholder: '请选择内容',
            clearable: false,
            filterable: true,
          },
          options: [{
            label: '选项一',
            value: '选项一',
          }, {
            label: '选项二',
            value: '选项二',
          }],
          slots: {
            header: () => 'test',
          },
          formProps: {
            prop: 'select',
            label: 'Select',
          },
        }]
      },
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then((form) => {
      console.log(form);
    }).catch((e) => {
      console.log(e);
    });
  }

</script>

<style scoped>

</style>