# vue-bulma-dialog

**Repository Path**: jempson/vue-bulma-dialog

## Basic Information

- **Project Name**: vue-bulma-dialog
- **Description**: 基于vue2 bulma0.5.3 的dialog，功能上实现了bulma的modal功能，操作比modal简单
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-09-25
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Bulma Dialog
当前版本：`1.0.0`

该组件是基于vue2 、 bulma0.5.3 完成的弹出层组件。
> 配置灵活

> 使用方便

> 上手快

## 配置灵活
- 自定义标题
- 自定义宽度
- 高度自适应
- 弹层内容可以是html，也可以是组件


## 下载

+ `npm install vue-bulma-dialog -s`

## 使用
```JavaScript
this.$Dialog.open({
  title: 'Dialog title',
  content: '<h1>Hello Vue Bulma Dialog!</h1>'
})
```
```JavaScript
this.$Dialog.alert('Hello Vue Bulma Dialog')
```
```JavaScript
this.$Dialog.alert('Hello Vue Bulma Dialog',{
  title: '温馨提示'
})
```
```JavaScript
this.$Dialog.alert('Hello Vue Bulma Dialog',function(){
  console.log('点击“确认”按钮')
})
```
```JavaScript
this.$Dialog.success('success')
```

## 项目截图
1、不带图标的弹出层
![项目截图](https://gitee.com/mini-firework/vue-bulma-dialog/raw/master/images/2.png)

2、带图标的弹出层
![项目截图](https://gitee.com/mini-firework/vue-bulma-dialog/raw/master/images/3.png)

3、带图标的确认框
![项目截图](https://gitee.com/mini-firework/vue-bulma-dialog/raw/master/images/4.png)

4、自定义内容的弹出层
![项目截图](https://gitee.com/mini-firework/vue-bulma-dialog/raw/master/images/1.png)

## 本地开发
- `npm imstall`
- `npm run dev`

## 使用方法：
参考
`./examples/src/App.vue`