Appearance
Icon 图标
图标
基本用法
<template>
<dn-page>
<dn-form ref="formRef" v-bind="formOptions">
<el-form-item label="点我试试">
<dn-icon icon="search" @click="search_click"></dn-icon>
</el-form-item>
<el-form-item label="">
<dn-icon icon="message" color="red" @click="search_click"></dn-icon>
</el-form-item>
</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: {
},
form:{
autoRender:false,
labelWidth: "120px",
'labelPosition':'left'
}
});
}
function initFormOptions() {
formOptions.value = createFormOptions();
return {
formOptions,
formRef
};
}
export default defineComponent({
setup() {
const search_click=()=>{
dn.showMsg({ message:'试试就试试...'});
}
return {
...initFormOptions(),
search_click
};
}
});
</script>Icon API
| PropsName | Description | Type | Default |
|---|---|---|---|
key | 参考el-icon 原生属性 | ||
| class | 样式 | string | |
| icon | 图标名称或组件 | string object |
Icon 组用法
<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";
const formRef = ref();
const formOptions = ref();
function createFormOptions() {
const { buildFormOptions } = useForm();
return buildFormOptions({
columns: {
fn1:{
title:'图标',
type:'buttonGroup',
form:{
col:{span:24},
component:{
class:'dn-button-group-left'
} ,
props:{
slots:{
default:()=>{
var opt1={
icon:'IconAdd',
color:'red'
};
var opt2={
icon:'edit'
};
var opt3={
icon:'delete',
color:'red'
};
var opt4={
icon:'DocumentChecked',
};
var opt5={
icon:'filter',
};
var opt6={
icon:'search',
};
var opt7={
icon:'refresh',
};
var opt8={
icon:'upload',
};
var opt9={
icon:'Download',
};
var opt10={
icon:'View',
};
return <div>
<dn-icon {...opt1}></dn-icon>
<dn-icon {...opt2}></dn-icon>
<dn-icon {...opt3}></dn-icon>
<dn-icon {...opt4}></dn-icon>
<dn-icon {...opt5}></dn-icon>
<dn-icon {...opt6}></dn-icon>
<dn-icon {...opt7}></dn-icon>
<dn-icon {...opt8}></dn-icon>
<dn-icon {...opt9}></dn-icon>
<dn-icon {...opt10}></dn-icon>
</div>
}
}
}
}
},
fn2:{
title:'',
type:'buttonGroup',
form:{
col:{span:24},
component:{
class:'dn-button-group-left'
} ,
props:{
slots:{
default:()=>{
var opt1={
icon:'set-up',
color:'red'
};
var opt2={
icon:'check'
};
var opt3={
icon:'sort',
color:'red'
};
var opt4={
icon:'close',
};
var opt5={
icon:'more',
};
var opt6={
icon:'zoom-in',
};
var opt7={
icon:'zoom-out',
};
var opt8={
icon:'refresh-left',
};
var opt9={
icon:'refresh-right',
};
var opt10={
icon:'View',
};
return <div>
<dn-icon {...opt1}></dn-icon>
<dn-icon {...opt2}></dn-icon>
<dn-icon {...opt3}></dn-icon>
<dn-icon {...opt4}></dn-icon>
<dn-icon {...opt5}></dn-icon>
<dn-icon {...opt6}></dn-icon>
<dn-icon {...opt7}></dn-icon>
<dn-icon {...opt8}></dn-icon>
<dn-icon {...opt9}></dn-icon>
<dn-icon {...opt10}></dn-icon>
</div>
}
}
}
}
},
fn3:{
title:'',
type:'buttonGroup',
form:{
col:{span:24},
component:{
class:'dn-button-group-left'
} ,
props:{
slots:{
default:()=>{
var opt1={
icon:'back',
color:'red'
};
var opt2={
icon:'right'
};
var opt13={
icon:'arrow-up'
};
var opt3={
icon:'arrow-down',
color:'red'
};
var opt4={
icon:'arrow-right',
};
var opt5={
icon:'arrow-left',
};
var opt6={
icon:'FullScreen',
};
var opt7={
icon:'UnFullScreen',
};
var opt12={
icon:'Minus'
}
var opt8={
icon:'question-filled',
};
var opt9={
icon:'CaretTop',
};
var opt10={
icon:'CaretBottom',
};
var opt11={
icon:'warning'
}
return <div>
<dn-icon {...opt1}></dn-icon>
<dn-icon {...opt2}></dn-icon>
<dn-icon {...opt13}></dn-icon>
<dn-icon {...opt3}></dn-icon>
<dn-icon {...opt4}></dn-icon>
<dn-icon {...opt5}></dn-icon>
<dn-icon {...opt6}></dn-icon>
<dn-icon {...opt7}></dn-icon>
<dn-icon {...opt12}></dn-icon>
<dn-icon {...opt8}></dn-icon>
<dn-icon {...opt9}></dn-icon>
<dn-icon {...opt10}></dn-icon>
<dn-icon {...opt11}></dn-icon>
</div>
}
}
}
}
},
fn4:{
title:'',
type:'buttonGroup',
form:{
col:{span:24},
component:{
class:'dn-button-group-left'
} ,
props:{
slots:{
default:()=>{
var opt1={
icon:'setting',
//style:'width:2em;height:2em;margin-right:10px;'
};
var opt2={
icon:'menu'
};
var opt3={
icon:'loading',
color:'red'
};
var opt4={
icon:'user',
};
var opt5={
icon:'tools',
};
var opt6={
icon:'HomeFilled',
};
var opt7={
icon:'UploadFilled',
};
var opt8={
icon:'Histogram',
};
var opt9={
icon:'Star',
};
var opt10={
icon:'grid',
};
var opt11={
icon:'Avatar'
}
var opt12={
icon:'Document'
}
return <div>
<dn-icon {...opt1}></dn-icon>
<dn-icon {...opt2}></dn-icon>
<dn-icon {...opt3}></dn-icon>
<dn-icon {...opt4}></dn-icon>
<dn-icon {...opt5}></dn-icon>
<dn-icon {...opt6}></dn-icon>
<dn-icon {...opt7}></dn-icon>
<dn-icon {...opt8}></dn-icon>
<dn-icon {...opt9}></dn-icon>
<dn-icon {...opt10}></dn-icon>
<dn-icon {...opt11}></dn-icon>
<dn-icon {...opt12}></dn-icon>
</div>
}
}
}
}
},
fn5:{
title:'右对齐',
type:'buttonGroup',
form:{
col:{span:24},
props:{
slots:{
default:()=>{
var opt1={
icon:'list',
onClick:(e)=>{
alert(e);
}
};
var opt2={
icon:'message'
};
var opt3={
icon:'Crop',
color:'red'
};
var opt4={
icon:'Picture',
};
var opt5={
icon:'Iphone',
};
var opt6={
icon:'Location',
};
var opt7={
icon:'Printer',
};
var opt8={
icon:'Calendar',
};
var opt9={
icon:'MoreFilled',
};
var opt10={
icon:'WarnTriangleFilled',
};
var opt11={
icon:'Share'
}
var opt12={
icon:'CircleCloseFilled'
}
return <div>
<dn-icon {...opt1}></dn-icon>
<dn-icon {...opt2}></dn-icon>
<dn-icon {...opt3}></dn-icon>
<dn-icon {...opt4}></dn-icon>
<dn-icon {...opt5}></dn-icon>
<dn-icon {...opt6}></dn-icon>
<dn-icon {...opt7}></dn-icon>
<dn-icon {...opt8}></dn-icon>
<dn-icon {...opt9}></dn-icon>
<dn-icon {...opt10}></dn-icon>
<dn-icon {...opt11}></dn-icon>
<dn-icon {...opt12}></dn-icon>
</div>
}
}
}
}
},
},
});
}
function initFormOptions() {
formOptions.value = createFormOptions();
return {
formOptions,
formRef
};
}
export default defineComponent({
setup() {
return {
...initFormOptions()
};
}
});
</script>IconGroup API
| PropsName | Description | Type | Default |
|---|---|---|---|
key | 字段名称子组件column配置 | json | |
| └ title | 标题 | string | |
| └ type | buttonGroup | string | |
| └ form | 表单栏位配置 | json | |
| └└ col | el-col配置，参考原生组件 | json | |
| └└ component | 原生组件属性 | json | |
└└└ key | 参考原生el组件 | ||
| └└ props | 组件属性 | json | |
| └└└ slots | 槽位 | object | |
| └└└└ default | 默认槽位，返回jsx组件 | func | |
└└└└└ icon | 返回icon组件 | object | |
└└└└└ onClick | 点击图标Click | func | |
| └└ order | 排序 | number | |
| └└ show | 是否显示 | boolean | |
| └└ blank | 是否空占位 | boolean | |
| └└ prefixRender | 组件左边render | ||
| └└ suffixRender | 组件右边render |