Appearance
Message 提示信息
提示信息，弹框提醒
基本用法
<template>
<dn-page>
<dn-form ref="formRef" v-bind="formOptions"></dn-form>
</dn-page>
</template>
<script lang="jsx">
import {ref,defineComponent} from "vue";
import { useForm } from "@sdevnet/devnet-form";
import {dn} from "@sdevnet/devnet-form";
const formRef = ref();
const formOptions = ref();
function createFormOptions() {
const { buildFormOptions } = useForm();
return buildFormOptions({
columns: {
fn1:{
title:'提醒信息',
type:'tipmsg',
form: {
col:{span:24} ,
component:{
type:'success',
title:'Success Tip Message',
showIcon:true
}
}
},
fn2: {
title: "",
type: "tipmsg",
form: {
col:{span:24},
props:{
type:'nolabel'
},
component:{
type:'error',
title:'Error Tip Message',
effect:'dark',
closable:false
}
}
},
fnsplit1:{
type:'split',
form:{
props:{
value:'分割线',
}
}
},
fn4:{
title:'Message',
type:'button',
form:{
col:{span:24},
component:{
text:'Click Tip',
type:'danger',
onClick:()=>{
dn.message.error('Error提示');
}
}
}
},
fn5:{
title:'Notification',
type:'button',
form:{
col:{span:24},
component:{
text:'Click Notify',
type:'success',
onClick:()=>{
dn.notification.warn('success提示');
}
}
}
},
fn6:{
title:'',
type:'button',
form:{
col:{span:24},
component:{
text:'右下角',
type:'primary',
onClick:()=>{
dn.notification.success({
title:'消息提示',
message:'提示内容，5秒关闭',
position:'bottom-right',
duration:5000
});
}
}
}
},
fnsplit2:{
type:'split',
form:{
props:{
value:'分割线',
}
}
},
fn7:{
title:'MessageBox',
type:'button',
form:{
col:{span:24},
component:{
text:'弹框提示',
type:'primary',
onClick:()=>{
dn.showMsg({
message:'提示内容',
confirmButtonText:'确认按钮文字'
}).then((action)=>{
dn.notification.success('点击了确认');
}).catch((action)=>{
dn.message.error('点击了X 关闭');
});
}
}
}
},
fn8:{
title:'',
type:'button',
form:{
col:{span:24},
component:{
text:'确认提示',
type:'success',
onClick:async()=>{
try{
const ret =
await dn.confirm({
message:'提示内容...',
cancelButtonText:'取消按钮文字'
});
dn.showMsg({message:'点击了确认',type:'success'});
} catch (e) {
dn.message.error('点击了 '+e+' 关闭');
}
}
}
}
},
fn9:{
title:'Prompt',
type:'button',
form:{
col:{span:24},
component:{
text:'Prompt输入',
type:'danger',
onClick:async()=>{
dn.prompt(
{
type:'warning',
message:'这是输入提示,隐藏了 X 按钮...',
inputPlaceholder:'请输入XXX内容',
inputErrorMessage:'请输入XXX...',
showClose:false,
inputValidator:(val)=>{
if(!val){
return false;
}
return true;
},
beforeClose:(action,instance,done)=>{
if(action === 'confirm'){
console.log(instance.inputValue);
done();
}
else{
done();
}
}
}).then((instance)=>{
dn.message.success('点击了确定-输入：'+instance?.value);
}).catch((action)=>{
dn.message.error('Cancel 关闭');
});
}
}
}
},
},
form: {
labelWidth: "120px",
'labelPosition':'left'
}
});
}
function initFormOptions() {
formOptions.value = createFormOptions();
return {
formOptions,
formRef
};
}
export default defineComponent({
setup() {
return {
...initFormOptions()
};
}
});
</script>提醒信息 API
| PropsName | Description | Type | Default |
|---|---|---|---|
key | 字段名称子组件column配置 | json | |
| └ title | 标题 | string | |
| └ type | tipmsg | string | |
| └ form | 表单栏位配置 | json | |
| └└ col | el-col配置，参考原生组件 | json | |
| └└ component | 原生组件属性 | json | |
| └└└ title | 提醒内容文字 | string | |
| └└└ type | Default primary success info warning danger | ||
| └└└ showIcon | 显示图标 | boolean | |
| └└└ closable | 显示右上角 X 关闭按钮 | boolean | |
└└└ key | 参考原生属性 | ||
| └└ order | 排序 | number | |
| └└ show | 是否显示 | boolean | |
| └└ blank | 是否空占位 | boolean |
message API
| PropsName | Description | Type | Default |
|---|---|---|---|
| dn.message. | message方法 | ||
| └ success | 成功 | ||
| └ error | 错误 | ||
| └ warn | 警告 | ||
| └ info | 信息 |
message 示例
ts
import { dn } from "@sdevnet/devnet-form";
dn.message.success('Success提示');
dn.message.error('Error提示');
dn.message.warn('Warn提示');notification API
| PropsName | Description | Type | Default |
|---|---|---|---|
| dn.notification. | notification方法 | ||
| └ success | 成功 | ||
| └ error | 错误 | ||
| └ warn | 警告 | ||
| └ info | 信息 | ||
└└ msg | 方法参数 | json | |
| └└└ title | 标题 | string | |
| └└└ message | 内容 | string | |
| └└└ position | 显示位置 | ||
| └└└ duration | 延迟关闭时间（毫秒） | number |
notification 示例
ts
import { dn } from "@sdevnet/devnet-form";
dn.notification.warn('Warn提示');
dn.notification.error('Error提示');
dn.notification.success({
title:'消息提示',
message:'右下角，5秒关闭',
position:'bottom-right',
duration:5000
});messageBox API
| PropsName | Description | Type | Default |
|---|---|---|---|
| dn.showMsg | showMsg方法 | ||
└└ msg | 方法参数 | json | |
| └└└ title | 标题 | string | 系统提示 |
| └└└ message | 内容 | string | |
| └└└ type | 类型 | ||
| └└└ confirmButtonText | 确认按钮文字 | string | |
| └└└ showClose | 是否显示右上角 X （关闭按钮） | boolean | |
└└└ key | 参考官方组件 |
messageBox 示例
ts
import { dn } from "@sdevnet/devnet-form";
dn.showMsg({message:'提示内容'})
.then((action)=>{
dn.notification.success('点击了确认');
}).catch((action)=>{
dn.message.error('点击了X 关闭');
});
try{
//await 示例
const ret = await dn.confirm({ message:'确认提示内容...'});
dn.showMsg({message:'点击了确认',type:'success'});
} catch (e) {
dn.message.error('关闭了');
}confirm API
| PropsName | Description | Type | Default |
|---|---|---|---|
| dn.confirm | confirm方法 | ||
└└ msg | 方法参数 | json | |
| └└└ title | 标题 | string | 系统提示 |
| └└└ message | 内容 | string | |
| └└└ confirmButtonText | 确认按钮文字 | string | |
| └└└ cancelButtonText | 取消按钮文字 | string | |
| └└└ showClose | 是否显示右上角 X （关闭按钮） | boolean | |
| └└└ icon | 内容文字前的图标 | string | |
└└└ key | 参考官方组件 |
confirm 示例
ts
import { dn } from "@sdevnet/devnet-form";
dn.confirm({message:'提示内容'})
.then((action)=>{
dn.notification.success('点击了确认');
}).catch((action)=>{
dn.message.error('取消了');
});
try{
const ret =
await dn.confirm({
message:'确认提示内容...',
cancelButtonText:'取消按钮文字',
icon:'QuestionFilled'
});
dn.showMsg({message:'点击了确认',type:'success'});
} catch (e) {
dn.message.error('取消了');
}