网页实现某些效果的技巧

宋乐
宋乐 5月23日

input 边输入边 ajax

oninput 时请求数据,但是因为异步,可能前一个的数据把后边才请求到的数据覆盖掉,所以需要设置一个定时器

searchText: function (newVal) {
            let _this = this
            this.list = []
            if (newVal == '') {
                this.searchList = []
                this.show.searchResult = false
            }
            let time = 500
            function getData() {
                _this.timeSearch.time == new Date().getTime()
                _this.timeSearch.obj = setTimeout(() => {
                    Promise.all(_this.searchPromises).then(() => {
                        let promise = _this.search(_this.searchText)
                        //_this.showLoading(promise)
                        _this.searchPromises.push(promise)
                    })
                }, time);

            }
            if (this.timeSearch.time == 0) {
                getData()
            } else if (new Date().getTime() - this.timeSearch.time < time) {
                clearTimeout(this.timeSearch.obj)
                this.timeSearch.obj = null
            } else {
                getData()
            }



        }

vue 写 modal 时候需要在组件内部和外部都能修改值

<template>
  <div class="modal" :value="value" v-show="visible">
      <div class="close" @click="cancel">X</div>
  </div>
</template>

<script>
export default {
    props: {
      value: {
        type: Boolean,
        default:false
      }
    },

  data () {
    return {
      visible:false
    }
  },
  watch:{
      value(val) {
        console.log(val);
        this.visible = val;
      },
      visible(val) {
        this.$emit('input', val);
      }
  },
  methods:{
    cancel(){
      this.visible = false;
    }
  },
  mounted() {
    if (this.value) {
      this.visible = true;
    }
  }
}
</script>


///调用modal组件

  <modal v-model="isShow"></modal>

export default {
  name: 'app',
  data () {
    return {
      isShow:false
    }
  }
}
</script>