VUE
Crazy_GirlLL
这个作者很懒,什么都没留下…
展开
-
vue 可滑动的tab组件----vux插件tab的使用
原本vux的可滑动的tab是根据scrollWidth的长度来自动计算每一个tab-item的宽度的,因为包含这tab-item的tabBox这个div使用的是flex布局,而tab-item是它的子元素,它会自动沾满tabBox。当超出手机的可视宽度时,获取当前屏幕宽度,然后评分长度,计算之后,平均分给tab-item,因为每一个tab-item自己的样式中有设置的padding属性,所以间距相同,不需要额外为间距分配空间。1. 每个tab-item的间距是相同的,可定制。转载 2023-10-25 15:50:19 · 856 阅读 · 0 评论 -
前端:忘记密码禁止自动填充账号密码
前端:忘记密码禁止自动填充账号密码原创 2023-03-09 18:29:55 · 570 阅读 · 0 评论 -
ant design vue使用collapse默认展开全部;自定义切换图标expandIcon
ant design vue使用collapse默认展开全部;自定义切换图标expandIcon转载 2022-08-05 11:37:24 · 8717 阅读 · 1 评论 -
Vue组件实现数字滚动抽奖效果
以下我是根据该作者做的一点点得修改https://www.jb51.net/article/240059.htm<template> <div class="info-span04" style="color: #333333;"> <p @click="begin" style="cursor:pointer;padding:10px;border:1px solid red;display:inline-block;margin-right:10px"转载 2022-05-18 18:42:55 · 3417 阅读 · 0 评论 -
Iframe子父级传参
1,父页面给子页面(iframe)传参父级子页面(iframe)代码:// 父页面向子页面传递数据父级:<iframe id="ifm" ref="ifm" :src="interviewFeedBackUrl" frameborder="no" border="0" class="flexItem"></iframe>mounted () { // iframe加载完毕后再发送消息,否则子页面接收不到message this..原创 2022-04-20 16:34:33 · 4296 阅读 · 0 评论 -
这是一个CDN引入vue.js文件,httpVueLoader引用组件,不用webpack打包实现的vue demo
下载改压缩包,如果使用vscode编辑器,可以安装这个扩展,根据步骤打开就能展示(不能直接点击文件打开,路径不能是file://,需要是类似:http://127.0.0.1:7000/)免费压缩包,提供参考:链接:https://pan.baidu.com/s/1Md_XssZxWl8ubm5RHYuAlg?pwd=nfym提取码:nfym安装完扩展之后,可能需要重启vscode,根据情况而定即可然后在index.html文件中,就可以看到如图所示的图标和选项,选择你要打开的浏览器.原创 2022-04-13 18:40:05 · 1354 阅读 · 0 评论 -
点击触发其他dom元素:< $refs,$el >
要实现的效果是:点击图上的span,展示下拉框select结构展示:<div class="jobCon"> <a-select ref="selectCom" :value="jobIdItem.name" @change="changeStationName" style="width: 100%;opacity:0" :disabled="isNowOfferApproval"> <a-select-option :key="item.id"..原创 2022-01-21 18:31:07 · 771 阅读 · 0 评论 -
Ant Design 动态表单验证,手机邮箱二选一
效果图,如上图所示:手机号和邮箱未填写时,均提示必填,填写任意一个后,另一个动态不必填,然后提交代码如下:<template> <div class="position_box"> <a-modal :zIndex="120" title="修改候选人基本简历信息" :visible="editVis" @ok="handleOk" @cancel="editVis=false" :width="500"> <a-fo...原创 2022-01-10 15:02:01 · 2186 阅读 · 0 评论 -
滚动条的多种样式
echarts中的id是唯一的,不管是循环出来的还是怎样,都必须是唯一的转载 2021-11-26 18:21:48 · 153 阅读 · 0 评论 -
Ant Design 表格:循环展示表头,表头添加图标icon
需求背景:用来统计房间里住户的信息实现效果:实现过程:表头:问题a,问题b,问题c,是从动态数据循环获取得到的,包括右侧的icon,和鼠标以上显示的效果:tooltip以下是代码实现:使用时,须引入Ant Design<template> <div style="margin-bottom:30px"> <div style="margin-bottom:20px">{{question.n..原创 2021-11-22 10:36:13 · 2889 阅读 · 1 评论 -
(vue2.2.0以后的版本)Vue 子组件与父组件之间的 双向数据绑定
第一种:model作为属性的用法类型:{prop?:string,event?:string}参考官网API:model父组件<modelchild v-model="test"></modelchild>父的值{{test}}<button @click='fn'></button>……import modelchild from '@/component/modelchild'export default{ data(){转载 2021-08-19 18:18:36 · 89 阅读 · 0 评论 -
(VUE2.2.0以前的版本)Vue 子组件与父组件之间的 双向数据绑定
方法一(常规)父组件传递数据到子组件;子组件将数据转成本地数据props: ['name'],data() { return { iName: this.name }},但是此时,父组件如果更新了name 值,但是子组件中的 iName 不会随之更改;所以要监听父组件传入数据的变化,随之更新子组件;watch: { // 监听父组件传入的数据,更新到本地 name(newVal, oldVal){ this.iNa...转载 2021-08-19 18:05:17 · 108 阅读 · 0 评论 -
VUE递归引用自身组件
现在有一组数据,是json数组的格式,而且每个item里面都有可能有children,没有限制所以新建一个组件,用来递归显示,也就用到了自身组件按照百度的来说,引用自身组件不需要引用,只需要在组件中加上name这个属性即可...原创 2021-08-17 16:27:23 · 423 阅读 · 0 评论 -
Ant Design Vue :使用日历Calendar,中英文切换
官网地址:https://www.antdv.com/components/calendar-cn/#API官网中这么说故,使用时,没做特殊设置,显示的都是英文中英文切换仅在App.vue中设置即可,当然还需要对中英文切换的识别,在此可以使用vue-i18n即可...原创 2021-05-12 19:07:46 · 2454 阅读 · 1 评论 -
引入echarts时报错: “TypeError: Cannot read property ‘init‘ of undefined“
导入echarts时,把import echarts from 'echarts'改成import * as echarts from 'echarts'安装 引入 echarts原创 2021-05-09 11:13:00 · 208 阅读 · 0 评论 -
leaflet+vue:格点图的实现大体步骤
这是色斑图的实现:https://blog.csdn.net/Crazy_GirlLL/article/details/109512629格点图的实现步骤和色斑图的实现步骤差不多,格点数据的格式是一个个包含经纬度,数据的对象数组下面是这个色斑图的具体代码在map组件里面:bus.$emit('loaded',this.id);初始化页面index.vue:将数据传给色斑图组件:Bus.$on('refreshPoint',(data)=>this.get...原创 2021-03-19 14:34:29 · 987 阅读 · 1 评论 -
8张图让你一步步看清 async/await 和 promise 的执行顺序
转载:https://segmentfault.com/a/11900000172247998张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章? 测试一下自己有没有必要看 需要具备的前置基础知识 主要内容 对于async await的理解 画图一步步看清宏任务、微任务的执行过程 为什么写这篇文章?说实话,关于js的异步执行顺序,宏任务、微任务这些,或者async/await这些慨念已经有非常多的文章写了。但是怎么说呢,简单来说,转载 2021-03-16 16:15:11 · 453 阅读 · 1 评论 -
知识点整理:es6
es6新特性特别promise封装axios,promise,setTimeout,fn,宏任务和微任务,回调地狱事件循环机制,promise的使用,原创 2021-03-14 22:16:19 · 100 阅读 · 1 评论 -
知识点整理:关于vue项目
1,vue-cli+webpack如何创建一个vue架子webpack2, 动态路由MVVM,MCV模块化设计模式和开发流程传值方式生命周期函数vuex的使用那5个属性的使用公共导出方法,创建a标签的方法?HBuilder完成微信分享的功能swiper.js滑动页面?虚拟domnexttick实现原理parent,child,调用子父组件参数?ssl服务器渲染用到过什么UI框架,优缺点,...原创 2021-03-12 18:10:35 · 305 阅读 · 1 评论 -
vuex:页面刷新之后数据丢失问题:vuex-persistedstate
插件vuex-persistedstatenpm install vuex-persistedstate --save引入及配置在store下的index.js中import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({ // ... plugins: [createPersistedState()]})存储到sessionStorage(cookie与转载 2021-03-12 16:52:49 · 247 阅读 · 0 评论 -
vuex的使用:state,actions,getters,mutations,mapState,mapGetters,mapMutations ,mapActions
转自:https://www.cnblogs.com/mica/p/10757965.html怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的。(其实就是懒~~~哈哈)那么现在就开始正文部分了众所周知 Vuex 是什么呢?是用来干嘛的呢?Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。例如:你有几个数据,几个操作,在多个组件上都需要使用,转载 2021-03-12 16:16:25 · 387 阅读 · 0 评论 -
Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏)
今天我们来讲讲用后台传递路由表实现动态路由的思路,因为公司的项目里路有部分用到了vuex,我就把路由部分脱离vuex整理了出来,让大家有个启发,并不是绝对的解决方案,只是思路github:https://github.com/Mrblackant...在线查看:http://an888.net/antRouter/#/...思路整理以下四步骤对应的代码都在下方会讲到,并且是对应的1.后台同学返回一个json格式的路由表,我用easymock造了一段:动态路由表,大家可参考;2.因为后端同学传回转载 2021-03-11 15:00:21 · 1441 阅读 · 2 评论 -
Vue动态菜单(路由)的实现方案(beforeEach+addRoutes+elementUI):前端写好路由表,根据后端返回角色实现
路由表写在前端,后端返回用户的角色,前端进行角色对应的菜单渲染在线预览:动态路由github(记的star哈):https://github.com/Mrblackant...开始之前,自己要大概懂写关于vue-router的beforeEach(路由拦截)、addRoutes,elementUI的菜单组件等方法,不然理解可能会有点吃力思路分以下几步:1.前端在本地写好路由表,以及每个路由对应的角色,也就是哪些角色可以看到这个菜单/路由;2.登录的时候,向后端请求得到登录用户的角色.转载 2021-03-11 14:59:07 · 1230 阅读 · 0 评论 -
关于webpack的面试题
问题一览webpack与grunt、gulp的不同? 与webpack类似的工具还有哪些?谈谈你为什么最终选择(或放弃)使用webpack? 有哪些常见的Loader?他们是解决什么问题的? 有哪些常见的Plugin?他们是解决什么问题的? Loader和Plugin的不同? webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全 是否写过Loader和Plugin?描述一下编写loader或plugin的思路? webpack的热更新是如何做到的?说明其原理? 如何利用w转载 2021-03-11 11:34:57 · 97 阅读 · 0 评论 -
Vue中 axios delete请求参数
背景:vue项目使用delete方法时,参数有两种:一种是单纯的传id,是字符串格式,一种是批量删除,id字符串,是json格式,如下图所示这两种是不同的传参方式,所以,封装的axios方法,就是不同的,如图解:data和params是不一样的,或许是axios顶层封装的区别吧...转载 2021-03-07 23:19:46 · 1881 阅读 · 0 评论 -
vue+element:current-node-key和setCurrentKey设置默认选中并高亮节点,附带全部展开,全部关闭,重新渲染树结构函数render-content
根据接口获取树结构后,设置默认选中的节点,并高亮效果图:官网中对于这两个节点的解释如下代码如下<el-tree v-loading="loading" :data="treeData" node-key="value" :props="defaultProps" default-expand-all原创 2021-02-25 15:17:18 · 20504 阅读 · 4 评论 -
使用base64,展示图片
使用base64和img标签组合出来的是这个样子<img src=“data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFU”/>所以代码是:<template> <div class="communityPage" v-loading="loadin原创 2021-02-23 16:58:18 · 2214 阅读 · 0 评论 -
swagger UI :%E2%80%8B
%E2%80%8B区百度解码,看不到什么,空格也没有,但是链接里就有这个,这个地址我是复制得swagger UI里面得链接,所以,可能是有东西,所以很多东西还是要手敲,才不会有问题原创 2021-02-10 21:30:17 · 372 阅读 · 0 评论 -
vue编译:Unexpected character ‘‘
今天遇到个问题,对接口得时候,复制了swagger UI里面得接口地址(/community/'+communityId+'/population/base),复制过来,然后取了个名字,为方法得名字,我手敲getList,然后复制了前面复制得swagger里得population,得到了即下图中得getListPopulation方法名字但是就报错了,从来没遇过这样得,查了百度,也没找到类似得例子然后拉着我对象看了看,看了半天,也不知道,结构字符都和上面得结构一样,拼接得也对,...原创 2021-02-10 21:04:49 · 1479 阅读 · 2 评论 -
vue 解析token
引入jwt-decode 包npm install jwt-decode --save在vue中引入jwt-decodeimport jwtDecode from 'jwt-decode'jsconst decode = jwtDecode(token);console.log(decode);转载 2021-02-07 22:33:04 · 1163 阅读 · 0 评论 -
通过身份证号得到年龄、性别和出生日期
注:目前只针对18位身份证号码。不多说了,直接上代码,调用IdCard(UUserCard,num)方法即可,其中UUserCard为身份//通过身份证号计算年龄、性别、出生日期function IdCard(UUserCard, num) { if (num == 1) { //获取出生日期 birth = UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUs转载 2021-02-01 12:52:29 · 1174 阅读 · 0 评论 -
element-ui table 表格组件实现可拖拽效果(行、列)
拖拽效果,先放效果图,步骤放在后面~~一、引入三方插件1.引入sortable.js的包: npm install sortable.js --save2.或者npm i -S vuedraggable vuedraggable依赖 Sortable.js,所以下载了vuedraggable,我们便可以直接引入Sortable使用Sortable的特性。 vuedraggable是Sortable一种加强,实现组件化的思想,可以结合Vue,使用起来更方便...转载 2021-01-31 09:14:21 · 2395 阅读 · 1 评论 -
npm i -g @vue/cli踩坑 npm ERR! code EEXIST!Refusing xxx.cmd的解决方法.
更新vue脚手架不停报错,说拒绝访问,你要去Move it away,and try agin...跟随着指使,一个又一个.cmd被我删掉,一个又一个ERR浮现在眼前。。。...省略几个后来,我突然意识到。直接去目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下删除@vue文件接着,继续全局安装C:\Users\Administrator>npm i -g @vue/cli成功了!!!...转载 2021-01-14 22:13:39 · 990 阅读 · 1 评论 -
vue:子组件调完接口之后,父组件再调接口
加载顺序应该是:先调取接口,获取到县市的接口数据之后,再查询表格的接口,子父组件的钩子函数执行顺序:父beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted所以在mounted里面先调取子组件的接口,然后结束之后,将获取到的值发送给父组件即可$emit...原创 2020-12-09 17:51:29 · 1394 阅读 · 0 评论 -
leaflet+vue:色斑图的实现大体步骤
以下是整理的一个大体步骤,做个记录底层index页面a是b和c还有map的父组件(created钩子函数执行顺序是从父元素到子元素,挨个执行,mounted钩子函数执行顺序是从子元素到父元素倒叙进行)一,加载顺序:1,进入页面,先初始化,当map 渲染挂载完成之后(mounted),使用事件监听的方式,触发色斑图组件c进行dom的操作,将canvas画上2,进入要展示色斑图的页面b时,获取色斑图要展示的数据,获取到之后,事件监听发送给底层index,然后再给色斑图组件赋值二,画c原创 2020-11-06 10:41:15 · 2426 阅读 · 0 评论 -
Element+vue踩坑记录
1,引入组件时,需要注意import locale from 'element-ui/lib/locale/lang/zh-CN' // en是英文 zh-CN是中文这关乎到使用组件时,默认显示的时汉字还是英文,比如分页2,分页中pager-count要求的时奇数,所以如果设置偶数,就会报错...原创 2020-11-03 10:54:25 · 1255 阅读 · 0 评论 -
日常踩坑:echarts用v-show控制显隐,宽度问题
正常来讲,echarts宽度都是设为100%但是,当用v-show来控制的时候,就会由width:100%变成width:100px这个时候,将v-show变成,v-if就行扩展:v-show和v-if的区别就是:v-show控制的就是display:none或者display:block,但是echarts这个div,是存在于结构里面的,所以,当用v-show控制隐藏时,canvas就是100px,当v-show控制显示的时候,也只是改变了display这个css属性而已,canvas原创 2020-10-30 15:25:55 · 4291 阅读 · 1 评论 -
vue+element===table表格二次请求接口,数据不回显问题
问题:第一次点击左侧树节点时,正常请求接口,正常返回数据,正常回显列表(如图一),但是第二次,包括后面多次操作,都是正常请求接口,正常返回数据,也赋上值了,但是就是不显示(如图二)=============图一=============图二然后我的代码是这样的:其实很正常的一个思路,就是每次请求接口之前,先清空变量,查了好多资料也没查到,最后我的大佬小姐姐出场,给我加了个变量,然后如最后一张图,用es6新增的特性展开运算符来解决掉了,到底是啥原理,还一直半会没弄明白,好像就是,清原创 2020-09-26 20:56:57 · 1331 阅读 · 0 评论 -
vue调试工具vue-devtools安装及使用(亲测有效,望采纳)
第一次安装可能会失败,尝试多次安装,去GitHub下载最不容易出错本文转载:https://www.cnblogs.com/chenhuichao/p/11039427.html本文主要介绍 vue的调试工具vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧安装:1.到github下载:(下载一定要记得是master环境的代码,默认克隆后进入的是dev环境,执行npm run build会报错,执行git ..转载 2020-09-19 01:13:44 · 640 阅读 · 3 评论 -
vue项目中,为什么elementUI中“NavMenu 导航菜单“中的参数unique-opened设置无效?
如图所示,设置完unique-opened为true之后,还需要再设置el-submenu或者el-menu-item中index的唯一性,如果index中有一样的,那么设置的unique-opened就会无效原创 2020-09-05 17:12:41 · 3222 阅读 · 0 评论