vue
文章平均质量分 70
vue你不会?
苏苏哇哈哈
宇宙无敌超级美少女程序员| 苏苏的bug
展开
-
echarts折线图流动特效的实现(非平滑曲线)
echarts折线图流动特效的实现(非平滑曲线)原创 2022-08-08 01:10:38 · 9787 阅读 · 7 评论 -
vue中基于iview封装支持搜索选中的Tree组件
vue中基于iview封装支持搜索选中的Tree组件原创 2022-07-11 22:34:59 · 2272 阅读 · 4 评论 -
vue中tab标签页keep-alive二级路由+删除指定缓存页面
vue中tab标签页keep-alive二级路由+删除指定缓存页面原创 2022-05-22 21:25:22 · 2845 阅读 · 0 评论 -
vue中slot插槽的使用
1.看看官网怎么说?在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口。2.分为哪几种?2.1默认插槽木有name的就是默认插槽,捕获所有未被匹配的内容。 <slot>这是默认原创 2022-03-16 20:17:22 · 10848 阅读 · 0 评论 -
vue实现下拉框点击其他区域关闭
1.实现效果2.实现原理mounted:初始化页面完成后,再对html的dom节点进行一些需要的操作组件添加点击事件监听document.addEventListener,假设点击区域不再该区域上,关闭弹框3.实现代码<template> <div> <div> <div class="flex-row"> <div class="hd_sel flex-row j_b"原创 2022-03-15 22:12:38 · 4163 阅读 · 0 评论 -
vue自定义全局loading加载组件
1.实现效果2.实现原理Vue.extend:extend 创建的是 Vue 构造器,可通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。vue中install方法:export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 }}3.实现代码新建components文件夹-新建loading001文件夹-新建index.vue+index.jsindex.原创 2022-03-10 23:52:29 · 3922 阅读 · 1 评论 -
vue中iview组件实现表单数据的动态校验
1.实现效果2.实现原理iview组件库Form表单, ref=“formValidate”,:model=“formInline”,:rules=“ruleValidate”。选择审核结果的时候动态的设置备注的规则,当为通过为非必填,反之为必填。为备注项设置相应的动态rule::rules="formInline.status == '2'? ruleValidate.remark: [{ required: false }]"3.实现代码<template> &l原创 2022-03-09 23:55:49 · 5815 阅读 · 1 评论 -
vue中实现分页数据多选
1.实现效果2.实现原理引入iview组件库,使用iview的Table组件+Page组件。在columns列加入type: “selection”,设置Table的选择事件。@on-select-all,@on-select-all-cancel,@on-select,@on-select-cancel。假设有禁用项,为禁用项设置_disabled为true,当进行全选或全部选时,只针对_disabled为false的数据。data中设置checkedList:[],表示选择的原创 2022-03-08 22:08:15 · 2448 阅读 · 0 评论 -
vue实现多个tab标签页的切换与关闭
1.实现效果2.实现原理vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理。将vuex中的数据保存到sessionStorage中,避免页面刷新丢失,当浏览器关闭时,清空数据。通过ref定位,拿到当前窗口宽度与当前所在路由的tab标签的所有宽度,判断两者,实现对多tab超出窗口宽度的处理。当点击tab标签页的时候,获取相应的激活项,动态的实现左侧菜单栏的选中状态,用watch监听,updateActiveName和upda原创 2022-03-06 23:45:20 · 9994 阅读 · 0 评论 -
安装vue-cli4+,并创建一个基于vue3.x的项目
1.vue-cli的3.0+以后使用的不是vue-cli,先卸载原来的安装npm uninstall vue-cli -g2.nodeJs ≧ 8.9(官方推荐 8.11.0+)npm install -g @vue/cli3.查看vue-cli版本vue -V4.vue-cli=Vue+一些js插件5.创建vue项目原创 2021-08-06 20:49:39 · 500 阅读 · 0 评论