vue 设置 input 为不可以编辑的实现方法


Posted in Javascript onSeptember 19, 2019

我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个不可以编辑,失去焦点后隐藏可以点击的那个,点“编辑”时,显示可以编辑的那个input

<div class="edit-item">
      <input type="text" id="group-name" v-model="groupName" class="edit-input" disabled v-show="!isEditGroupName" >
      <input type="text" id="group-name2" v-model="groupName" class="edit-input" ref="groupName"
      @input="changeValue"
      @change="editGroupNameSave(groupInfo.name)" v-show="isEditGroupName" @blur="isEditGroupName = false">
      <span @click="editGroupName"><icon-svg name="icon-kaka-compile" icon-style="edit-ico"></icon-svg></span>
     </div>
export default {
  name: 'RightSideBar',
  props: {
  },
  data () {
   return {
    isEditGroupName: false, // 修改群名称
   }
  },
  computed: {
   // 群名称
   groupName: {
    get () {
     return this.$store.getters.groupSetInfo.name
    },
    set (val) {
     // 使用vuex中的mutations中定义好的方法来改变
     let groupSetInfo = this.$store.getters.groupSetInfo
     let copyMyinfo = Object.assign({}, groupSetInfo)
     copyMyinfo.name = val
     this.$store.dispatch('groupSetInfo', copyMyinfo)
    }
   },
  },
  methods: {
   changeValue () {
    let leng = this.validateTextLength(this.groupName)
    if (leng >= 15) {
     this.$refs.groupName.maxLength = leng
    } else {
     this.$refs.groupName.maxLength = 30
    }
   },
   validateTextLength (value) {
    // 中文、中文标点、全角字符按1长度,英文、英文符号、数字按0.5长度计算
    let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
    let mat = value.match(cnReg)
    let length
    if (mat) {
     length = (mat.length + (value.length - mat.length) * 0.5)
     return length
    } else {
     return value.length * 0.5
    }
   },
   // 打开编辑
   editGroupName () {
    this.isEditGroupName = true
    let nickNameInput = document.querySelector('#group-name2')
    setTimeout(() => {
     nickNameInput.focus()
    }, 0)
   },
   // 保存群名修改
   editGroupNameSave (data) {

   },

  },
  created () {
 }

vue 设置 input 为不可以编辑的实现方法

vue 设置 input 为不可以编辑的实现方法

以上这篇vue 设置 input 为不可以编辑的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
node 标准输入流和输出流代码实例
Sep 19 #Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 #Javascript
微信小程序3D轮播实现代码
Sep 19 #Javascript
layui 实现表格某一列显示图标
Sep 19 #Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 #Javascript
layui按条件隐藏表格列的实例
Sep 19 #Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 #Javascript
You might like
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
Python利用Django如何写restful api接口详解
2018/06/08 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
演讲比赛获奖感言
2014/02/02 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
横空出世观后感
2015/06/09 职场文书
银行培训心得体会范文
2016/01/09 职场文书
交通安全教育心得体会
2016/01/15 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers