dream-vue-ui v0.2.3

快速上手

npm i dream-vue-ui

导入main.js

import Vue from 'vue';

import DreamUI from 'dream-vue-ui'

import 'dream-vue-ui/dist/dream-vue-ui.css'

import App from './App.vue';


Vue.use(DreamUI);


new Vue({

el: '#app',

render: h => h(App)

});

官方文档网站 ：后期上线

dream-vue-ui 设计文档

• dr-card 卡片

参数：

header参数:

代码：

// titleColor参数用于控制header的标题颜色，titleCenter参数用于控制header的展示位置
<dr-card  titleColor="#85c1e9" titleCenter="true"> 
    <div slot="header" >
       <dr-icon icon="shibai2"></dr-icon>
       标题
     </div>
    <div>
      主体内容
    </div>
  </dr-card>

• dr-button 按钮

  参数：

  参数名称	说明	默认值	可选值	类型
  type	按钮样式	default	default / primary /success / info /warning / danger	string
  size	按钮尺寸	default	medium / small / mini	string
  round	是否启用圆形	false	————	boolean
  icon	按钮图标	null	————	string

  代码：

  <dr-button type="primary" size="small">按钮</dr-button>

• dr-icon icon图标

  参数：

  参数名称	说明	默认值	可选值	类型
  icon	icon图标的名称	————	————	string

  代码例子：

  <dr-icon icon="jiandu"></dr-icon>

• dr-link 文字链接

  参数：

  参数名称	说明	默认值	可选值	类型
  type	类型	default	primary / success / warning / danger / info	string
  disabled	是否禁用状态	false	————————	boolean
  icon	图标名称	————	————————	string
  underline	是否禁止下划线	false	————————	boolean
  href	原生 href 属性	————	————————	string

  代码：

  <dr-link type="success" icon="jiandu">文字链接</dr-link>

• dr-dialog提示框

  参数：

  参数名称	说明	默认值	可选值	类型
  title	提示框头部标题	"提示"	——————	string
  backgroundColor	提示框背景颜色	#fff	——————	string
  borderColor	提示框边框颜色	#dddfe6	——————	string
  enterAnimation	入场动画	bounceInDown	bounce / fadeInDown / bounceInUp	string
  leaveAnimation	出场动画	bounceOut	bounceOutDown / fadeOut / fadeOutUp	string
  titleIcon	标题icon图标	null	——————	string
  titleCenter	标题是否居中	false	false / true	boolean
  show.sync	是否显示提示框	false	false / true	boolean

  代码：

  <dr-dialog :show.sync="show" enterAnimation="fadeInDown" leaveAnimation="fadeOutUp" >
        文本
      </dr-dialog>

打赏

开发不容易