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 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
vue如何在data中引入图片的正确路径
Jun 05 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应用提速面面观
2006/10/09 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
Node.js模块加载详解
2014/08/16 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python中property属性实例解析
2018/02/10 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
简爱电影观后感
2015/06/10 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis