![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
素素_钗钗
如今世路已惯,此心到处悠然
展开
-
双向滑动区间选择控件
如题所示,仿瓜子二手车双向滑动选择器,主要特点是:双向滑动,可点击进度条定位,滑块可拖动,数值变化有提示动画效果图如下:效果简约,有需要可下载资源。。。资源开箱即用,基于vue.js,代码封装性不高...原创 2022-01-20 20:12:27 · 727 阅读 · 8 评论 -
input输入数字且有长度限制的兼容方案
在使用表单元素的时候,input输入框是很常见的,在输入手机号等只需使用数字并且对输入长度有需求的时候,就会发现,input本身所具有的属性真是太令人又爱又恨了,哈哈哈!只输入数字时,你可能会想,让input的类型为number不就好了吗?是呀,可惜,ios不怎么听话,需要限制长度时,你可能又会想,input不是有个maxlength属性吗?有啊,但当type=number的时候,各个系统都很叛逆,都跟你对着干,这个时候,你会想什么呢?再进一步思考的时候,限制长度的时候,有空格怎么办呢?如果是复制粘..原创 2021-11-15 20:51:16 · 1908 阅读 · 0 评论 -
Vue.js在同一个页面重复引用相同组件时的干扰处理
如标题所说,我们在使用vue.js组件时,会出现在同一个页面会多次使用相同的组件,更特别的是,组件相同,但数据呈现上是完全不同的,有增或有减,但dom交互的处理是一样的,在这样的背景下,有可能引起组件数据跟需求不一致,交互无法运行等问题,这两个问题是比较常见的,由 于组件在初始化时,是共用的作用域,因此,变量数据是一致的,另外一个问题是因此,大部份的情况下,交互编写可能都会考虑到dom元素的选取问题,如果组件中出现多个相同的id,那交互上会出问题,也不足为奇了。为了解决如上的问题,我们编写组件的时候,需要原创 2021-10-29 23:14:48 · 11529 阅读 · 3 评论 -
单页应用移动端弹窗穿透解决终极方案
移动端的web项目,大多数会采用单页应用来实现,在布局上也有一定的讲究,从设计角度出发的话,布局大致分为两类,一类是单页全屏,另外一种是内容多的滚动屏。全屏的话,一般布局会采用vh,position等等方式来实现,而滚动屏又会分为两小类,一类是局部滚动,另外一类是全局滚动,一旦页面出现滚动条,并且此页面有弹窗的需求时,穿透这个问题就来了。一句话总结穿透就是:弹层下的页面滚动会跟随着弹窗的滚动。要解决这个问题,有很多种方案,尤其是在移动端,比如说,设置overflow:hidden,positio...原创 2021-08-01 17:07:44 · 315 阅读 · 0 评论 -
对象数组分组
如图所示,有些对象数组需要进行分组显示,比较常见的功能,类似微信通信录的字母选择交互,这里的数据结构就是需要进行分组处理的,还有车牌车型关联选择等,这些都是需要转换的,抽取方法如下,传入三个参数,arr:原始数组 gk:分组依据字段,ok:处理完需要呈现的对象键值代码如下handleGroup (arr, gk, ok) { var obj = {}, list = []; for (var i = 0; i < arr.length;...原创 2020-08-31 11:34:57 · 1160 阅读 · 0 评论 -
canvas编写扇形比例图
涉及知识点有canvas在移动端的适配及清晰度调整,画还是非常简单的效果如图大概的思路是:canvas的width及height使用rem作单位来实现适配,当然也可以通过屏幕计算比例来设置宽高另外一个点是,上图是由两个圆堆叠而成的,中间的文字也是利用canvas画出来的具体代码如下:// 画环 drawMulCircle (canvas_id, proportion,total) { var canvas = document.getElement原创 2020-08-24 21:44:15 · 702 阅读 · 1 评论 -
vue.js 带有正则选择的车牌控件组件
此控件是用于微信相关的应用中,主要是对于车牌号的选择范围作了一定的正则匹配,选择时,字体会放大,键盘是动态变化的,效果如下两张截图:代码以资源的形式上传,有需要可以留言!...原创 2020-08-09 16:31:43 · 1179 阅读 · 16 评论 -
vue.js实现手风琴效果
效果如图,标题可定制,自定义内容区,默认打开项可以配置,主要利用了vuejs父子组件中的uid来实现,打开一个,关闭其他的,主要实现代码如下:// collapse.vue<template> <div class="collapse-parent"> <slot></slot> </div>&...原创 2019-12-25 16:28:23 · 1406 阅读 · 1 评论 -
vue-router watch $route
在父组件引入的后代子组件中,内中有多层子孙组件的话,this.$router.push相关的操作还是得免除掉,坑有些多子组件直接跳转父组件强制刷新页面访问路由,created事件无法触发,熟记v-on, this.$emit,this.$ref.child.method...原创 2019-04-28 18:28:50 · 5993 阅读 · 0 评论 -
vue-loader 高版本不兼容 require文件引入
在移动代码到其他机上,重新安装依赖的时候,基于mint ui的页面,带有Indicator的界面,在触发了Indicator.open()方法之后发现页面只生成了一个div,没有其他spinner等内容,调试的时候发现是直接使用cnpm i命令安装依赖,按package.json,安装的都是高版本,导致mint ui组件当中,require进来的组件资源,无法解析,导致Indicator呈现出...原创 2019-03-04 23:33:21 · 2424 阅读 · 0 评论 -
vue iview 之render 函数
自从用了vue.js,dom相关操作都有些生疏了,最近一直在用iview这个前端技术栈,vue init 启动项目之后,考虑到用户权限系统的设置,在页面组件中,大量使用了render方法去构建结构,在此记录两个重要的点:一是使用结构 h('dom', {属性(包含样式,元素属性,绑定事件等等)}, '内容' 或者 [这个要放的是dom的子元素,可以嵌套生成子孙后台]}代码后续。。。...原创 2018-11-08 23:19:37 · 677 阅读 · 0 评论 -
自己写的bug,跪着也要修好
为了赶进度,努力码代码,好不容易对接完后台接口,在测试的时候,竟然发现使用element ui 构建的后台,modal当中的datetimepicker 控件无法通过v-model双向绑定来回显数据(数据可以回显,只是无法再将选中值进行修改),捣鼓大半天,修改各种时间格式,设置各种属性,均无效,没办法,项目着急,没时间研究源码了,逼我出大招,两种办法如下:第一种: 将弹窗修改为路由页面,在该路...原创 2018-11-05 00:08:10 · 213 阅读 · 0 评论 -
封装的ueditor组件,基于双向绑定,图片回显问题
基于vue-cli脚手架的前端项目,系统有多处地方需要引入百度编辑器ueditor,因此将它封装成vue组件,通过监听v-model绑定的value变化调用ueditor当中的this.editor.setContent(val)来更新内容,把百度编辑器引入到弹窗中的时候,每当回显弹窗内容的时候,会出现图片无法显示的问题,为解决这个,修改了源码: 修改如下图:在simpleupload当中...原创 2018-09-28 14:26:49 · 1430 阅读 · 0 评论 -
iview select filterable属性使用小陷井
开了一个内容管理系统,使用了webpack vue 构建了一个iview项目,在列表当中使用新增,编辑弹窗时,有碰到一个使用select控件(select 设置了filterable属性),在编辑赋值之后,修改,保存之后,去新建,由于在编辑那一步有重新修改值,导致 select 的 query不为空,最终导致新建弹出的下拉选择项只有前一次操作选中的项,上个图,看看编辑选择的结果:再次新...原创 2018-09-06 09:20:53 · 12214 阅读 · 6 评论 -
vue与ueditor,双向绑定,实例
一般情况下,不是前后端分离的项目,或者是传统的jquery导向的网站开发,使用到百度编辑器的功能,直接在html,跟随ueditor官网文档即可非常快速的引入开发引用,但在前后端分离的项目中,跟前一种模式有一些差异,项目完结,总结一波:需要记住两点:config.json serverUrl 这两个东西很重要哦。。。1.下载ueditor http://ueditor.baidu.c...原创 2018-08-27 14:48:51 · 4647 阅读 · 2 评论