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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
详解Vue的options
May 15 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合并数组+与array_merge的区别分析
2010/08/01 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
vue-router的hooks用法详解
2020/06/08 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
跟老齐学Python之永远强大的函数
2014/09/14 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python正则中最短匹配实现代码
2018/01/16 Python
Python绘制组合图的示例
2020/09/18 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
九年级科学教学反思
2014/01/29 职场文书
自我推荐信范文
2014/05/09 职场文书
环保倡议书300字
2014/05/15 职场文书
学前教育专业求职信
2014/09/02 职场文书
报效祖国演讲稿
2014/09/15 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
展览会邀请函
2015/02/02 职场文书
原告离婚代理词
2015/05/23 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL