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 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
javascript截取字符串小结
Apr 28 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
JavaScript正则表达式和级联效果
Sep 14 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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修改NetBeans默认字体的大小
2013/07/02 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
详解JS预解析原理
2020/06/16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python中ConfigParse模块的用法
2014/09/29 Python
python动态性强类型用法实例
2015/05/09 Python
浅谈python对象数据的读写权限
2016/09/12 Python
python中requests小技巧
2017/05/10 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python批量启动多线程代码实例
2020/02/18 Python
10个示例带你掌握python中的元组
2020/11/23 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
家居饰品店创业计划书
2014/01/31 职场文书
超市理货员岗位职责
2014/07/04 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
道歉情书大全
2015/05/12 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers