最近项目中使用到的一些技术

项目需求

• vue 项目，后端获取的 n 条数据中的名称，前台展示，并要求点击后可直接修改这个效果
  1. 使用input 标签，但是:value 和:model 使用有问题
  2. 给按钮绑定 enter 事件，修改成功后光标依旧在闪，用户体验不好，需解决

一

<div class="lf">
  <input
    type="text"
    class="noname"
    :title="item.show_name"
    :value="item.show_name?item.show_name:' 未命名视频 '"@keyup.enter="search($event,item)"@blur="search($event,item)"
  />
</div>

search: function (event, item) {// 保存视频名称
  let that = this
  let obj = {
    task_id: item.id,
    show_name: event.currentTarget.value
  }
  that.$ajax.post("/test", obj).then(res => {if (res.data.rtn == 0) {
      Message({
        type: 'success',
        showClose: true,
        message: '命名成功！',
        duration: 3500
      })
      event.srcElement.blur() // 主动使按钮失去焦点}
  })
},

结论

1. 使用 search($event)方法贼强大，比那些 $refs 等获取的跟强大（个人使用感觉），获取输入的字符很方便
2. 主动使按钮失去焦点如代码片段中注释所写

项目小需求
1.vue 路由跳转后新打开页面

这个百度都能搜到

  let {href} = this.$router.resolve({ // 打开新窗口
    path: "/new/admaking/production",
    query: {}})
  window.open(href, '_blank')