ds-app-ui

数说风格风格统一

项目说明

elementUi风格统一，发布到npm

本地开发

$ npm install ds-app-ui

引入方式

• 在入口文件(一般是main.js)引入

import 'ds-app-ui';

打包&发布

• 先npm run build再npm run demo发布
• host配置：datastory3.com.cn 172.18.5.53

网页展示结构

为了通用UI简单明了，每个UI块应当按照这三种结构，详情见网页

• 展示效果
• 使用情况（用表格展示，一目了然）
• 引用代码（v-marked高亮代码）

代码编辑

采用highlight.js高亮代码，在pre和code标签里面书写代码，在div里添加指令v-marked,如下

<div v-marked>
  <pre>
    <code>
        {
          path:"/index",
          component:resolve=>{
              require(['app/index'],resolve)
          }
        },
    </code>  
  </pre>
</div>

标准的表单组件样式，通过在<el-form>标签添加ds-form类实现

拓展

表单

• 表单排行list
  • 将label的宽度设置和margin-left一致

    	<div class="el-form ds-form">
    		<el-col class="el-form-item">
    			<label class="el-form-item__label" style="width:120px;">
    				<span>*</span>名称
    			</label>
    			<div class="el-form-item__content" style="margin-left:120px;">
    				<el-input></el-input>
    			</div>
    		</el-col>
    	</div>
    

• 输入框
  • 错误，添加了错误提示：

    	<el-input class="error"></el-input>
    

  • 不可编辑

    	<el-input :disabled="true"></el-input>
    

  • 密码

    	<el-input type="password" class="password"></el-input>
    

  • 大文本编辑框

    	<el-input type="textarea"></el-input>
    

• 标签
  • 选中状态

    	<el-tag :closable="true" :type="selected">
            已选标签
        </el-tag>
    

  • 快速选中标签框

    	<div class="el-tag-quick"><!-- 这是你的N个标签 --></div>
    

• 滑动选择器。
  • 范围选择

    <el-slider class="el-slider--range"></el-slider>
    

  • 禁用

el-button颜色搭配

• type = "green"
• type = "blue"
• type = "text"
• 大型(size = "large")、小型(size="small")、正常的使用默认即可，无须设置size

拓展icon图标

• ds设计的icon，已配置在[http://172.18.5.53/#/icon]
• 要在button按钮里面加icon手动添加

  <button type="button" class="el-button el-button--text">
  	<i class="ds-icon-xxx"></i>
  </button>
  

• input加icon

翻页(分页)控件

• 上边距为16px
• 因为很多分页都在最底部，而底部离主体内容有16px的间距，所以下边距为0