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 相关文章推荐
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
js闭包的9个使用场景
Dec 29 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 上传功能实例代码
2010/04/13 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
js资料toString 方法
2007/03/13 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
javascript 写类方式之七
2009/07/05 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
基于jquery的on和click的区别详解
2018/01/15 jQuery
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
介绍一下Python中webbrowser的用法
2013/05/07 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
税务干部鉴定材料
2014/02/11 职场文书
股东合作协议书
2014/04/14 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
党员评议个人总结
2014/10/20 职场文书
金陵十三钗观后感
2015/06/04 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python