dk-plus

简体中文

English

简体中文

English

Appearance

目录

Button 按钮 ​

这是一个看起非常普通的按钮，但是它的功能却非常强大。

1.基础按钮 ​

type 按钮类型 type 设置 default | primary | success | info | warning | danger 默认:default

html
<Dk-Button> 默认</Dk-Button>
<Dk-Button type="primary">主要按钮</Dk-Button>
<Dk-Button type="success">成功按钮</Dk-Button>
<Dk-Button type="info">信息按钮</Dk-Button>
<Dk-Button type="warning">警告按钮</Dk-Button>
<Dk-Button type="danger">危险按钮</Dk-Button>
展开

2.圆形按钮 ​

circle 属性可以将按钮变成圆形按钮

html
<Dk-Button circle>范</Dk-Button>
<Dk-Button circle type="primary">先</Dk-Button>
<Dk-Button circle type="success">生</Dk-Button>
<Dk-Button circle type="info">英</Dk-Button>
<Dk-Button circle type="warning">杰</Dk-Button>
<Dk-Button circle type="danger">✌</Dk-Button>
展开

3.圆角按钮 ​

round 属性可以将按钮变成圆角风格的按钮 round 和 circle 不能同时使用

html
<dk-button round>默认按钮</dk-button>
<dk-button round type="primary">主要按钮</dk-button>
<dk-button round type="success">成功按钮</dk-button>
<dk-button round type="info">信息按钮</dk-button>
<dk-button round type="warning">警告按钮</dk-button>
<dk-button round type="danger">危险按钮</dk-button>
展开

4.带有阴影 ​

shadow 可以自定义按钮的阴影样式，可传入一个原生box-shadow 属性值

html
<dk-button 
  shadow="0 1px 10px 0 #f0f0f0"
  >
  默认按钮
</dk-button>
<dk-button 
  shadow="0 1px 10px 0 #409eff" 
  type="primary"
  >
  基础
</dk-button>
<dk-button 
  shadow="0 1px 10px 0 #67c23a" 
  type="success"
  >
  成功
</dk-button>
<dk-button 
  shadow="0 1px 10px 0 #909399" 
  type="info"
  >
  信息
  </dk-button>
<dk-button 
  shadow="0 1px 10px 0 #e6a23c" 
  type="warning"
  >
  警告
</dk-button>
<dk-button 
  shadow="0 1px 10px 0 #f56c6c" 
  type="danger"
  >
  危险
</dk-button>
展开

5.涟漪效果(不可和扩散效果联动因为太丑) ​

ripples 可以配置是否展示点击涟漪效果 false | true

ripples-bg-color 自定义涟漪背景色(支持16进制,支持rgb,支持rgba)

html
<dk-button ripples>默认</dk-button>
<dk-button type="primary" ripples>基础信息</dk-button>
<dk-button type="success" ripples>成功按钮</dk-button>
<dk-button type="info" ripples>信息按钮</dk-button>
<dk-button type="warning" ripples>警告按钮</dk-button>
<dk-button type="danger" ripples>危险按钮</dk-button>
<dk-button ripples type="primary" ripples-bg-color="red">
  自定义涟漪颜色
</dk-button>
展开

6.扩散效果(不可和涟漪效果联动因为太丑) ​

diffusion 可以配置是否展示点击扩散效果 false | true

diffusion-bg-color 自定义扩散效果背景色(支持16进制,支持rgb,支持rgba)

html
<dk-button diffusion type="primary">基础信息</dk-button>
<dk-button diffusion type="success">成功按钮</dk-button>
<dk-button diffusion type="info">信息按钮</dk-button>
<dk-button diffusion type="warning">警告按钮</dk-button>
<dk-button diffusion type="danger" >危险按钮</dk-button>
<dk-button diffusion type="success">默认按钮</dk-button>
<dk-button 
  diffusion 
  type="primary" 
  diffusion-bg-color="red"
  >
  自定扩散效果 颜色
</dk-button>
展开

7.禁用状态 ​

disabled 可以配置是否禁用按钮 默认为false

html
<Dk-Button disabled>默认</Dk-Button>
<Dk-Button type="primary" disabled>主要按钮</Dk-Button>
<Dk-Button type="success" disabled>成功按钮</Dk-Button>
<Dk-Button type="info" disabled>信息按钮</Dk-Button>
<Dk-Button type="warning" disabled>警告按钮</Dk-Button>
<Dk-Button type="danger" disabled>危险按钮</Dk-Button>
展开

8.不同尺寸 ​

size 可以配置按钮的大小 large | medium | small | mini

html
<Dk-Button size="large">默认</Dk-Button>
<Dk-Button type="primary" size="large">主要按钮</Dk-Button>
<Dk-Button type="success" size="medium">成功按钮</Dk-Button>
<Dk-Button type="info" size="small">信息按钮</Dk-Button>
<Dk-Button type="warning" size="mini">警告按钮</Dk-Button>
<Dk-Button type="danger" size="mini">危险按钮</Dk-Button>
展开

9.带有Icon的按钮 ​

icon 可以配置按钮的图标这个为左侧图标

afterIcon 可以配置按钮的右侧图标

1.文本图标
默认
2.A标签图标
https://dk-plus.com
3.块元素图标按钮
html
<Dk-Button size="large">默认</Dk-Button>
<dk-button 
  link 
  :href="'https://dk-plus.com'" 
  :icon="'IconShanchu1'" 
  :after-icon="'IconShanchu1'" 
  type="danger"
>
  https://dk-plus.com
</dk-button>
<dk-button :icon="'IconShanchu1'" type="default">default</dk-button>
展开

10.加载中状态 ​

loading 可以配置按钮的加载状态

加载中
默认https://m.baidu.com/
html
<dk-button loading> 加载中 </dk-button>
展开

11.个性按钮(示例) ​

1.BI缺角渐变按钮(BiCurvedA)
2.多重阴影按钮(multiple)
3.收缩动画按钮(stretchBtn)
4.闪亮 发光(shine)
5.银光倒影(SilverReflection)
6.扁平按钮(flatBtn)
7.双展开按钮(TurnOpen)
8.立体嵌入式按钮(stereoscopic)
9.双展开按钮2(TurnOpenBorder)
html
-----------------1.BI缺角渐变按钮(BiCurvedA)-----------------
<dk-button personality personality-type="BiCurvedA" personality-size="large">
  BI缺角渐变按钮(BiCurvedA)
</dk-button>
-----------------2.多重阴影按钮(multiple)-----------------
<dk-button personality personality-type="multiple" personality-size="large">
  多重阴影按钮(multiple)
</dk-button>
<dk-button
  personality
  personality-type="multiple"
  loading
  :personality-border-color="['red', 'red', 'red', 'red']"
  :personality-border-hove-color="['blue', 'blue', 'blue', 'blue']"
  personality-font-color="red"
  personality-box-shadow-hove="red 5px 5px, red 10px 10px,red 50px 50px"
>
  多重阴影按钮(multiple)
</dk-button>
-----------------3.收缩动画按钮(stretchBtn)-----------------
<dk-button personality personality-type="stretchBtn" personality-size="medium">
  基础信息(stretchBtn)
</dk-button>
-----------------4.闪亮 发光(shine)-----------------
<dk-button personality personality-type="shine" personality-size="medium">
  基础信息(shine)
</dk-button>
<dk-button
  personality
  personality-type="shine"
  personality-bg-color="#38ef7d"
  personality-bg-hove-color="red"
  personality-size="medium"
>
  自定义基础信息(shine)
</dk-button>
-----------------5.银光倒影(SilverReflection)-----------------
<dk-button
  personality
  personality-type="SilverReflection"
  personality-size="medium"
>
  银光倒影(SilverReflection)
</dk-button>
-----------------6.扁平按钮(flatBtn)-----------------
<dk-button personality personality-type="flatBtn" personality-size="medium">
  扁平按钮(flatBtn)
</dk-button>
-----------------7.双展开按钮(TurnOpen)-----------------
<dk-button personality personality-type="TurnOpen" personality-size="medium">
  双展开按钮(TurnOpen)
</dk-button>
-----------------9.立体嵌入式按钮(stereoscopic)-----------------
<dk-button
  personality
  personality-type="stereoscopic"
  personality-size="medium"
>
  立体嵌入式按钮(lightBtn)
</dk-button>
-----------------10.双展开按钮2(TurnOpenBorder)-----------------
<dk-button
  personality
  personality-type="TurnOpenBorder"
  personality-size="medium"
>
  双展开按钮2(TurnOpenBorder)
</dk-button>
展开

基础按钮属性(颜色支持:16进制,RGB,RGBA) ​

参数说明类型可选值默认值
link是否为A标签按钮boolertrue falsefalse
hrefA标签超链接 link=true 时生效string- -- -
targetA标签超链接 link=true 时生效string_blank _self _parent _top_blank
text是否为文本按钮boolertrue falsefalse
size按钮尺寸stringlarge medium small minilarge
type按钮的类型(不同类型对应不同的背景和字体颜色，非自定义按钮颜色时有效,A标签无效)dkPlusTypeprimary success info warning dangerprimary
fontSize按钮文字大小string/number- -- -
fontColor按钮的字体颜色(支持16进制 rgb rgba)string- -- -
bgColor按钮的背景颜色(支持16进制 rgb rgba)string- -- -
disabled按钮否禁用boolertrue falsefalse
textDecoration文本按钮中上下划线stringlineThrough overline underline- -
circle圆形按钮boolertrue falsefalse
shadow按钮阴影效果 例:shadow="0 1px 10px 0 自定义颜色(16进制,RGB,RGBA)"string- -- -
ripples涟漪效果boolertrue falsefalse
ripplesBgColor涟漪效果的自定义颜色(支持16进制 rgb rgba)string- -- -
diffusion扩散效果boolertrue falsefalse
diffusionBgColor扩散效果的自定义颜色(支持16进制 rgb rgba)string- -- -
round半圆形按钮boolertrue falsefalse
icon按钮前置图标stringiconType- -
afterIcon按钮后置图标stringiconType- -
loading加载中boolertrue falsefalse

个性按钮属性(颜色支持:16进制,RGB,RGBA) ​

参数说明类型可选值默认值
personality是否为个性按钮boolertrue falsefalse
personalityType个性按钮类型stringBiCurvedA multiple
stretchBtn shine
SilverReflection flatBtn
TurnOpen stereoscopic		- -
personalitySize按钮类型大小stringlarge medium small minilarge
personalityBorderColor个性按钮边框颜色string Arr[string]例:personality-border-color="['red', 'red', 'red', 'red']"- -
personalityBorderHoveColor个性按钮边框颜色悬停时string Arr[string]例::personality-border-hove-color="['blue', 'blue', 'blue', 'blue']"- -
personalityBgColor个性按钮背景颜色string例:personality-bg-color="#38ef7d"- -
personalityBgHoveColor个性按钮背景颜色悬停时string例: personality-bg-hove-color="red"- -
personalityFontColor个性按钮背字体颜色string例: personality-font-color="red"- -
personalityFontHoveColor个性按钮字体颜色悬停string例: personality-font-hove-color="red"- -
personalityBoxShadowBoxShadow配置string例: personality-box-shadow="red 5px 5px, red 10px 10px,red 50px 50px"- -
personalityBoxShadowHoveBoxShadow悬停配置string例: personality-box-shadow-hove="red 5px 5px, red 10px 10px,red 50px 50px"- -
personalityReflect倒影效果string例: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4))- -

Slots(插槽) ​

名称说明
iconicon图标前置
afterIconicon图标后置

Contributors ​