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 相关文章推荐
禁止你的左键复制实用技巧
Jan 04 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 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下载excel无法打开的解决方法
2013/12/24 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
js中的this关键字详解
2013/09/25 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
js实现表格筛选功能
2017/01/18 Javascript
js css自定义分页效果
2017/02/24 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
Python实现简单登录验证
2016/04/13 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
保安员岗位职责
2013/11/17 职场文书
会计专业自荐信
2013/12/02 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
听课评课活动心得体会
2016/01/15 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫