【vue】click事件function，日期插件

input上传图片预览(vue)

 const inputDOM = this.$refs.inputer;
 this.imgPreview(inputDOM.files[0]);
 
imgPreview(file) {
        const self = this;
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return;
        if (/^image/.test(file.type)) {
            // 创建一个reader
            const reader = new FileReader();
            // 将图片将转成 base64 格式
            reader.readAsDataURL(file);
            // 读取成功后的回调
            reader.onloadend = function () {
                self.userUrl = this.result;
                console.log(this.result);
            };
        }
    }

this.$set(),响应式修改对象里的属性，实时更新dom

vue.set( target, propertyName/index, value )
如：this.$set(this.specialSale, 'day', day);
同理(响应式删除)：vue.delete( target, propertyName/index )

带动画的滚到顶部

 clickToTop() {
     (function smoothscroll(){
   var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 0) {
  window.requestAnimationFrame(smoothscroll);
  window.scrollTo (0,currentScroll - (currentScroll/5));
  }
 })();
 }

下拉选项，点击其他区域收起

  document.body.addEventListener('click', function(e) {
      that.showSelect = false;
      that.showPromotion = false;
      that.showSkin = false;

      const obj = {
        sexBox: 'showSelect',
        showingPromotion: 'showPromotion',
        showingSkin: 'showSkin'
      }
      let prop;
      if (e.target.id in obj) {
        prop = obj[e.target.id];
      } else if (e.target.parentElement && e.target.parentElement.id in obj) {
        prop = obj[e.target.parentElement.id];
      }
    //  console.log(prop)
      if (prop) {
        that[prop] = true;
      }
    });

vue 冒泡事件

@click.stop() 阻止事件冒泡

vue 出生日期组件插件

• 参考链接

安装
npm i vue2-datepick --save

初始化
import Calendar from 'vue2-datepick';
Vue.use(Calendar);

使用
 <script>
 export default {
   name: 'App',
   data(){
       return{
           date2:'2010-3-2'
         }
   },
   methods:{
     setDate2(){
       this.$picker.show({
         type:'datePicker',
         date:this.date2,  //初始化时间
         endTime:'2020-02-11',  //截至时间
         startTime:'2010-02-11',  //开始时间
         onOk:(e)=>{
           this.date2 = e;
         },
       })
     },
   },
 }
 </script>

v-for遍历数据范围

    <ul class="ulBox">
      <li v-for="(n, i) in (2020 - 1990)" :key="n">{{i+1990}}</li>
    </ul>
    // 1991.1992.....2019
 <li v-for="n in 12" :key="n">{{n}}</li>
    //1,2....12

50artÖÐÐÄÈñ¶Èf2.8.jpg