移除fastclick和添加模态框左右弹出效果

package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "autosize": "^3.0.20",
     "better-scroll": "^1.10.3",
-    "fastclick": "https://hel.hand-china.com/easyUI/fastclick.git",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vux": "^2.9.2",

packages/common/scripts/hlsPopup.js

@@ -18,7 +18,6 @@ Vue.use(ShowPicture)
 Vue.use(Select)
 Vue.use(NumberKeyboard)
 Vue.use(Notify)
-Vue.use(HlsModal)
 // Vue.prototype.HlsModal = window.HlsModal = HlsModal
 
 export default {

packages/common/styles/ionic.less

@@ -4893,7 +4893,7 @@ input:checked + .checkbox-icon:before {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 10;
+  z-index: 25;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .1);
@@ -4907,7 +4907,7 @@ input:checked + .checkbox-icon:before {
   display: block;
   position: absolute;
   top: 0;
-  z-index: 10;
+  z-index: 30;
   overflow: hidden;
   min-height: 100%;
   width: 100%;
@@ -4928,36 +4928,6 @@ input:checked + .checkbox-icon:before {
     bottom: 0;
   }
 
-  .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) {
-    height: 1.76rem;
-  }
-
-  .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) > * {
-    margin-top: 0;
-  }
-
-  .platform-ios.platform-cordova .modal-wrapper .modal .tabs-top > .tabs,
-  .platform-ios.platform-cordova .modal-wrapper .modal .tabs.tabs-top {
-    top: 1.76rem;
-  }
-
-  .platform-ios.platform-cordova .modal-wrapper .modal .has-header,
-  .platform-ios.platform-cordova .modal-wrapper .modal .bar-subheader {
-    top: 1.76rem;
-  }
-
-  .platform-ios.platform-cordova .modal-wrapper .modal .has-subheader {
-    top: 3.52rem;
-  }
-
-  .platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-tabs-top {
-    top: 3.72rem;
-  }
-
-  .platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-subheader.has-tabs-top {
-    top: 5.48rem;
-  }
-
   .modal-backdrop-bg {
     -webkit-transition: opacity 300ms ease-in-out;
     transition: opacity 300ms ease-in-out;
@@ -5311,6 +5281,69 @@ input:checked + .checkbox-icon:before {
   transition: all ease-in-out 250ms;
 }
 
+.slide-in-down {
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+}
+
+.slide-in-down.ng-enter,
+.slide-in-down > .ng-enter {
+  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
+  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
+}
+
+.slide-in-down.ng-enter-active,
+.slide-in-down > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.slide-in-down.ng-leave,
+.slide-in-down > .ng-leave {
+  -webkit-transition: all ease-in-out 250ms;
+  transition: all ease-in-out 250ms;
+}
+
+.slide-in-right {
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+
+.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
+  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
+  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
+}
+
+.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
+  -webkit-transition: all ease-in-out 250ms;
+  transition: all ease-in-out 250ms;
+}
+
+.slide-in-left {
+  -webkit-transform: translateX(200%);
+  transform: translateX(200%);
+}
+
+.slide-in-left.ng-enter, .slide-in-left > .ng-enter {
+  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
+  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
+}
+
+.slide-in-left.ng-enter-active, .slide-in-left > .ng-enter-active {
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.slide-in-left.ng-leave, .slide-in-left > .ng-leave {
+  -webkit-transition: all ease-in-out 250ms;
+  transition: all ease-in-out 250ms;
+}
+
 @-webkit-keyframes scaleOut {
   from {
     -webkit-transform: scale(1);

packages/components/ListItem/Item.vue

@@ -21,7 +21,7 @@
       <div v-if="showContent" :style="{'min-height':minHeight,'flex':proportion[1] }" class="add-content">
         <slot name="content"/>
         <slot name="right-icon"/>
-        <img v-if="showArrow" :src="rightIcon" class="right-icon" style="height: 0.2rem">
+        <img v-if="showArrow" :src="rightIcon" class="right-icon">
       </div>
       <slot/>
     </div>
@@ -65,7 +65,7 @@ export default {
     },
     showFocusBorder: {
       type: Boolean,
-      default: true,
+      default: false,
     },
   },
   data () {
@@ -97,8 +97,9 @@ export default {
     },
     focusin () {
       let vm = this
+      let showFocus = vm.$parent.showFocusBorder ? vm.$parent.showFocusBorder : vm.showFocusBorder
       vm.focus = 'focus'
-      if (vm.showFocusBorder) {
+      if (showFocus) {
         vm.focusBorder = 'focus-border'
       }
     },
@@ -124,7 +125,6 @@ export default {
 </script>
 
 <style lang="less">
-  @import "../../common/styles/variables";
   .hls-item {
     //height: 100px;
     width: 100%;
@@ -224,6 +224,7 @@ export default {
         //右侧图标
         .right-icon {
           margin-left: 5px;
+          height: 0.2rem;
         }
 
         //toggle

packages/components/ListItem/ListItem.vue

@@ -21,6 +21,10 @@ export default {
       type: String,
       default: '',
     },
+    showFocusBorder: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {}

packages/components/Modal/Modal.vue

@@ -3,8 +3,8 @@
   <div v-show="showModal" :class="active" class="modal-backdrop" @touchstart="hideModal">
     <div class="modal-backdrop-bg"/>
     <div
-      :class="[modalClass,cusClass]"
-      class="modal slide-in-up"
+      :class="[modalClass,transition]"
+      class="modal"
       @touchstart="start"
       @mousedown="start">
       <slot/>
@@ -19,7 +19,7 @@ export default {
     value: Boolean, // eslint-disable-line
     position: {
       type: String,
-      default: 'bottom',
+      default: 'top',
     },
     cusClass: {
       type: String,
@@ -34,7 +34,12 @@ export default {
   },
   computed: {
     transition () {
-      return this.position === 'bottom' ? 'slide-in-up' : 'slide-in-down'
+      return {
+        'slide-in-up': this.position === 'top',
+        'slide-in-down': this.position === 'bottom',
+        'slide-in-left': this.position === 'left',
+        'slide-in-right': this.position === 'right',
+      }
     },
     active () {
       return this.showModal ? 'active' : 'hide'
@@ -59,7 +64,7 @@ export default {
         this.state = 2
         setTimeout(() => {
         }, 400)
-      }, 50)
+      }, 100)
     },
     showModal (val) {
       // 标签用法时需要发射一个input事件，修改v-model绑定的属性值

src/main.js

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import FastClick from 'fastclick'
+// import FastClick from 'fastclick'
 import axios from 'axios'
 import App from './App'
 import router from './router/index'
@@ -89,7 +89,7 @@ let hlsExit = function () {
 }
 Vue.prototype.$hlsExit = hlsExit
 
-FastClick.attach(document.body)
+// FastClick.attach(document.body)
 
 Vue.config.productionTip = false
 

src/pages/home.vue

@@ -8,11 +8,11 @@
     </h-header>
     <s-tab>
       <tab-item>Vue</tab-item>
-      <tab-item>APP</tab-item>
+      <tab-item @click.native="showModal = !showModal">APP</tab-item>
     </s-tab>
     <h-content >
-      <list-item>
-        <item>
+      <list-item :show-focus-border="true">
+        <item :show-arrow="true" :arrow-right="arrarRight">
           <section slot="name">姓名</section>
           <input slot="content" type="text">
         </item>
@@ -76,6 +76,9 @@
     </s-tab> -->
     <!-- <div style="height: 40px;"/> -->
     <bottom-tab/>
+    <h-modal v-model="showModal" position="left">
+      <div>123</div>
+    </h-modal>
   </h-view>
 </template>
 
@@ -83,6 +86,7 @@
 export default {
   data () {
     return {
+      arrarRight: require('../assets/image/right-arrow@2x.png'),
       userImg: window.localStorage.userImg || '',
       message: [{
         'isFromeMe': false,
@@ -93,6 +97,7 @@ export default {
       },
       autosize: true,
       height: '',
+      showModal: false,
     }
   },
   watch: {},
@@ -193,6 +198,9 @@ export default {
      .h-bottom-tab{
      box-shadow: none;
     }
+    .modal{
+      left:50%
+    }
     .content {
       background-color: #eeeeee;
       //border: 1px solid red;