element-ui使用

 输入框后面加入字体图标

<el-input v-model="groupName" placeholder="请输入分组名称" suffix-icon="el-icon-search" clearable></el-input>

点击复制链接 

  //复制链接
    copy (data) {
      let url = data;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      this.$message({
        showClose: true,
        message: '复制成功',
        type: 'success'
      });
      oInput.remove();
    },
    handleCopy (row) {
      console.log(row);
      // this.copy(url);
    },

  浏览器消息提醒

    suporNotify () {
      if (window.Notification) {
        this.showMess(event)
      } else {
        alert('不支持')
      }
    },
    showMess () {
      let that = this
      setTimeout(function () {
        if (window.Notification && Notification.permission !== 'denied') {
          Notification.requestPermission(function (status) {
            if (status == 'granted') {
              var m = new Notification('广播电视规划院内网统一登录门户', {
                body: '您有一条新消息，请注意查收',

                // http://47.104.239.238:9020//dev-api/profile/avatar/2022/07/05/blob_20220705173805A006.jpeg

                icon: 'https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
              })
              m.onclick = function () {
                window.focus()
              }
              m.onclose = function () {
                m.close()
              }
            }
          })

        }
      })
    },

tab栏选中高亮

 

   <div class="all" v-for="item,index in category" :key="index" @click="lightCate(index)" :class="index==activeCate ? 'active' : ''">
            <img :src='item.imgUrl' alt="" style="">
            <p style="">{{item.name}}</p>
   </div>


    //data中设置
     activeCate: null,

     lightCate (index) {
      this.activeCate = index
    },

日历选择之后不同步选中的日期  强制刷新

@input="$forceUpdate()

 <el-date-picker v-model="form.day" type="date" placeholder="选择日期" style="margin-right:10px" @input="$forceUpdate()" />

强制刷新输入框---input

方法一

   <el-input v-model="form.name" suffix-icon=" el-icon-search" placeholder="请输入事件关键词" clearable @input="changeInput($event)" />

    // 强制刷新输入框
    changeInput (event) {
      this.$forceUpdate(event)
    },

方法二 

赋值的地方 强制刷新

  // 选中人后回填
    handlePeople (ids) {
      this.mulSelecteds = ids[0]
      this.addMsgDialog.people = ids[1].toString()
      this.$forceUpdate()
      console.log(this.addMsgDialog.people, '接受');
    },

vue通过下标修改数组页面不生效问题 

//执行修改值之后添加此句
this.$set(this.list, index, this.list[index])

eventFn(){
      this.arr[4] = 4;
      // this.arr.splice(4,1,4)
      // Vue.set(this.arr, 4, 4)
    }