diff --git a/examples/router/routes.js b/examples/router/routes.js
index 30c8a2a..8bef3cf 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -48,6 +48,12 @@ const _components = [
         meta: { title: 'Tag 标签' },
         component: () => import('@/views/docs/component/tag.md'),
       },
+      {
+        path: 'popup',
+        name: 'popup',
+        meta: { title: 'Popup 弹出框' },
+        component: () => import('@/views/docs/component/popup.md'),
+      },
     ]
   },
   {
diff --git a/examples/views/docs/component/popup.md b/examples/views/docs/component/popup.md
new file mode 100644
index 0000000..0cc7e0c
--- /dev/null
+++ b/examples/views/docs/component/popup.md
@@ -0,0 +1,40 @@
+# Popup 弹出框
+
+参考 <a href="https://didi.github.io/mand-mobile/#/zh-CN/docs/components/feedback/popup" target="_blank">Mand Mobile - Popup</a>
+
+## 基础用法
+
+弹出框说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div class="popup-demo">
+    <zui-button @click="popupVisible = true">普通按钮</zui-button>
+    <zui-popup v-model="popupVisible">
+      弹出框内容
+    </zui-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      popupVisible: false,
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.popup-demo {
+  height: 20vh;
+  width: 400px;
+  position: relative;
+}
+</style>
+```
+
+:::
\ No newline at end of file
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index ffc7db4..0c99de1 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <i class="zui-icon" :class="classRender" :style="styleRender">
+  <i class="zui-icon" :class="classRender" :style="styleRender" @click="onClick">
     <div v-if="info" class="zui-info">{{ info }}</div>
   </i>
 </template>
@@ -36,6 +36,11 @@ export default {
         color: this.color
       }
     },
+    onClick: function() {
+      if (this.$listeners['click']) {
+        this.$emit('click');
+      }
+    }
   }
 }
 </script>
diff --git a/packages/popup/index.css b/packages/popup/index.css
new file mode 100644
index 0000000..25d6a36
--- /dev/null
+++ b/packages/popup/index.css
@@ -0,0 +1,333 @@
+.zui-popup {
+  position: absolute;
+  display: flex;
+  pointer-events: none;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.zui-popup.center {
+  align-items: center;
+  justify-content: center;
+}
+.zui-popup.top {
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.zui-popup.top .zui-popup-box {
+  width: 100%;
+}
+.zui-popup.bottom {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.zui-popup.bottom .zui-popup-box {
+  width: 100%;
+}
+.zui-popup.left {
+  justify-content: flex-start;
+}
+.zui-popup.left .zui-popup-box {
+  height: 100%;
+}
+.zui-popup.right {
+  justify-content: flex-end;
+}
+.zui-popup.right .zui-popup-box {
+  height: 100%;
+}
+.zui-popup.inner-popup .zui-popup-box {
+  background-color: #fff;
+  border-radius: 4px 4px 0 0;
+}
+.zui-popup.large-radius.inner-popup .zui-popup-box {
+  border-radius: 20px 20px 0 0;
+}
+.zui-popup-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.zui-popup-box {
+  position: relative;
+  pointer-events: auto;
+  z-index: 2;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}
+.zui-mask-fade-enter,
+.zui-mask-fade-leave-to {
+  opacity: 0.01;
+}
+.zui-mask-fade-enter-active,
+.zui-mask-fade-leave-active {
+  transition: opacity 250ms;
+}
+
+.zui-bounce-enter-active {
+  animation: bounce-in 300ms linear;
+}
+.zui-bounce-leave-active {
+  animation: zoom-out 250ms linear;
+}
+.zui-zoom-enter,
+.zui-zoom-leave-to {
+  opacity: 0.01;
+  transform: scale(0.75);
+}
+.zui-zoom-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-zoom-leave-active {
+  transition: all 250ms linear;
+}
+.zui-punch-enter,
+.zui-punch-leave-to {
+  opacity: 0.01;
+  transform: scale(1.35);
+}
+.zui-punch-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-punch-leave-active {
+  transition: all 250ms linear;
+}
+.zui-slide-up-enter,
+.zui-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+.zui-slide-up-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-slide-up-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-slide-right-enter,
+.zui-slide-right-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+.zui-slide-right-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-slide-right-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-slide-left-enter,
+.zui-slide-left-leave-to {
+  transform: translate3d(100%, 0, 0);
+}
+.zui-slide-left-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-slide-left-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-slide-down-enter,
+.zui-slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+.zui-slide-down-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-slide-down-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.zui-fade-enter,
+.zui-fade-leave-to {
+  opacity: 0.01;
+}
+.zui-fade-enter-active {
+  transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-fade-leave-active {
+  transition: opacity 250ms linear;
+}
+.zui-fade-up-enter,
+.zui-fade-up-leave-to {
+  opacity: 0.01;
+  transform: translate3d(0, 20%, 0);
+}
+.zui-fade-up-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-fade-up-leave-active {
+  transition: all 250ms linear;
+}
+.zui-fade-down-enter,
+.zui-fade-down-leave-to {
+  opacity: 0.01;
+  transform: translate3d(0, -20%, 0);
+}
+.zui-fade-down-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-fade-down-leave-active {
+  transition: all 250ms linear;
+}
+.zui-fade-right-enter,
+.zui-fade-right-leave-to {
+  opacity: 0.01;
+  transform: translate3d(-20%, 0, 0);
+}
+.zui-fade-right-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-fade-right-leave-active {
+  transition: all 250ms linear;
+}
+.zui-fade-left-enter,
+.zui-fade-left-leave-to {
+  opacity: 0.01;
+  transform: translate3d(20%, 0, 0);
+}
+.zui-fade-left-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-fade-left-leave-active {
+  transition: all 250ms linear;
+}
+.zui-fly-enter-active {
+  animation: fly-in 600ms;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.zui-fly-leave-active {
+  animation: zoom-out 250ms;
+}
+@-moz-keyframes fly-in {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5) translate3d(0, 50px, 0);
+  }
+  45% {
+    opacity: 1;
+    transform: scale(1.05) translate3d(0, -50px, 0);
+  }
+  100% {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+@-webkit-keyframes fly-in {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5) translate3d(0, 50px, 0);
+  }
+  45% {
+    opacity: 1;
+    transform: scale(1.05) translate3d(0, -50px, 0);
+  }
+  100% {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+@-o-keyframes fly-in {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5) translate3d(0, 50px, 0);
+  }
+  45% {
+    opacity: 1;
+    transform: scale(1.05) translate3d(0, -50px, 0);
+  }
+  100% {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+@keyframes fly-in {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5) translate3d(0, 50px, 0);
+  }
+  45% {
+    opacity: 1;
+    transform: scale(1.05) translate3d(0, -50px, 0);
+  }
+  100% {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+@-moz-keyframes bounce-in {
+  0% {
+    transform: scale(0.5);
+  }
+  45% {
+    transform: scale(1.05);
+  }
+  80% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes bounce-in {
+  0% {
+    transform: scale(0.5);
+  }
+  45% {
+    transform: scale(1.05);
+  }
+  80% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@-o-keyframes bounce-in {
+  0% {
+    transform: scale(0.5);
+  }
+  45% {
+    transform: scale(1.05);
+  }
+  80% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0.5);
+  }
+  45% {
+    transform: scale(1.05);
+  }
+  80% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@-moz-keyframes zoom-out {
+  to {
+    opacity: 0.01;
+    transform: scale(0.75);
+  }
+}
+@-webkit-keyframes zoom-out {
+  to {
+    opacity: 0.01;
+    transform: scale(0.75);
+  }
+}
+@-o-keyframes zoom-out {
+  to {
+    opacity: 0.01;
+    transform: scale(0.75);
+  }
+}
+@keyframes zoom-out {
+  to {
+    opacity: 0.01;
+    transform: scale(0.75);
+  }
+}
diff --git a/packages/popup/index.vue b/packages/popup/index.vue
new file mode 100644
index 0000000..aeed2e0
--- /dev/null
+++ b/packages/popup/index.vue
@@ -0,0 +1,227 @@
+<template>
+  <div
+    v-show="isPopupShow"
+    class="zui-popup"
+    :class="popupClassRender"
+  >
+    <transition name="zui-mask-fade">
+      <div
+        v-show="hasMask && isPopupBoxShow"
+        @click="$_onPopupMaskClick"
+        class="zui-popup-mask"
+      ></div>
+    </transition>
+    <zui-transition
+      :name="transition"
+      @before-enter="$_onPopupTransitionStart"
+      @before-leave="$_onPopupTransitionStart"
+      @after-enter="$_onPopupTransitionEnd"
+      @after-leave="$_onPopupTransitionEnd"
+    >
+      <div
+        v-show="isPopupBoxShow"
+        class="zui-popup-box"
+        :class="[transition]"
+      >
+        <slot></slot>
+      </div>
+    </zui-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  components: {
+    'zui-transition': {
+      name: 'zui-transition',
+      functional: true,
+      render: function(h, context) {
+        return h('transition', context.data, context.children);
+      },
+    },
+  },
+  props: {
+    position: {
+      type: String,
+      default: 'center',
+    },
+    transition: {
+      type: String,
+      default: function() {
+        switch (this.position) {
+          case 'bottom':
+            return 'md-slide-up'
+          /* istanbul ignore next */
+          case 'top':
+            return 'md-slide-down'
+          /* istanbul ignore next */
+          case 'left':
+            return 'md-slide-right'
+          /* istanbul ignore next */
+          case 'right':
+            return 'md-slide-left'
+          default:
+            return 'md-fade' // fade/fade-bounce/fade-slide/fade-zoom
+        }
+      },
+    },
+    preventScroll: {
+      type: Boolean,
+      default: false,
+    },
+    preventScrollExclude: {
+      type: [String, Function],
+      default: function() {
+        return ''
+      },
+    },
+    // Mixin Props
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    hasMask: {
+      type: Boolean,
+      default: true,
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: function() {
+    return {
+      // controle popup mask & popup box
+      isPopupShow: false,
+      // controle popup box
+      isPopupBoxShow: false,
+      // transtion lock
+      isAnimation: false,
+      largeRadius: false,
+    }
+  },
+  computed: {
+    popupClassRender: function() {
+      return [
+        this.hasMask ? 'with-mask' : '',
+        this.largeRadius ? 'large-radius' : '',
+        this.position
+      ]
+    }
+  },
+  watch: {
+    value: function(val) {
+      /* istanbul ignore next */
+      if (val) {
+        if (this.isAnimation) {
+          var self = this;
+          setTimeout(function() {
+            self.$_showPopupBox()
+          }, 50);
+        } else {
+          this.$_showPopupBox()
+        }
+      } else {
+        this.$_hidePopupBox()
+      }
+    },
+    preventScrollExclude: function(val, oldVal) {
+      // remove old listener before add
+      /* istanbul ignore next */
+      this.$_preventScrollExclude(false, oldVal)
+      /* istanbul ignore next */
+      this.$_preventScrollExclude(true, val)
+    },
+  },
+  mounted: function() {
+    this.value && this.$_showPopupBox()
+  },
+  methods: {
+    // MARK: private methods
+    $_showPopupBox: function() {
+      this.isPopupShow = true
+      this.isAnimation = true
+      // popup box enter the animation after popup show
+      this.isPopupBoxShow = true
+      /* istanbul ignore if */
+      if (window.process && window.process.env.NODE_ENV == 'test') {
+        this.$_onPopupTransitionStart()
+        this.$_onPopupTransitionEnd()
+      }
+      this.preventScroll && this.$_preventScroll(true)
+    },
+    $_hidePopupBox: function() {
+      this.isAnimation = true
+      this.isPopupBoxShow = false
+      this.preventScroll && this.$_preventScroll(false)
+      this.$emit('input', false)
+      /* istanbul ignore if */
+      if (window.process && window.process.env.NODE_ENV == 'test') {
+        this.$_onPopupTransitionStart()
+        this.$_onPopupTransitionEnd()
+      }
+    },
+    $_preventScroll: function(isBind) {
+      const handler = isBind ? 'addEventListener' : 'removeEventListener'
+      const masker = this.$el.querySelector('.md-popup-mask')
+      const boxer = this.$el.querySelector('.md-popup-box')
+      masker && masker[handler]('touchmove', this.$_preventDefault, false)
+      boxer && boxer[handler]('touchmove', this.$_preventDefault, false)
+      this.$_preventScrollExclude(isBind)
+    },
+    $_preventScrollExclude: function(isBind, preventScrollExclude) {
+      const handler = isBind ? 'addEventListener' : 'removeEventListener'
+      preventScrollExclude = preventScrollExclude || this.preventScrollExclude
+      const excluder =
+        preventScrollExclude && typeof preventScrollExclude == 'string'
+          ? this.$el.querySelector(preventScrollExclude)
+          : preventScrollExclude
+      excluder && excluder[handler]('touchmove', this.$_stopImmediatePropagation, false)
+    },
+    $_preventDefault: function(event) {
+      event.preventDefault()
+    },
+    $_stopImmediatePropagation: function(event) {
+      /* istanbul ignore next */
+      event.stopImmediatePropagation()
+    },
+    // MARK: event handler
+    $_onPopupTransitionStart: function() {
+      if (!this.isPopupBoxShow) {
+        this.$emit('beforeHide')
+        this.$emit('before-hide')
+      } else {
+        this.$emit('beforeShow')
+        this.$emit('before-show')
+      }
+    },
+    $_onPopupTransitionEnd: function() {
+      /* istanbul ignore next */
+      if (!this.isAnimation) {
+        return
+      }
+      /* istanbul ignore next */
+      if (!this.isPopupBoxShow) {
+        // popup hide after popup box finish animation
+        this.isPopupShow = false
+        this.$emit('hide')
+      } else {
+        this.$emit('show')
+      }
+      /* istanbul ignore next */
+      this.isAnimation = false
+    },
+    $_onPopupMaskClick: function() {
+      if (this.maskClosable) {
+        this.$_hidePopupBox()
+        this.$emit('maskClick')
+      }
+    },
+  },
+}
+</script>
+
+<style>
+@import "./index.css";
+</style>
\ No newline at end of file
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index c9abb70..4a4ed74 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="zui-tag">
+  <div class="zui-tag" @click="onClick">
     <template v-if="showQuarter">
       <div :class="computedClass">
         <div class="quarter-content">
@@ -69,7 +69,7 @@ export default {
   },
   mounted: function() {
     this.$nextTick(function() {
-      if (this.shape === "circle") {
+      if (this.shape == "circle") {
         var radius = this.$el.offsetHeight / 2;
         this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px");
         this.$set(this.sizeStyle, "paddingRight", radius / 2 + "px");
@@ -96,12 +96,12 @@ export default {
     },
     colorStyle: function() {
       var style = {};
-      if (this.type === "fill") {
+      if (this.type == "fill") {
         // eslint-disable-next-line
         this.fillColor && (style.background = this.fillColor);
       }
       if (this.fontColor) {
-        if (this.type === "ghost") {
+        if (this.type == "ghost") {
           style.borderColor = this.fontColor;
         }
         style.color = this.fontColor;
@@ -127,10 +127,10 @@ export default {
       };
     },
     showQuarter: function() {
-      return this.shape === "quarter";
+      return this.shape == "quarter";
     },
     showCoupon: function() {
-      return this.shape === "coupon";
+      return this.shape == "coupon";
     }
   },
   methods: {
@@ -139,6 +139,11 @@ export default {
       return str.replace(re, function($0, $1) {
         return $1.toUpperCase();
       });
+    },
+    onClick: function() {
+      if (this.$listeners['click']) {
+        this.$emit('click');
+      }
     }
   }
 };
--
libgit2 0.21.0