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

2024年3月29日 221次阅读 来源: 94_青年

项目需求

  • 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')
    原文作者：94_青年
    原文地址: https://segmentfault.com/a/1190000019724635
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞