action sheet

components.json

@@ -24,5 +24,6 @@
   "step": "./packages/step/index.js",
   "image-preview": "./packages/image-preview/index.js",
   "col": "./packages/col/index.js",
-  "row": "./packages/row/index.js"
+  "row": "./packages/row/index.js",
+  "actionsheet": "./packages/actionsheet/index.js"
 }

packages/actionsheet/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/actionsheet/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/actionsheet/index.js

@@ -0,0 +1,3 @@
+import ActionSheet from './src/actionsheet';
+
+export default ActionSheet;

packages/actionsheet/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/actionsheet/src/actionsheet.vue

@@ -0,0 +1,70 @@
+<template>
+  <transition name="actionsheet-float">
+    <div class="zan-actionsheet" v-show="currentValue">
+      <div class="zan-actionsheet-header" v-if="title">
+        <h3 v-text="title"></h3>
+      </div>
+      <slot>
+        <ul class="zan-actionsheet-list">
+          <li v-for="item in actions" class="zan-actionsheet-item" :class="item.className" @click.stop="handleItemClick(item)">{{ item.name }}</li>
+        </ul>
+        <a class="zan-actionsheet-button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'src/mixins/popup';
+
+export default {
+  name: 'zan-actionsheet',
+
+  mixins: [Popup],
+
+  props: {
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    title: String,
+    cancelText: String,
+    overlay: {
+      default: true
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      currentValue: false
+    };
+  },
+
+  watch: {
+    currentValue(val) {
+      this.$emit('input', val);
+    },
+
+    value(val) {
+      this.currentValue = val;
+    }
+  },
+
+  mounted() {
+    if (this.value) {
+      this.currentValue = true;
+      this.open();
+    }
+  },
+
+  methods: {
+    handleItemClick(item) {
+
+    }
+  }
+};
+</script>

packages/field/src/field.vue

@@ -31,13 +31,13 @@
 </template>
 
 <script>
-import zCell from 'packages/cell';
+import zanCell from 'packages/cell';
 
 export default {
   name: 'zan-field',
 
   components: {
-    zCell
+    zanCell
   },
 
   props: {

packages/image-preview/src/image-preview.vue

@@ -47,16 +47,16 @@ export default {
      * 根据屏幕自适应显示最长边
      */
     computeImageStyle() {
-      let previewSize = this.$refs.previewContainer.getBoundingClientRect();
+      const previewSize = this.$refs.previewContainer.getBoundingClientRect();
-      let img = new Image();
+      const img = new Image();
-      let _this = this;
+      const _this = this;
 
       img.onload = function() {
-        let imgRatio = parseFloat(this.width / this.height);
+        const imgRatio = parseFloat(this.width / this.height);
-        let previewRatio = parseFloat(previewSize.width / previewSize.height);
+        const previewRatio = parseFloat(previewSize.width / previewSize.height);
 
         if (previewRatio <= imgRatio) {
-          let top = (previewSize.height - parseInt(previewSize.width / imgRatio, 10)) / 2;
+          const top = (previewSize.height - parseInt(previewSize.width / imgRatio, 10)) / 2;
           _this.imageStyle = {
             width: '100%',
             height: 'auto',

packages/zanui-css/src/actionsheet.css

@@ -0,0 +1,9 @@
+@component-namespace zan {
+  @b actionsheet {
+  }
+}
+
+.actionsheet-float-bottom-enter,
+.actionsheet-float-bottom-leave-active {
+  transform: translate3d(-50%, 100%, 0);
+}

packages/zanui-css/src/index.css

@@ -21,3 +21,4 @@
 @import './col.css';
 @import './row.css';
 @import './image_preview.css';
+@import './actionsheet.css';