uniapp-H5、vue 中好用的textarea右下角显示字数限制

先看效果是你想要的不！

html

<textarea class="JTxtArea lg"
:maxlength="88"
:data-maxnum="reason.length+'/88'"
auto-height
v-model="reason"></textarea>

scss

.JTxtArea {background-color: $theme-bgColor;border-radius: 5px;width: calc(100% - 16px);// box-sizing: border-box;padding: 8px;min-height: 60px;line-height: 20px;color: #000000;position: relative;&.sm{min-height: 30px;}&.lg{min-height: 100px;}&:after{content: attr(data-maxnum);position: absolute;right: 5px;bottom: 0px;font-size: 12px;color: $color-gray;}
}

Tip:

因为在uniapp中v-model绑定事件，软键盘输入概率导致光标闪烁，所以用的:value和@input绑定，vue中请忽略

<textarea class="JTxtArea lg"
:maxlength="88"
:data-maxnum="reason.length+'/88'"
auto-height
@input="inputReason"
:value="reason"></textarea>

inputReason(e){
this.reason=e.detail.value;
}

uniapp-H5、vue 中好用的textarea右下角显示字数限制相关推荐

vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
在 Vue 中实现 sticky 鼠标上滑显示、下滑隐藏的效果
在 Vue 中实现 sticky 鼠标上滑显示.下滑隐藏的效果首先在需要实现该效果的组件中,创建一个数据属性,例如: isStickyVisible: true,并将其初始值设置为 true. 在组 ...
VUE 中通过v-bind:src 图片不显示问题
VUE 中通过v-bind:src 图片不显示问题,引入图片的方式用require 即可 html: <img v-bind:src='imgUrl'> js:imgUrl:requir ...
uniapp及vue中动画功能实现方案
需求场景:实际开发过程中,我们经常遇到各类比较炫酷的动画开发,比如简单的echarts插件使用,animation动画等... 动画实现方案: 1.css动画,如gif,a-png,animation ...
vue中网页图标favicon.ico不显示
1.通过服务器获取在index.html里,添加link,若href是引用服务器上的图片,在不跨域的情况下ok的 <link rel="shortcut icon" typ ...
uniapp，vue中h5项目实现数字密码键盘
本来原生的h5 直接input type="password" 这样会发现也不是说不能输入数字. 只是让用户多了一步操作的切换到数字的情况才能输入. 不知道安卓手机如何反正苹 ...
android+腾讯地图h5,在uniapp H5项目中使用腾讯地图sdk
这里主要针对的是H5,小程序或app都有现成的sdk可以使用: 本人是用uniapp在做微信公众号的h5页面,其中需要把经纬度信息转化成文字描述的位置信息,在腾讯地图开发平台上申请了一个key,然后下 ...
uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片
一.解决方法(在单层循环中) HTML: 在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数 <image v-else :src="item" m ...

uniapp-H5、vue 中好用的textarea右下角显示字数限制

uniapp-H5、vue 中好用的textarea右下角显示字数限制相关推荐

最新文章

热门文章