Vue实践
文章平均质量分 66
一条大河全靠浪
这个作者很懒,什么都没留下…
展开
-
vue文件使用iconfont
1、导入字体文件到assets中2、main.js 导入import '@/assets/icon/iconfont.css';3、使用注意前面一定要加iconfont,否则是个空框框 <div class="iconfont icon-label"></div>原创 2022-02-14 15:57:44 · 554 阅读 · 0 评论 -
忽略埋点记录的ResizeObserver - loop limit exceeded
参考来源:ResizeObserver - loop limit exceeded这个一个良性的报错,可以忽略原创 2022-02-14 15:42:31 · 1233 阅读 · 4 评论 -
vue-cli 3.x 开发插件并发布到 npm
参考博客:https://www.cnblogs.com/wisewrong/p/10186611.html我的目录与上面博客不太一样:index.js 文件import ElementTextarea from './components/ElementTextarea'// 创建 install 函数// vue.use 会默认查找并调用 install 函数ElementTextarea.install = function (Vue) { // 注意:第一个参数是组件名称,我们在原创 2022-02-14 15:41:23 · 504 阅读 · 0 评论 -
vue使用template模式报错:You are using the runtime-only build of Vue where the template compiler is not ava
vue使用template,报错的问题局部注册这个组件:// 父组件<div> <input type="text" v-model="input" placeholder="please input" /> <test-child :test="test" /></div> // 子组件, 通过局部注册方式components: { testChild: { template: `<div v-bind="$attr原创 2022-02-14 15:40:05 · 6683 阅读 · 0 评论 -
$attrs中的对象没有变化,但触发了watch监听?
假设$attrs中有个变量info1、当info不管是基本数据类型还是引用数据类型时, 都存在以下问题: 不管这个对象改没改变,watch都认为它改变了<card :info="info"></card>data中的info: {a:1} // 为1 同样有这个问题// 在card组件中监听watch: { '$attrs.info': { handler(newV, oldV){ console.log(newV == oldV)原创 2022-02-14 15:39:21 · 2623 阅读 · 0 评论 -
自定义公式输入框
需求自定义公式输入框,要求:1、通过点击的方式添加数据和符号;2、自定义输入框中可以像普通输入框那样,在光标位置插入输入;3、用户通过delete和backspace按键可以删除;4、点击输入框,光标定位到最后;原创 2022-02-08 09:15:55 · 2050 阅读 · 4 评论 -
记录一些vue使用中的小点
1、number类型的input标签2、v-model 还是 value/input3、监听按键+点击事件4、elementui 的样式修改5、当用vuex出现死循环的时候,你一定watch了非固定的对象6、watch 表单时,新旧值一样7、vuex 中的getter - 待完善8、如何实现配置化表单 - 待完善9、关于图片的引用10、v-show 和 v-loading 冲突问题11、this.$emit 无效的问题原创 2022-01-12 11:05:50 · 559 阅读 · 1 评论 -
简单实现矩形面积块
利用flex布局构造整个面积图内的各个块。<template> <div class="rec-area-map" :style="parentStyle"> <div v-for="(item, index) in items" :key="item.id" :style="{ width: item.width + 'px', height: item.height + 'px',原创 2021-12-22 11:26:13 · 350 阅读 · 0 评论 -
vue里面的全局变量那些事
::v-deep .el-main { //FIXME el-main中设置为auto,使得内部组件的阴影设置不显示 overflow: visible; }媒体查询和scss只能 @mixin 不能 @extend原创 2021-09-13 16:31:16 · 749 阅读 · 0 评论 -
使用el-table懒加载树形表格时的注意点
先放个简单的el-table例子<el-table ref="refTable" :data="tableData" :load="loadOrgTable" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="orgId" lazy @expand-change="expandChange"></el-table>1、数据显示1、tableData原创 2021-07-22 20:11:44 · 3456 阅读 · 1 评论 -
页面实现 “实时数据响应” 的注意事项
假如我们需要实现一个功能,页面左边是多选列表,页面右边是根据选中的值进行数据请求之后显示的数据。一、普通操作等用户勾选完之后,点击确定按钮后,才向后台发请求,然后右边渲染显示。这种形式,请求都是一个选中列表作为参数。这种操作在用户使用上会存在一个问题:问题一: 用户点击确定后,接口5s之后才返回数据,这个时候用户取消勾选示例4,然后又点击了确定,这时用户要删除的数据4都没有返回,就会导致程序报错。如果采用这种方式,那么我们需要做两件事:1、 确定按钮的防抖2、 在上次数据请求返回前禁用确原创 2021-07-09 14:37:53 · 568 阅读 · 0 评论 -
基于el-table的树形表格及js-xlsx实现下载excel功能(二)
这篇主要是利用xlsx下载表格,网上参考的资料挺多的安装xlsxxlsx npm我用到的也就前三个就最简单的使用来说:aoa_to_sheet 就是把一个数组arr塞到一个sheet页中,arr类似于这种结构arr = [ ['姓名', '年龄', '性别'], ['张三', '18', '男'], ['李四', '23', '女'],]json_to_sheet 的json数据长下面这样, 它会自动将键值变成表头,注意键值不能重复arr = [ {'姓名': '张三', '年原创 2021-06-16 16:53:52 · 933 阅读 · 0 评论 -
基于el-table的树形表格及js-xlsx实现下载excel功能(一)
一、表格下载需求https://www.npmjs.com/package/xlsx显示饿如果显示的表格和下载的表格一模一样,可以直接使用官方提供的aoa-to-excel ,直接获取表格的DOM作为参数传入即可。但我们下载的excel需要进行首列缩进的处理,新增几列条件列,所以就没法使用上面的方法,而是改用二、方法设置标识1、展开这里展开了3层,每次展开操作,将所有的孩子都打上show为true的标记,show为true即表示该行显示,后续下载时,只需要遍历出树里面show为true的节原创 2021-06-16 16:16:10 · 921 阅读 · 0 评论 -
vue 中基于drag drop拖放实现左菜单和右画布的功能
参考vue 中基于html5 drag drap的拖放功能代码<template> <div class="drag"> <el-container> <el-aside width="300px"> <!-- 左边待选菜单区域 --> <ul> <li v-for="item in tags" :key="item">原创 2021-05-27 19:07:00 · 1440 阅读 · 2 评论 -
el-table单元格中加上横向柱状图
1、需求如图:把上面的柱状图改成下面这种,在表格列中显示条形图。2、解决方法首先这个图肯定要对这一列进行处理,这里的表格用的是elementUI的table,官方文档提供了自定义列样式的方法通过这个方法动态的改变单元格的背景即可达到要求!但是,实际操作中发现,设置背景是满单元格的,没法通过设置高度达到上面的效果!但是我们可以通过linear-gradient,以蓝色为底色,白色去覆盖多余的蓝色也可以达到目的,所以就有下面的代码:// 白色是从上到下覆盖的,要显示蓝色部分用透明色过渡; 蓝原创 2021-05-11 15:16:31 · 1822 阅读 · 0 评论 -
vue-draggable-resizable 插件使用总结
一、安装和基本用法npm官方文档npm install --save vue-draggable-resizable1、全局注册组件// main.js中写入:import Vue from 'vue'import VueDraggableResizable from 'vue-draggable-resizable'// 可选择导入默认样式import 'vue-draggable-resizable/dist/VueDraggableResizable.css'Vue.compon原创 2021-04-13 14:35:00 · 13199 阅读 · 2 评论 -
moven-editor 给代码块增加复制按钮
需求代码在moven-editor给代码块增加复制按钮的代码如下:addCopyBtn(){ this.$nextTick(()=>{ const content = document.getElementsByClassName('v-show-content')[0] const precodes = content.getElementsByTagName('pre') // precodes 是个类数组 ,转换一下 const arr = Array.原创 2020-11-04 17:06:21 · 1137 阅读 · 1 评论 -
vue:基于el-tab,选中状态改为箭头居中指向
1-3是3个tab页,通过对el样式的修改,去掉了选中状态的蓝线和灰色线, 要实现的箭头效果如下:想法:尝试性代码1、如果你的自定义tab宽度是固定的,那么可以使用以下代码实现2、但我这里的需求就是不能固定宽度的// 处理箭头位置 getAllTabWidth(){ const paddingWidth = 28 , magleftWidth = 45 return this.$refs.dataTabTitle.map(item => item.offset原创 2020-10-26 18:48:16 · 2459 阅读 · 0 评论 -
Vue+Vant 图片上传加显示
前端开发想省时间就是要找框架呀!找框架! vant中上传图片组件:https://youzan.github.io/vant/#/zh-CN/uploader上传图片的组件uploader: &lt;van-uploader :after-read="onRead" accept="image/*" multiple&gt; &lt;imgclass=&qu原创 2018-09-17 19:57:18 · 16947 阅读 · 3 评论 -
vue中页面跳转传值的几种方式
一、router-linkURL路径:http://localhost:8081/#/test?userid=1&amp;amp;lt;router-link :to=&amp;quot;{path:'/test',query: {userid: id}}&amp;quot;&amp;amp;gt;跳转&amp;amp;lt;/router-link&amp;amp;gt;收:var id = t原创 2018-09-13 17:17:44 · 25343 阅读 · 0 评论 -
来!抛开input的radio!在Vue里面写个单选器!
一、首先来个图二、再来盘代码HTML&amp;lt;template&amp;gt; &amp;lt;div class=&quot;selectCate&quot;&amp;gt; //循环!想几个有几个o(* ̄︶ ̄*)o &amp;lt;div class=&quot;add-item-num&quot;原创 2018-09-13 17:54:49 · 1533 阅读 · 0 评论 -
(vantUI )获得piker选中值的自定义ID
问题官网中给的picker例子,每项只能是个字符串,但我需要它返回每个字符串对应的自定义ID,而不是index。vantUI官网:picker官网例子<van-picker :columns="columns" @change="onChange" />export default { data() { return { columns:...原创 2018-09-15 15:23:22 · 21091 阅读 · 17 评论 -
Vant list 与better-scroll与下拉刷新(其实是上拉加载)
先是用了vant的LIst下拉刷新,然后发现better-scroll中这个插件没有用,然后自己写了个监听!最后发现一篇文章有封装scroll中下拉刷新!这个过程也是莫名其妙了。1、首先是用了Vant的List实现Vant List官网这部分就是官网的例子修改了点。注意一个参数:immediate-check 是否在初始化时立即执行滚动位置检查,默认是true,就在created的时候就执...原创 2018-10-02 13:00:29 · 14175 阅读 · 7 评论 -
beforeRouteLeave指定返回键的路由
1、问题有3个页面:A、B、C大致跳转顺序是这样:1、2、3、4是正常的按钮进行的路由跳转,紫色的线表示浏览器或者手机的返回键。现在我要实现的是在B按返回键会返回A,而实际上却返回了C。到B页面的整个过程在路由栈中大致是这样的:A---B---C---B ,此时按返回键铁定是返回C了,那么这种情况有两种解决办法:2、第一种在页面C中跳转时,就直接返回,而不是push一个路由。th...原创 2018-09-22 10:51:02 · 7057 阅读 · 1 评论 -
Better-scroll 不滚动问题解决
1、层级一定要有一个包裹内容的元素,因为滚动就是content的高度大于wrapper的高度。&lt;div class="wrapper"&gt; &lt;div class="content"&gt; //滚动的内容 &lt;/div&gt;&lt;/div&gt;这个时候可以看开发者工原创 2018-10-05 19:09:09 · 2975 阅读 · 0 评论 -
vue实现添加9张图片,预览删除
一、效果点击加号图片就上传,九张图之后就隐藏加号图片,不能添加了。点击图片进行预览删除:二、准备工作1、这里上传图片使用了vant 的 Uploader 图片上传,使用很简单。2、预览删除是使用一个弹窗的子组件实现的,比较简单,页面就不记录了。弹窗点击删除之后,直接emit信息给父组件。三、代码部分1.HTML <div class="dynamic-imgs ">...原创 2018-10-08 15:40:49 · 6227 阅读 · 0 评论 -
子组件使用watch动态监听父组件数据并更新
1、问题父组件的数据变化,子组件也要跟着变化。一般父向子传值,子组件通过props接收。比如:父组件:传值popInfo<shop-setting :popInfo="popInfoParent" @popClick="popClick"></shop-setting>子组件:接收<script type="text/ecmascript-6">..原创 2018-10-08 16:04:35 · 12332 阅读 · 0 评论 -
嵌套路由之间的传值,go(-1)并同时传参
嵌套路由子路由向父路由传值方式就是父子组件之间的传值方式,即使用emit。假设现在有路由如下:A是父路由,BC是子路由{ path: '/A', name: 'A', component: require('@/components/test/A').default, children: [ { path: '...原创 2018-10-08 17:13:37 · 5521 阅读 · 0 评论 -
嵌套路由中,子页面中看见父页面元素的解决办法
之前父子路由的页面嵌套都是照套路走的,像下面这样:一个嵌套路由 跳转传值的套路如下:但是,出问题了!父页面比子页面长,一旦滚动,子页面挡都挡不住呀!大概就像下面这样:这种情况当然是自己作的,解决办法很简单。把父子页面的总高度都设置为一个屏幕并不能滚动,即height:100vh; overflow:hidden;,再在内部设置滚动。<div class = "addNewGoo...原创 2018-10-28 21:20:59 · 1562 阅读 · 1 评论 -
响应式小例子(vue+ant-design-vue)
响应式小例子记着玩,通过屏幕的宽度改变导航栏的位置代码如下:<template> <div id='index'> <div :class="{left:isLeft,top:!isLeft}"> <a-menu @click="handleClick" :defaultSelectedKey...原创 2019-07-16 12:44:33 · 1631 阅读 · 0 评论 -
vuePress搭建博客,小小模仿组件UI官方文档
一、vuePress +github Page 搭建博客照着官网来即可:快速上手+部署然后我的第一篇博客:https://heye1109.github.io/blog/blog/firstBlog.html二、各组件UI官网,比如ant-design-vue,文档咋写的?各组件UI+代码演示咋写的??写了个简单的按钮组件,大概就知道官方文档咋搞出来的了,传送门博客地址源码gi...原创 2020-10-27 15:39:35 · 1531 阅读 · 0 评论 -
VantUI popup 弹窗不弹出或无蒙层
背景组件PopupTime.vue把vant官网的popup+时间选择器抽成组件: popup1show: true 即弹窗显示&amp;lt;template&amp;gt; &amp;lt;div class=&quot;PopupTime&quot;&amp;gt; &amp;lt;van-popup v-model=&quot;popu原创 2018-09-17 19:54:00 · 26207 阅读 · 1 评论