Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

src/packages/cell/cell.scss

@@ -2,7 +2,7 @@
     display: block;
     padding: 0 10px;
     text-decoration: none;
-    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none;
     &.nut-cell-link:active {
         background-color: $light-color !important;

src/packages/cell/cell.vue

@@ -1,18 +1,29 @@
 <template>
-    <a :class="['nut-cell',{'nut-cell-link':isLink}]" :href="linkUrl||'javascript:;'" :style="{'background-color':bgColor}">
-        <div class="nut-cell-box">
+    <a :class="['nut-cell',{'nut-cell-link':isLink}]" 
+    :href="linkUrl" 
+    :style="{'background-color':bgColor}"
+    :target="target"
+    @click="jumpPage">
+        <div class="nut-cell-box" @click="clickCell">
+            <slot name='avatar'></slot>
             <div class="nut-cell-left">
                 <span class="nut-cell-title"><slot name="title">{{title}}</slot></span>
                 <span class="nut-cell-sub-title"><slot name="sub-title">{{subTitle}}</slot></span>
             </div>
             <div class="nut-cell-right">
                 <span class="nut-cell-desc"><slot name="desc">{{desc}}</slot></span>
-                <span class="nut-cell-icon"><slot name="icon" v-if="showIcon"><img src="data:image/svg+xml,%3Csvg viewBox='0 0 5 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.215 9.757l3.577-4.17a.931.931 0 0 0 0-1.173L1.215.244a.642.642 0 0 0-1.007 0 .929.929 0 0 0 0 1.172L3.283 5 .208 8.584a.93.93 0 0 0 0 1.173.643.643 0 0 0 1.007 0z' fill='rgb(200,200,205)'/%3E%3C/svg%3E" alt=""></slot></span>
+                <span class="nut-cell-icon">
+                <slot name="icon" v-if="showIcon">
+                  <nut-icon type="right" size="15px" color="#848484"></nut-icon>
+                </slot>
+                </span>
             </div>
         </div>
     </a>
 </template>
 <script>
+import Icon from '../icon/icon.vue';
+
 export default {
   name: "nut-cell",
   props: {
@@ -34,20 +45,40 @@ export default {
     },
     linkUrl: {
       type: String,
-      default: null
+      default: "javascript:void(0)"
     },
     showIcon: {
       type: Boolean,
       default: false
     },
-    bgColor: {
-      type: String,
-      default: "#FFFFFF"
+    bgColor:{
+      type:String,
+      default:"#fff"
+    },
+    to:{
+      type:String,
+      default:""
+    },
+    target:{
+      type:String,
+      default:"_self"
     }
   },
+  components:{
+    'nut-icon':Icon
+  },
   data() {
     return {};
   },
-  methods: {}
+  methods:{
+    clickCell(){
+      this.$emit('click-cell')
+    },
+    jumpPage(){
+      if(!this.to) return false;
+      this.$router.push(this.to)
+    }
+  }
+
 };
 </script>

src/packages/cell/demo.vue

@@ -2,23 +2,24 @@
     <div>
         <h4>基本用法</h4>
         <div>
-            <nut-cell title="我是标题" desc="描述文字">
+            <nut-cell title="我是标题" desc="描述文字" @click-cell="clickEvnt" to="/index">
             </nut-cell>
-            <nut-cell :showIcon="true" title="我是标题" subTitle="我是副标题" desc="展示默认ICON">
-            </nut-cell>
-            <nut-cell :isLink="true" linkUrl="//m.jd.com" :showIcon="true" title="带链接">
+            <nut-cell :is-link="true" link-url="//m.jd.com" :show-icon="true" title="带链接" target="_target">
             </nut-cell>
         </div>
         <h4>通过Slot插槽分发内容</h4>
         <div>
-            <nut-cell :isLink="true" :showIcon="true">
+            <nut-cell :is-link="true" :show-icon="true">
                 <span slot="title">我是主标题</span>
                 <span slot="sub-title">我是副标，我们都是通过Slot分发的</span>
                 <span slot="desc">我是描述</span>
             </nut-cell>
-            <nut-cell :showIcon="true">
+            <nut-cell :show-icon="true">
                 <span slot="title">通过Slot自定义右侧ICON</span>
-                <img slot="icon" src="data:image/svg+xml, %3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 3.2c0-.7-.5-1.2-1.2-1.2-.3 0-.7.1-.9.4-2.4 2.5-6.2 6.8-7.7 8.5-.1.1-.2.2-.4 0L2.1 7.2c-.3-.3-.6-.4-.9-.4-.7 0-1.2.5-1.2 1.1 0 .3.1.6.3.8l.1.1 4.9 4.9c.8.8 1.6 0 2-.5 4.1-4.4 7.9-8.6 8.4-9.2.2-.3.3-.5.3-.8z' fill='rgb(115,115,131)'/%3E%3C/svg%3E" alt="">
+                <nut-icon type="tick" slot="icon" size="15px" color="#848484"></nut-icon>
+            </nut-cell>
+            <nut-cell :show-icon="true" title="我是标题" sub-title="我是副标题" desc="展示默认ICON">
+              <div slot="avatar"><nut-avatar></nut-avatar></div>
             </nut-cell>
         </div>
     </div>
@@ -27,13 +28,24 @@
 <script>
 import locale from '../../mixins/locale';
 import {locale as i18n} from '../../locales';
+import Icon from '../icon/icon.vue';
+import Avatar from '../avatar/avatar.vue';
+
 
 export default {
   mixins: [locale],
+  components:{
+    'nut-icon':Icon,
+    'nut-avatar':Avatar
+  },
   data() {
     return {};
   },
-  methods: {},
+  methods: {
+    clickEvnt(){
+      console.log('click cell');
+    }
+  },
   mounted() {
         
   }

src/packages/cell/doc.md

@@ -4,36 +4,40 @@
 
 ## 基本用法
 
+**to**有值的时候，跳转路由，**click-cell**点击cell触发事件
+
 ```html
-<nut-cell 
-  title = "左侧主标题" 
-  subTitle = "左侧副标题"
-  desc = "右侧描述文字"
-  :showIcon = "true"
->
+<nut-cell title="我是标题" desc="描述文字" @click-cell="clickEvnt" to="/index">
 </nut-cell>
 ```
 
-**isLink**值为true时有点击状态。
+设置**link-url**，点击可跳转。设置**target**，可以配置是否打开新的页面
+
+```html
+<nut-cell :is-link="true" link-url="//m.jd.com" :show-icon="true" title="带链接" target="_target">
+</nut-cell>
+```
+可以通过设置slot，设置cell的具体内容
 
 ```html
-<nut-cell 
-  :isLink = "true"
-  title = "左侧主标题"
-  subTitle = "左侧副标题"
-  desc="右侧描述文字">
+<nut-cell :is-link="true" :show-icon="true">
+    <span slot="title">我是主标题</span>
+    <span slot="sub-title">我是副标，我们都是通过Slot分发的</span>
+    <span slot="desc">我是描述</span>
 </nut-cell>
 ```
 
-设置**linkUrl**，点击可跳转。
+```html
+<nut-cell :show-icon="true">
+    <span slot="title">通过Slot自定义右侧ICON</span>
+    <nut-icon type="tick" slot="icon" size="15px" color="#848484"></nut-icon>
+</nut-cell>
+```
+**slot为avatar**可以添加左侧头像，具体组件配置请参考avatar组件
 
 ```html
-<nut-cell 
-  :isLink = "true"
-  linkUrl = http://m.jd.com"
-  title = "左侧主标题" 
-  subTitle = "左侧副标题"
-  desc="右侧描述文字">
+<nut-cell :show-icon="true" title="我是标题" sub-title="我是副标题" desc="展示默认ICON">
+  <div slot="avatar"><nut-avatar></nut-avatar></div>
 </nut-cell>
 ```
 
@@ -41,10 +45,19 @@
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| title | 左侧主slot | String | -
-| subTitle | 左侧副slot | String | -
-| desc | 右侧slot | String | -
-| isLink | 是否是链接 | Boolean | false
-| linkUrl | 链接Url | String | -
-| showIcon | 是否展示右侧箭头Icon | Boolean | false
-| bgColor | 背景颜色 | String | "#FFFFFF"
+| title | 左侧主标题 | String | -
+| sub-title | 左侧副标题 | String | -
+| desc | 右侧部分内容 | String | -
+| is-link | 是否是链接 | Boolean | false
+| link-url | 链接Url | String | -
+| show-icon | 是否展示右侧箭头Icon | Boolean | false
+| bg-color | 背景颜色 | String | "#FFFFFF"
+| to      |路由路径| String |-|
+| target |同`<a>`中target属性|String|_self|
+
+
+
+## Event
+|字段|说明|回调参数|
+|--|--|--|
+|click-cell|点击cell区域触发事件回调函数|无|