From 01c7288c2f20a8d0bd9a0d3c8c915639588546a6 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Thu, 12 Mar 2020 18:53:10 +0800
Subject: [PATCH] [新增] 按钮、单元格

---
 examples/router/routes.js               |  6 ++++++
 examples/views/docs/component/button.md |  6 +++++-
 examples/views/docs/component/cell.md   | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 packages/button/index.css               |  3 +--
 packages/button/index.vue               | 30 +++++++++++++++++++++++++++++-
 packages/cell/index.css                 | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/cell/index.vue                 | 44 ++++++++++++++++++++++++++++++++++++++++++++
 packages/index.js                       | 10 ++++++----
 8 files changed, 195 insertions(+), 8 deletions(-)
 create mode 100644 examples/views/docs/component/cell.md
 create mode 100644 packages/cell/index.css
 create mode 100644 packages/cell/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index 0e86c34..c32858f 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -30,6 +30,12 @@ const _components = [
         meta: { title: 'Button 按钮' },
         component: () => import('@/views/docs/component/button.md'),
       },
+      {
+        path: 'cell',
+        name: 'cell',
+        meta: { title: 'Cell 单元格' },
+        component: () => import('@/views/docs/component/cell.md'),
+      },
     ]
   },
   {
diff --git a/examples/views/docs/component/button.md b/examples/views/docs/component/button.md
index e2bc94e..09d5a24 100644
--- a/examples/views/docs/component/button.md
+++ b/examples/views/docs/component/button.md
@@ -10,7 +10,11 @@
 
 ```html
 <template>
-  <zui-button>按钮</zui-button>
+  <div>
+    <zui-button>普通按钮</zui-button>
+    <zui-button round>圆角按钮</zui-button>
+    <zui-button rect>矩形按钮</zui-button>
+  </div>
 </template>
 
 <script>
diff --git a/examples/views/docs/component/cell.md b/examples/views/docs/component/cell.md
new file mode 100644
index 0000000..7a889c3
--- /dev/null
+++ b/examples/views/docs/component/cell.md
@@ -0,0 +1,46 @@
+# Cell 单元格
+
+单元格
+
+## 基础用法
+
+单元格说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div class="list">
+    <zui-cell title="单元格" value="内容"></zui-cell>
+    <zui-cell title="可点击" value="内容" is-link></zui-cell>
+    <zui-cell>
+      <div slot="title" class="aui-list-item-title aui-font-size-16">
+        开启微信通知
+        <div class="aui-list-item-text aui-font-size-12">
+          关注微信公众号，可获取运单到账信息
+        </div>
+      </div>
+      <div slot="right">
+        icon
+      </div>
+    </zui-cell>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+}
+</script>
+
+<style>
+.list {
+  width: 300px;
+}
+</style>
+```
+
+:::
\ No newline at end of file
diff --git a/packages/button/index.css b/packages/button/index.css
index 95a5899..0a96898 100644
--- a/packages/button/index.css
+++ b/packages/button/index.css
@@ -1,9 +1,8 @@
 .zui-button {
   background-color: #FCD404;
   color: #FFF;
-  padding: 10px 20px;
+  padding: 5px 15px;
   font-size: 14px;
-  border-radius: 4px;
   cursor: pointer;
   transition: background-color 300ms;
 }
diff --git a/packages/button/index.vue b/packages/button/index.vue
index c972afd..663b043 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="zui-button" :style="{ display: block ? 'block' : 'inline-block' }">
+  <div class="zui-button" :style="style" @click="onClick">
     <slot></slot>
   </div>
 </template>
@@ -11,6 +11,34 @@ export default {
     block: {
       type: Boolean,
       default: false
+    },
+    round: Boolean,
+    rect: Boolean,
+  },
+  data: function() {
+    return {
+
+    };
+  },
+  computed: {
+    style: function() {
+      return { display: this.block ? 'block' : 'inline-block', borderRadius: this.borderRadius };
+    },
+    borderRadius: function() {
+      if (this.round) {
+        return '20px';
+      } else if (this.rect) {
+        return '0';
+      } else {
+        return '4px';
+      }
+    }
+  },
+  methods: {
+    onClick: function() {
+      if (this.$listeners['click']) {
+        this.$emit('click');
+      }
     }
   }
 }
diff --git a/packages/cell/index.css b/packages/cell/index.css
new file mode 100644
index 0000000..1b15480
--- /dev/null
+++ b/packages/cell/index.css
@@ -0,0 +1,58 @@
+.zui-cell {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 16px;
+  overflow: hidden;
+  color: #323233;
+  font-size: 14px;
+  line-height: 24px;
+  background-color: #fff;
+}
+
+.zui-cell--clickable {
+  cursor: pointer;
+}
+
+.zui-cell--clickable:active {
+  background-color: #f2f3f5;
+}
+
+.zui-cell__left-icon {
+  margin-right: 5px;
+}
+
+.zui-cell__right-icon {
+  margin-left: 5px;
+}
+
+.zui-cell:not(:last-child)::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  bottom: 0;
+  left: 16px;
+  border-bottom: 1px solid #ebedf0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.zui-cell__title, .zui-cell__value {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+.zui-cell__value {
+  position: relative;
+  overflow: hidden;
+  color: #969799;
+  text-align: right;
+  vertical-align: middle;
+  word-wrap: break-word;
+}
\ No newline at end of file
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
new file mode 100644
index 0000000..09c6ef6
--- /dev/null
+++ b/packages/cell/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="zui-cell" :class="classRender">
+    <div v-if="$slots.icon" class="zui-cell__left-icon">
+      <slot name="icon"></slot>
+    </div>
+    <div v-else-if="icon" class="zui-cell__left-icon"></div>
+    <div v-if="$slots.title" class="zui-cell__title">
+      <slot name="title"></slot>
+    </div>
+    <div v-else-if="title" class="zui-cell__title">{{ title }}</div>
+    <div v-if="$slots.default" class="zui-cell__value">
+      <slot></slot>
+    </div>
+    <div v-else-if="value" class="zui-cell__value">{{ value }}</div>
+    <div v-if="$slots.right" class="zui-cell__right-icon">
+      <slot name="right"></slot>
+    </div>
+    <div v-else-if="rightIcon" class="zui-cell__right-icon"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Cell',
+  props: {
+    icon: String,
+    title: String,
+    value: String,
+    isLink: Boolean,
+    rightIcon: String,
+  },
+  computed: {
+    classRender: function() {
+      return {
+        'zui-cell--clickable': this.isLink
+      }
+    }
+  }
+}
+</script>
+
+<style>
+@import "./index.css";
+</style>
\ No newline at end of file
diff --git a/packages/index.js b/packages/index.js
index 45b7a22..97a2cc4 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,8 +1,10 @@
-import Button from './button';
+let components = {};
 
-const components = {
-  Button,
-}
+const componentsFiles = require.context('./', true, /\.vue/);
+componentsFiles.keys().forEach(path => {
+  const component = componentsFiles(path);
+  components[component.default.name] = component.default;
+});
 
 // 给组件库配置install方法
 const install = function (Vue, opts = {}) {
--
libgit2 0.21.0