tm-dialog 对话框

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<tm-button @click="show =true" block>显示对话框 </tm-button>
<tm-dialog v-model="show" content="我是弹层内容"></tm-dialog>

1
2

<script>
	export default {
		data() {
			return {
				show:false,
			}
		},
		methods: {
			
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

分割按钮圆角 在上方的基础上theme="split"加上这个就可以了。

<tm-button @click="show =true" block>显示对话框 </tm-button>
<tm-dialog v-model="show" content="我是弹层内容"  theme="split"></tm-dialog>

1
2

更多见下方完整未示例和属性。

👉完整的示例

可以复制到页面直接运行

<template>
	<view class="">
		<tm-menubars title="对话框" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
		<tm-sheet>
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">默认样式</view>
			<tm-button @click="show =true" block>显示对话框 </tm-button>
			<tm-dialog v-model="show" content="我是弹层内容"></tm-dialog>
		</tm-sheet>
		<tm-sheet>
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">分割按钮,更换主题</view>
			<tm-button theme="bg-gradient-pink-accent" @click="show1=true" block>渐变主题对话框</tm-button>
			<tm-dialog confirmText="付钱" confirmColor="bg-gradient-pink-accent" cancelColor="pink" v-model="show1" content="我是弹层内容" theme="split"></tm-dialog>
		</tm-sheet>
		<tm-sheet>
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">对话输入框</view>
			<tm-button @click="show3=true" block>不显示取消按钮</tm-button>
			<tm-dialog :input-val.sync="inpuval" confirmText="不能为空" :showCancel="false" model="confirm" v-model="show3" content="我是弹层内容" theme="split"></tm-dialog>
		</tm-sheet>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
	export default {
		data() {
			return {
				show:false,
				show1:false,
				show3:false,
				inpuval:''
			}
		},
		methods: {
			
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

👉props属性表

属性名称	类型	可选值	默认值	说明
value.sync	Boolean	true/false	false	显示对话框，推荐使用v-model
black	Boolean	true/false	false	暗黑模式
bottom-border	Boolean	true/false	true	是否显示标题底部边线
confirmColor	String	任意主题名称	primary	确认按钮的主题颜色
cancelColor	String	任意主题名称	primary	取消按钮的主题色
confirmText	String	任意文字	确认	确认按钮的文字
cancelText	String	任意文字	取消	取消按钮显示的文字
content	String	任意文字	取消	内容文字
title	String	任意文字	提示	标题
showCancel	Boolean	true/false	false	是否显示取消按钮
over-close	Boolean	true/false	true	点击遮罩是否关闭窗体
theme	String	merge/split	merge	merge合并按钮，split分割按钮
model	String	dialog/confirm	dialog	对话框类型.dialog
round	Number	任意数字	4	圆角
input-val	String	-	''	显示的输入框内容。 model=confirm才会起作用
disabled	Boolean	true/false	false	禁用后，点击哪都关闭不了，只能通过手动设置v-model来关闭窗体。

👉slot插槽

名称	数据名称	数据类型	说明
#default	-	-	默认插槽，对话框正文内容
#title	-	-	对话框标题的插槽
#button	-	-	按钮插槽

👉事件

事件名称	返回参数	返参类型	说明
@confirm	-	-	认按钮时触发，注意：如果类型为confirm则返回的参数包含输入框的内容
@cancel	-	-	点击取消按钮时触发

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑报错？ | 评论？

# tm-dialog 对话框

# 👉使用方法,跟数1,2,3一样简单

# 👉完整的示例

# 👉props属性表

# 👉slot插槽

# 👉事件

# 👉更新日志