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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
Angular2数据绑定详解
Apr 18 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
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去除HTML标签实例
2013/11/06 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
中学门卫岗位职责
2013/12/26 职场文书
市三好学生主要事迹
2014/01/28 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
党支部活动策划方案
2014/08/18 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Python实现生成bmp图像的方法
2021/06/13 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers