![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 56
Janicelily
哪有什么大神,不过是一行一行敲来的,加油呀
展开
-
Vue3.2 使用笔记总结【自学复习使用】
1、起初 Vue3.0 暴露变量必须 return 出来,template中才能使用;2、Vue3.2 中 只需要在 script 标签上加上 setup 属性,组件在编译的过程中代码运行的上下文是在 setup() 函数中,无需return,template可直接使用。一、文件结构<template> // Vue2中,template标签中只能有一个根元素,在Vue3中没有此限制</template><script setup></script&g原创 2022-02-22 14:23:51 · 4913 阅读 · 3 评论 -
自定义 toast 组件
利用 Vue.extend一、新建 toast.js 文件import Vue from 'vue'import ToastVue from './toast.vue';const ToastConstructor = Vue.extend(ToastVue);let removeDom = event => { event.target.parentNode.removeChild(event.target);};ToastConstructor.prototype.close原创 2021-08-17 10:26:58 · 287 阅读 · 0 评论 -
Vue中事件绑定的原理
之前我搜这个原理的时候,好多文章,都只写了俩句话:原生事件绑定是通过addEventListener绑定给真实元素的。组件事件绑定是通过Vue自定义的key$on实现的。那具体是怎么实现的呢, 没有说?就现在具体看一下。// 原生事件绑定<div @click="fn()"></div>// 组件绑定<my-component @click.native="fn" @click="fn1"></my- component>原理:事件原创 2021-02-25 17:33:49 · 1295 阅读 · 1 评论 -
时间线 timeline 样式修改,时间加在右侧
公司提出的需求如图, 时间线 要求时间在右侧, 且加上年的区分。 后端返回的数据 仅为每一条一条的数据技术栈 :element-ui官网 只有 top 和 bottom 的位置参数设置。通过修改 css样式进行。第一步选中时间这个元素 发现了这个类样式然后修改它就可以, 如下.el-timeline{ /deep/ .el-timeline-item__timestamp.is-bottom { position: absolute; left: -100px;原创 2020-09-10 18:07:06 · 4938 阅读 · 0 评论 -
el-form 的label 旁如何增加自定义 icon
去掉 上面的 label用 slot= label 即可 自定义原创 2020-07-23 19:06:18 · 1908 阅读 · 0 评论 -
如何防止用户打开控制台修改css(防止去掉水印)
加水印的需求都是为了不可去除的。所以一定要防止用户通过打开控制台, 进行css操作,再截图。用到的 api 是window.MutationObserver 。话不多说, 上代码:思路就是:当你监控到某一个元素样式变化了,你就再给style 画上。const canvasWM = ({ container = document.body, width = '160px', height = '130px', textAlign = 'center', font = '15px原创 2020-06-12 18:24:13 · 1550 阅读 · 0 评论 -
textarea 跟随光标位置 出现 提示框(类似输入法 的 功能)
实现思路利用 e.target.selectionStart 可以知道光标的 位置, 但是面对enter换行 与 空格的时候, 就不起作用了。而且 e.target.selectionStart 只能知道在文本字符串的位置,我们需要的是距离边框的位置, 这样才能给提示框的 left 和 top 赋值。所以 思路是 用一个 一模一样的 div 在 textarea 的同样的位置, 进行visibility hidden。光标的位置插入一个span 标签, 获取span 的offsetTop 和 off原创 2020-06-11 18:27:37 · 1563 阅读 · 1 评论 -
如何给SVG的path加上箭头以及动态改变方向
在元素中定义的图形不会直接显示在SVG图像上一、所以先来定义出 箭头的图形:<defs> <marker id=‘markerArrow‘ markerWidth=‘13‘ markerHeight=‘13‘ refx=‘2‘ refy=‘6‘ orient=‘auto‘> <path d=‘M2,2 L2,11 L10,6 L2,2‘ s...原创 2020-05-08 14:34:56 · 3977 阅读 · 0 评论 -
vue-router如何判断是从哪个路径跳转过来的?
有时我们需要分别对从不同的路径跳转过来的,进行不同的操作。在导航转入新的路由前获取。我们可以在接下来的组件的beforeRouteEnter守卫中获取数据,可以拿到from值,调用next方法进行函数处理。export default { data(){ return { a: true, } }, beforeRouteEnter (to, f...原创 2020-05-08 14:07:27 · 14438 阅读 · 5 评论 -
vue 自定义分模块写api 文件
一、vue的实例属性$options。vue的实例属性$options是用来获取定义在data外的数据和方法的。二、在每个模块定义自己的api 文件vue 中引用<script>import xxxapi from './xxxapi';export default{ api: [xxxapi], data(){ return {} }, method...原创 2020-04-23 15:50:39 · 986 阅读 · 0 评论 -
前端下载功能的实现
第一种第一种是后端提供的接口,是一个正好的地址,所以前端是非常的简单的,只需要window.open 或是window.location.assgin( url);第二种后端需要你先传筛选条件过去,然后获取到结果;axios正常写,但是需要注意 要写头部headers与类型responseType!!然后将文件二进制的格式 通过createObjectURL转为一个可以访问的地址,再创...原创 2019-06-04 13:52:06 · 4915 阅读 · 0 评论 -
搭建项目 路由自动化
当新建一个项目的时候,很多人协同开发,如何路由写的很乱就会有造成很多工作量,甚至后期不好维护,因此自动化是有必要的。一、定义modules文件夹中每一个模块的暴露格式,例如1、首先将modules中的全部模块都在index中暴露出去import classManage from './classManage'; // 课程管理import staticsAnalisis from './s...原创 2019-12-22 15:31:33 · 299 阅读 · 0 评论