随笔 - 441  文章 - 4  评论 - 84  阅读 - 109万 

业务场景

我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据。

发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接通过键盘输入,就可以改变数据。

原因分析

在通过 JS 修改控件的value 数据后,并没有触发到数据更新。

解决办法

复制代码
Vue.component('rx-textarea', {
    props: {
        value:[String,Number],
        cols: {
            type: Number,
            default: 60
        },
        rows: {
            type: Number,
            default: 4
        }
    },

    data() {
        return {
            curVal:this.value
        }
    },
    template: "<div><textarea class='rx-textarea' v-model='curVal' @focus='focus(event)' :cols='cols' :rows='rows' @blur='change(event)' ></textarea></div>",
    methods:{
        change:function(e){
            this.$emit('input', e.target.value);
        },
        focus:function(e){
            this.$emit('myfocus', e);
        }
    },
    watch: {
        curVal: function (val, oldVal){
            this.$emit('input', this.curVal);
        },
        value :function(val,oldVal){
            if(val!=oldVal){
                this.curVal=this.value;
            }
        }
    }
})
复制代码

当文本框获取焦点时,我们发布一个 myfocus 控件,我们在使用这个控件的时候。

<rx-textarea   @myfocus="getTextarea" v-model="item.sql"></rx-textarea>

编写一个 getTextarea 的方法。

var curTextarea=null;
        function  getTextarea(e){
            curTextarea= e.target;
        }

这里将文本框控件,抛出来,我们可以通过 js代码修改这个控件的value。

function insertPK(){
            $.insertText(curTextarea,"{pk}")
        }

通过这个代码我们往焦点处插入我们的代码。

当文本框失去焦点时,将当前控件的值作为 input 事件进行发布,从而实现了数据的同步。

 

posted on   自由港  阅读(3242)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
历史上的今天:
2018-10-17 springboot 程序发布到tomcat运行
2010-10-17 activemq 代码库
点击右上角即可分享
微信分享提示