ds-app-ui v2.0.40

数说风格风格统一

项目说明

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一致

  		```bash
  			<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>
  		```

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

  		```bash
  			<el-input class="error"></el-input>
  		```
  	- 不可编辑
  		```bash
  			<el-input :disabled="true"></el-input>
  		```
  	- 密码
  		```bash
  			<el-input type="password" class="password"></el-input>
  		```
  	- 大文本编辑框
  		```bash
  			<el-input type="textarea"></el-input>
  		```

• 标签 - 选中状态

  		```html
  			<el-tag :closable="true" :type="selected">
            已选标签
        </el-tag>
  		```
  	- 快速选中标签框
  		```html
  			<div class="el-tag-quick"><!-- 这是你的N个标签 --></div>
  		```

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

  		```html
  		<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手动添加

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

• input加icon

翻页(分页)控件

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