列表下拉组件 + debug全局input污染 --fix1

src/app-register.ts

@@ -103,5 +103,7 @@ export const AppComponents = {
         // 主题切换组件
         v.component('app-mob-select-changeTheme',() => import('@/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue'));
         v.component('app-list-index',() => import('@/components/app-list-index/app-list-index.vue'));
+        // 下拉列表组件
+        v.component('app-info-list',() => import('@/components/app-info-list/app-info-list.vue'));
     },
 };
\ No newline at end of file

src/components/app-info-list/app-info-list.less

+  .container{
+    width: 300px;
+    margin: 0 auto;
+    .content{  
+      .item{
+        width: 100%;
+        height:50px;
+        .header{
+        font-size: 12px;
+        color: rgb(192, 186, 186);
+        margin-bottom: 5px;
+        span:nth-child(2){
+          margin-left: 30px;
+        }
+        }
+        .footer{
+        font-size: 13px;
+        font-family:Helvetica;
+        color:#323538;
+        }
+        margin-bottom: 30px;
+      }
+      height: 200px;
+      margin: 0 auto;
+      overflow: hidden;
+      transition:height 3s ease;    
+    }
+    .button{
+      width: 300px;
+      height: 20px;
+      background-color: white;
+      color: #8CB4E2;
+      margin: 0 auto;
+      text-align: center;
+      margin-top: 15px;
+      padding-top: 5px;
+      border-top: 1px solid grey;
+    }
+  }

src/components/app-info-list/app-info-list.vue

+<template>
+  <div class="container">
+    <div class="content">   
+      <div v-for="item in infos" :key="item.id" class="item">
+            <div class="header"><span>{{item.time}}</span> <span>{{item.method}}</span></div>
+            <div class="footer">{{item.info}}</div>
+      </div>
+    </div>
+    <div class="button">
+      <div @click="loadMore"><span>{{text}}</span></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component({
+    components: {}
+})
+export default class AppInfoList extends Vue {
+
+    /**
+     * 传入数据
+     *
+     * @type {Array}
+     * @memberof AppInfoList
+     */
+    @Prop({default:()=>{ return [
+          {time:'2020-08-20',method:'手动变更',info:'胡维将状态由"实现中"修改为"已实现"；将完成时间由"空"修改为"2020-08-20 14：00：31"'},
+          {time:'2020-08-21',method:'自动变更',info:'胡维将状态由"实现中"修改为"已实现"；将完成时间由"空"修改为"2020-08-20 14：00：31"'},
+          {time:'2020-08-22',method:'自动变更',info:'胡维将状态由"规划中"修改为"实现中"'},
+          {time:'2020-08-23',method:'手动变更',info:'胡维将状态由"实现中"修改为"已实现"；将完成时间由"空"修改为"2020-08-20 14：00：31"'},
+    ]}}) public infos = ?: Array<any>;
+
+    /**
+     * 按钮文本
+     *
+     * @type {String}
+     * @memberof AppInfoList
+     */
+    public text = '查看更多记录';
+
+    /**
+     * 文本切换
+     *
+     * @type {Boolean}
+     * @memberof AppInfoList
+     */
+    public isShow = false;
+
+
+    /**
+     * 初始个数
+     *
+     * @type {Number}
+     * @memberof AppInfoList
+     */
+    public num = 3;
+
+
+    /**
+     * 点击展开
+     *
+     * @returns {void}
+     * @memberof AppInfoList
+     */
+    public loadMore(): void {
+          this.isShow = !this.isShow;
+          this.text = this.isShow?  '收起':'查看更多记录';
+          let ele:any =  document.querySelector('.content');
+          let ite:any =  document.querySelectorAll('.item');
+          let startHeig:number = 0;
+          let endHeig:number = 0;
+          for(let i = 0; i <= this.num; i++){
+            startHeig += ite[i].offsetHeight
+          }
+          for(let i = 0; i < ite.length; i++){
+            endHeig += ite[i].offsetHeight + 30
+          }
+          ele.style.height = this.isShow?endHeig+'px':  + startHeig+'px';
+    }
+
+}
+</script>
+
+<style lang="less">
+@import "./app-info-list.less";
+</style>
\ No newline at end of file

src/components/app-mob-input/app-mob-input.less

-ion-input {
+.app-mob-input{
   --padding-end: 5px !important;
-  text-align: right;
+  text-align: right !important;
   --color: #969696 !important;
 }
\ No newline at end of file

src/components/app-mob-input/app-mob-input.vue

 <template>
-    <ion-input  debounce="300" :type="type" :value="value" :placeholder="placeholder" @ionChange="change" @ionBlur="()=>{this.$emit('blur')}"></ion-input>
+    <ion-input class="app-mob-input" debounce="300" :type="type" :value="value" :placeholder="placeholder" @ionChange="change" @ionBlur="()=>{this.$emit('blur')}"></ion-input>
 </template>
 
 <script lang="ts">