Merge pull request #4 from iview/dewyzee/dev

add new components

Author: Dewyzee

build/README.md

@@ -4,18 +4,19 @@
 
 ## 项目目录
 
-|—— assets // 项目静态资源
-|—— build
-|  ├── template // 快速创建目录模板
-|  ├── util // 构建公共方法
-|  ├── build-dev.js // 构建dev模式
-|  ├── build-prod.js // 构建产出模式
-|—— example // 示例目录
-|—— src
-|  ├── components 组件目录  
-|  ├── index.js // 入口文件
+|-- assets // 项目静态资源
+|-- build
+|  |-- template // 快速创建目录模板
+|  |-- util // 构建公共方法
+|  |-- build-dev.js // 构建dev模式
+|  |-- build-prod.js // 构建产出模式
+|-- example // 示例目录
+|-- src
+|  |-- components 组件目录  
+|  |-- index.js // 入口文件
 |
-|—— ...
+|-- ...
+
 
 ## 组件开发说明
 

src/components/cell-group/cell-group.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <div class="i-class i-cell-group">
+      <slot></slot>
+    </div>
+  </div>
+</template>

src/components/cell-group/index.js

@@ -0,0 +1,3 @@
+import cellGroup from 'cell-group.vue'
+
+export default cellGroup

src/components/cell-group/style/cell-group.less

@@ -0,0 +1,2 @@
+@import '../../common/_base.less';
+@import '../../common/_mixins.less';

src/components/cell-group/style/index.js

@@ -0,0 +1 @@
+import './cell-group.less'

src/components/cell/cell.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div @click="handleTap" class="i-class i-cell">
+      <div class="i-cell-icon">
+        <slot name="icon"></slot>
+      </div>
+      <div class="i-cell-bd">
+        <p v-if="title" class="i-cell-text">{{ title }}</p>
+        <p v-if="label" class="i-cell-desc">{{ label }}</p>
+        <slot></slot>
+      </div>
+      <div @click.capture="navigateTo" class="i-cell-ft">
+        <div v-if="value">{{ value }}</div>
+        <div v-else="">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 左侧标题
+    title: {
+      type: String
+    },
+    // 标题下方的描述信息
+    label: {
+      type: String
+    },
+    // 右侧内容
+    value: {
+      type: String
+    },
+    // 只有点击 footer 区域才触发 tab 事件
+    onlyTapFooter: {
+      type: Boolean
+    },
+    // 是否展示右侧箭头并开启尝试以 url 跳转
+    isLink: {
+      type: null,
+      value: ''
+    },
+    // 链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch
+    linkType: {
+      type: String,
+      value: 'navigateTo'
+    },
+    url: {
+      type: String,
+      value: ''
+    }
+  }
+}
+</script>

src/components/cell/index.js

@@ -0,0 +1,3 @@
+import cell from 'cell.vue'
+
+export default cell

src/components/cell/style/cell.less

@@ -0,0 +1,68 @@
+@import '../../common/_base.less';
+@import '../../common/_mixins.less';
+
+.i-cell {
+  position: relative;
+  padding: 12px 15px;
+  display: flex;
+  background: #fff;
+  align-items: center;
+  line-height: 1.4;
+  font-size: @size-font-base;
+  overflow: hidden;
+
+  &::after{
+    .hairline();
+    border-bottom-width: 1px;
+    left: 15px;
+    right: 0;
+  }
+  &-last::after{
+    display: none;
+  }
+
+  &-icon{
+    margin-right: 5px;
+    &:empty{
+      display: none
+    }
+  }
+
+  &-bd{
+      flex: 1;
+  }
+
+  &-text{
+    line-height: 24px;
+    font-size: @size-font-base;
+  }
+
+  &-desc{
+    line-height: 1.2;
+    font-size: @size-font-small;
+    color: @subsidiary-color;
+  }
+
+  &-ft{
+    position: relative;
+    text-align: right;
+    color: @text-color;
+  }
+
+  &-access &-ft{
+    padding-right: 13px;
+    &::after{
+      content: " ";
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      position: absolute;
+      top: 50%;
+      right: 2px;
+      border-width: 2px 2px 0 0;
+      border-color: @border-color-base;
+      border-style: solid;
+      transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+    }
+  }
+}

src/components/cell/style/index.js

@@ -0,0 +1 @@
+import './cell.less'

src/components/panel/index.js

@@ -0,0 +1,3 @@
+import panel from 'panel.vue'
+
+export default panel