@58fe/p5/src/doc/dialog.md

pc端vue组件

<script>
	module.exports = {
		methods: {
			ok() {
				alert('ok~!');
			},
			showDialogPlugin(){
				this.$p5
					.dialog({
						othClassName: 'test',
						title: '提示',
						content: '这里是自定义内容',
						okBtnText: 'ok',
						cancelBtnText: 'cancel'
					})
					.then(val => {
						console.log(val);
					});
			}
		},
		data() {
			return {
				show: false,
				showContentDialog:false
			};
		}
	}
</script>

## Dialog 对话框

Dialog 弹出一个对话框，适合一句话标题场景，含有确认取消

### 引入
引用的组件使用过程中，可以加前缀`p5-`进行使用
```javascript
import { dialog } from '@58fe/p5';
```

### 基本用法

:::demo

```html
<btn @click="show=true">点击打dialog</btn>

<p5-dialog v-model="show" v-on:cancel="show=false" v-on:ok="ok"  title="提示" ok-btn-text="确定" cancel-btn-text="取消">这里是自定义内容</p5-dialog>

<script>
export default {
	methods: {
		ok() {
			alert('ok~!');
        }
	}
};
</script>
```

:::

### 自定义内容

组件内部的内容是自定义的，可以加入任意内容

:::demo

```html
<btn @click="showContentDialog=true">点击打dialog</btn>

<p5-dialog v-model="showContentDialog" v-on:cancel="showContentDialog=false" v-on:ok="showContentDialog=false"  title="提示" ok-btn-text="确定" cancel-btn-text="取消">
	<p>这里可以放置自定义内容</p>
	<btn>按钮一</btn>
	<btn>按钮二</btn>
	<btn>按钮三</btn>
</p5-dialog>

<script>
export default {
	data(){
		return{
			showContentDialog: false
		}
	}
};
</script>
```

:::

### 插件使用

引入后可随时随地调用，脱离.vue 文件的束缚
```javascript
import { dialogPlugin } from '@58fe/p5';
Vue.use(dialogPlugin);
```

回调函数中的参数会返回'ok', 'cancel' 两种，根据两种参数做不同的处理

:::demo

```html
<btn @click="showDialogPlugin">点击打dialog</btn>

<p5-dialog v-model="show" v-on:cancel="show=false" v-on:ok="ok"  title="提示" ok-btn-text="确定" cancel-btn-text="取消">这里是自定义内容</p5-dialog>

<script>
export default {
	methods: {
		showDialogPlugin(){
			this.$p5
				.dialog({
					othClassName: 'test',
					title: '提示',
					content: '这里是自定义内容',
					okBtnText: 'ok',
					cancelBtnText: 'cancel'
				})
				.then(val => {
					console.log(val);
				});
		}
	},
	data() {
		return {
			show: false
		};
	}
};
</script>
```

:::

### 参数

| 参数          | 说明                  | 类型        | 可选值 | 默认值 |
| ------------- | --------------------- | ----------- | ------ | ------ |
| title         | 左上角的标题名称      | String      | ——     | 提示   |
| content       | dialog 内自定义的内容 | String/标签 | ——     | ——     |
| okBtnText     | 确定按钮的文案        | String      | ——     | ——     |
| cancelBtnText | 取消按钮的文案        | String      | ——     | ——     |
| othClassName  | 增加的 class          | String      | ——     | ——     |