diff --git a/packages/overlay/index.js b/packages/overlay/index.js
new file mode 100644
index 000000000..e368e3c08
--- /dev/null
+++ b/packages/overlay/index.js
@@ -0,0 +1,36 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('overlay');
+
+export default sfc({
+  props: {
+    zIndex: Number,
+    visible: Boolean,
+    className: String,
+    customStyle: Object
+  },
+
+  render(h) {
+    const style = {
+      zIndex: this.zIndex,
+      ...this.customStyle
+    };
+
+    return (
+      <transition name="van-fade">
+        <div
+          v-show={this.visible}
+          style={style}
+          class={[bem(), this.className]}
+          onTouchmove={event => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+          onClick={event => {
+            this.$emit('click', event);
+          }}
+        />
+      </transition>
+    );
+  }
+});
diff --git a/packages/overlay/index.vue b/packages/overlay/index.vue
deleted file mode 100644
index 82ebb881e..000000000
--- a/packages/overlay/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <transition name="van-fade">
-    <div
-      v-show="visible"
-      class="van-overlay"
-      :class="className"
-      :style="style"
-      @touchmove.prevent.stop
-      @click="$emit('click', $event)"
-    />
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'overlay',
-
-  props: {
-    zIndex: Number,
-    visible: Boolean,
-    className: String,
-    customStyle: Object
-  },
-
-  computed: {
-    style() {
-      return {
-        zIndex: this.zIndex,
-        ...this.customStyle
-      };
-    }
-  }
-};
-</script>