Vue 3 的漂亮对话框模态组件 – gitart-vue-dialog

Vue 3 的漂亮对话框模态组件 – gitart-vue-dialog
插件名称 gitart-vue-dialog
发布时间 2021年12月28日
插件作者 MichaelGitArt

Gitart 是为 Vue 3 应用程序创建的漂亮且可自定义的对话框和模式组件。

安装和下载:

# Yarn
$ yarn add gitart-vue-dialog

# NPM
$ npm i gitart-vue-dialog

使用

1. 导入 Gitart Vue Dialog 组件。

import { GDialog } from "gitart-vue-dialog";
// stylesheet
import "gitart-vue-dialog/dist/style.css";

2. 注册组件。

export default {
  components: {
    GDialog,
  },
}

3. 创建一个基本对话框。

<GDialog v-model="value">
  内容
</GDialog>
<button @click="onOpen">打开 Dialog</button>
// Composition API
export default {
  components: {
    GDialog,
  },
  setup() {
    const value = ref(false)
    const onOpen = () => {
      value.value = true
    }
    return {
      value,
      onOpen,
    }
  },
}
// API 选项
export default {
  components: {
    GDialog,
  },
  data: () => ({
    value: false,
  }),
  methods: {
    onOpen() {
      this.value = true
    },
  },
}

4.所有可用的组件道具。

background: {
  type: [Boolean, String],
  default: true,
},
borderRadius: {
  type: [Boolean, Number, String],
  default: true,
},
contentClass: {
  type: String,
  default: '',
},
/**
 * 删除内容的框阴影
 */
depressed: {
  type: Boolean,
  default: false,
},
fullscreen: {
  type: Boolean,
  default: false,
},
height: {
  type: [String, Number],
  default: 'auto',
},
/**
 * 启用对话框的本地模式。
 * 对话框固定在第一个 "position: relative;" parent
 */
local: {
  type: Boolean,
  default: false,
},
maxWidth: {
  type: [String, Number],
  default: 'none',
},
modelValue: {
  type: Boolean,
  default: false,
},
overlayBackground: {
  type: [Boolean, String],
  default: true,
},
/**
 * 单击外部内容不会关闭模式
 */
persistent: {
  type: Boolean,
  default: false,
},
scrollable: {
  type: Boolean,
  default: false,
},
transition: {
  type: String,
  default: 'g-dialog-transition',
},
width: {
  type: [String, Number],
  default: 'auto',
},