vue实现点击修改文字_vue点击编辑可以修改文字_鱼干～的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
template代码块

    <div class="queryDatatitle" :title="queryData.name" @click="updateNmae(queryData.name)">
      <div v-if="!isUpdateName">{{ queryData.name }}</div>
      <div v-else>
        <a-icon type="loading" v-show="inputDisabled" />
        <a-input
          ref="queryDataName"
          v-model="queryData.name"
          :disabled="inputDisabled"
          placeholder="请输入自定义页面名称"
          class="updateInput"
          allowClear
          @pressEnter="namePressEnter"
          @blur="namePressEnter"
          @change="changeQueryDataName"
        ></a-input>
script代码块
 
data() {
    return {
   	  queryData:{
		name:'',
		id:''
	  //显示隐藏input
      isUpdateName: false,
      //禁用input
      inputDisabled: false,
      //解决点击input清空按钮blur比click事件优先的标识
      clickFlag: false,
methods: {
    //判断是否清空数据
    changeQueryDataName(row) {
      if (row.type == 'click') {
        //触发清除
        this.clickFlag = true
    //修改名称
    namePressEnter() {
      setTimeout(() => {
        if (this.clickFlag) {
          this.clickFlag = false
          return
        if (this.queryData.name === '' || this.queryData.name.length >= 50) {
          this.$message.warning('名称最大限制为50个字符且不允许为空!')
          this.$nextTick(() => {
            this.$refs.queryDataName.focus()
          return
        this.inputDisabled = true
        //setEditForm是我这边后端定义的接口
        setEditForm({ id: this.queryData.id, name: this.queryData.name })
          .then((res) => {
            this.inputDisabled = false
            this.$message.success('页面名称修改成功')
            this.isUpdateName = false
            this.$emit('updateName')
          .catch((err) => {
            this.inputDisabled = false
            this.$message.error(err.message)
      }, 200)
    //重命名触发
    updateNmae() {
      this.isUpdateName = true
      this.$nextTick(() => {
        this.$refs.queryDataName.focus()
style代码块
 
  .queryDatatitle {
    cursor: pointer;
    color: var(--titleCustomColor);
    font-weight: bold;
    font-size: 17px;
    align-items: center;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .updateInput {
      width: 350px;
1.失去焦点并鼠标点击外部 dom 元素一次触发事件@blur=“blur” 
2.input 定义 ref 为 queryDataName，然后通过如下获取焦点,必须要加$nextTick，不然会报错获取不到dom元素 
 this.$nextTick(() => {
          this.$refs.queryDataName.focus()
3.点击input输入框的清空按钮会触发input的blur的事件
 可以通过onChange事件触发的方法，根据type来判断出是输入还是点击清除 
   changeQueryDataName(row) {
      if (row.type == 'click') {
        console.log('触发清除')
4.ant design的官网地址
                【vue create】二.配置Esline、less、nprogress、ant-design-vue、环境变量env、axios、vuex、Router、路由守卫以及登录页
                    好的，谢谢，收到您的建议
                【vue create】二.配置Esline、less、nprogress、ant-design-vue、环境变量env、axios、vuex、Router、路由守卫以及登录页
                    CSDN-Ada助手: 
                    非常感谢博主的努力和付出，这篇文章详细介绍了许多常用组件和工具的配置，对初学者来说非常实用。期待博主的下一篇文章，可能会聚焦于Vue组件的开发，标题可以是：【Vue组件】一. Vue组件的开发及组合技巧。
                【 Vue2.X按 NPM 方式局部引用 高德amap-jsapi-loader(踩坑贴)】
                    Ant design vue 1.7.8版本的UI组件库，
地址：https://1x.antdv.com/components/menu-cn/
                【 Vue2.X按 NPM 方式局部引用 高德amap-jsapi-loader(踩坑贴)】
                    m0_63496830: 
                    用的是什么组件库
                【ant Design vue使用腾讯播放器实现监控视频直播、点播，多个视频同时播放】
                    文章里的代码就是源码