Appearance
Button 按钮
按钮
基本用法
<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:'button',
form:{
col:{span:24},
component:{
text:'按钮',
type:'primary',
onClick:(e)=>{
dn.showMsg({message:'点击按钮'})
}
}
}
},
fn4:{
title:'按钮组',
type:'buttonGroup',
form:{
col:{span:24},
component:{
//style:'justify-content:flex-start', //默认右对齐
} ,
props:{
slots:{
default:()=>{
var opt1={
text:'Default',
onClick:()=>{
dn.message.warn('按钮click');
}
};
var opt2={
text:'Primary',
type:'primary',
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt3={
text:'Success',
type:'success',
onClick:()=>{
dn.message.success('按钮click');
}
}
return <div>
<dn-button {...opt1}></dn-button>
<dn-button {...opt2}></dn-button>
<dn-button {...opt3}></dn-button>
</div>
}
}
}
}
},
fn5:{
title:'plain按钮',
type:'buttonGroup',
form:{
col:{span:24},
component:{
class:'dn-button-group2' //按钮之间的间距
} ,
props:{
slots:{
default:()=>{
var opt4={
text:'Info',
type:'info',
plain:true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt5={
text:'Disable',
type:'warning',
plain:true,
disabled:true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt6={
text:'Danger',
type:'danger',
plain:true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
return <div>
<dn-button {...opt4}></dn-button>
<dn-button {...opt5}></dn-button>
<dn-button {...opt6}></dn-button>
</div>
}
}
}
}
},
fn6:{
title:'圆角按钮',
type:'buttonGroup',
form:{
col:{span:24},
component:{
style:'justify-content:flex-start'
} ,
props:{
slots:{
default:()=>{
var opt1={
text:'Loading',
round:true,
loading:true,
onClick:()=>{
dn.message.warn('按钮click');
}
};
var opt2={
text:'Primary',
type:'primary',
round:true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
return <div>
<dn-button {...opt1}></dn-button>
<dn-button {...opt2}></dn-button>
</div>
}
}
}
}
},
fn7:{
title:'图标按钮',
type:'buttonGroup',
form:{
col:{span:24},
props:{
slots:{
default:()=>{
var opt1={
text:'',
icon:"Search",
circle :true,
onClick:()=>{
dn.message.warn('按钮click');
}
};
var opt2={
text:'',
type:'primary',
icon:"Check",
circle :true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt3={
text:'',
type:'success',
icon:"Edit",
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt4={
text:'',
type:'info',
icon:"IconAdd",
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt5={
text:'',
type:'warning',
icon:"Message",
circle :true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt6={
text:'',
type:'danger',
icon:"Delete",
circle :true,
disabled:true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
return <div>
<dn-button {...opt1}></dn-button>
<dn-button {...opt2}></dn-button>
<dn-button {...opt3}></dn-button>
<dn-button {...opt4}></dn-button>
<dn-button {...opt5}></dn-button>
<dn-button {...opt6}></dn-button>
</div>
}
}
}
}
},
fn8:{
title:'Link按钮',
type:'buttonGroup',
form:{
col:{span:24},
props:{
slots:{
default:()=>{
var opt1={
text:'Default',
link:true,
onClick:()=>{
dn.message.warn('按钮click');
}
};
var opt2={
text:'Primary',
type:'primary',
link:true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
var opt3={
text:'Success',
type:'success',
link:true,
onClick:()=>{
dn.message.warn('按钮click');
}
}
return <div>
<dn-button {...opt1}></dn-button>
<dn-button {...opt2}></dn-button>
<dn-button {...opt3}></dn-button>
</div>
}
}
}
}
},
fn10:{
title:'下拉按钮',
type:'buttonGroup',
form:{
col:{span:24},
component:{
class:'dn-button-group2',
} ,
props:{
slots:{
default:()=>{
var opt1={
onCommand:(value)=>{
dn.notification.error("action button value : "+value);
},
props:{
text:'Deault',
placement:'bottom-end',
items:[
{
text:'Action1',
value:'1'
},
{
text:'Action2',
value:'2',
disabled:true
} ,
{
text:'Action3',
value:'3'
} ,
{
text:'Action4',
value:'4',
icon:'Check'
} ,
{
text:'Action5',
value:'5',
divided:true
}
]
}
};
var opt6={
onClick:(value)=>{
//split-button 才触发
dn.notification.error("Split Button Click : "+value);
console.log(value);
},
onCommand:(value)=>{
//value 为item的value值
dn.notification.error("action button value : "+value);
},
props:{
text:'Cick Trigger',
type:'danger',
placement:'bottom-end',
trigger:"click",
'split-button':true,
items:[
{
text:'Action1',
value:'1',
icon:'IconAdd'
},
{
text:'Action2',
value:'2',
disabled:true,
icon:'edit'
} ,
{
text:'删除',
value:'3',
icon:'delete'
} ,
{
text:'Action4',
value:'4',
icon:'Check'
} ,
{
text:'Action5',
value:'5',
divided:true,
icon:'message'
}
]
}
}
return <div>
<dn-dropdown {...opt1}></dn-dropdown>
<dn-dropdown {...opt6}></dn-dropdown>
</div>
}
}
}
}
},
},
form: {
labelWidth: "120px",
'labelPosition':'left',
}
});
}
function initFormOptions() {
formOptions.value = createFormOptions();
return {
formOptions,
formRef
};
}
export default defineComponent({
setup() {
return {
...initFormOptions()
};
}
});
</script>Button API
| PropsName | Description | Type | Default |
|---|---|---|---|
| text | 按钮文字 | string | |
| type | Default primary success info warning danger | string | |
| icon | 按钮图标 | string | |
onClick | 点击Click | ||
key | 参考el-button 原生属性 | ||
| debounce | 按钮防抖属性 | boolean | false |
| delay | 按钮防抖延迟 | number | 2000 |
Button 组用法
ButtonGroup API
| PropsName | Description | Type | Default |
|---|---|---|---|
key | 字段名称子组件column配置 | json | |
| └ title | 标题 | string | |
| └ type | buttonGroup button | string | |
| └ form | 表单栏位配置 | json | |
| └└ col | el-col配置，参考原生组件 | json | |
| └└ component | 原生组件属性 | json | |
| └└└ text | 按钮文字 | ||
└└└ key | 参考原生el-button组件 | ||
| └└ props | 组件属性 | json | |
| └└└ slots | 槽位 | ||
| └└└└ default | 默认槽位，返回jsx组件[buttonGroup需要] | ||
└└└└└ button | 返回button组件 | ||
└└└└└└ onClick | 点击Click | ||
└└└└└ dropdown | 返回下拉DropDown按钮 | ||
└└└└└└ onClick | 点击Click (el:split-button 才触发) | ||
└└└└└└ onCommand | 下拉按钮的Click | ||
└└└└└└ props | dropdown属性 | json | |
└└└└└└└ key | 参考原生dropdown属性 | json | |
└└└└└└ items | 下拉按钮数组 | ||
└└└└└└└ button | button组件 | ||
| └└ order | 排序 | number | |
| └└ show | 是否显示 | boolean | |
| └└ blank | 是否空占位 | boolean | |
| └└ prefixRender | 组件左边render | ||
| └└ suffixRender | 组件右边render |