weixin_48771583的博客

原创 vue3实现canvas图片和div整合下载

图片加载完成事件中完成canvas函数的绘画。引入到图片加载事件所在的文件（父组件）中。新建一个文件放置所要整合的div。下载的图片已经生成div。在setup中的实现函数。

原创 如何给项目加上水印

前端加水印

原创 点击防抖的css

按钮禁止点击:pointer-events: none; 不触发点击事件cursor: not-allowed 出现禁止点击的图标

原创 csdn文章撰写学习

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

原创 2021-06-29

vue 中图片引用需加require()this.$emits子组件出发父组件函数传值时，父组件中定义的函数不应加（），否则传值无效

原创 echarts toolbox自定义图片加载不出来

toolbox: {feature: {saveAsImage: {},myTool1: {show: true,title: ‘详情’,icon: ‘M271.68 304.64h472a32 32 0 1 0 0-64h-472a32 32 0 0 0 0 64z m0 234.88h408.64a32 32 0 0 0 0-64H271.68a32 32 0 1 0 0 64z m0 198.4h376.64a32 32 0 1 0 0-64H271.68a32 32 0 0 0 0 64

原创 获取下拉框选中的值和下标项

var options=$("#selectKeyId option:selected");//获取当前选择项.let delarers_key = options.val();//获取当前选择项的值. let delarers_keyText = $('#selectValId').val();//获取搜索输入框的值

原创 2021-03-05

去掉滚动条css样式#image_analysis_top_data3::-webkit-scrollbar{width: 0;}

原创 js调用浏览器打印pdf中内容

<iframe style="display:none" id="printIframe" src="<%=data%>"></iframe><script type="text/javascript">$(document).ready(function(){ doPrint(); });//点击打印按钮，触发事件】function doPrint(){ $("#printIframe")[0].contentWin

原创 attr 和 prop 的区别介绍

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法

原创 router-link的补充属性

在前面的router-link中，我们只是使用了一个属性：to，用于指定跳转的路径它还有其他的属性：tag: tag可以指定router-link之后被渲染成什么组件，router-link默认会被渲染成a标签。 表示会渲染成一个button元素，而不是a标签replace: replace不会留下历史记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中，即默认情况下使用的是pushStateactive-class: 当router-link对应的路由匹配成功时，会自动给当前元素

原创 Vue组件引入外部的js文件的某方法或者静态数据

遇到问题我们有时候会把一些公共方法写到一个单独的js文件，这样方便多处使用该方法，也很方便找到或者修改方法。例：我们在写项目的时候会遇到加载本地城市列表的数据，如果放到vue组件里，是极其的不方便，我们来看看怎么解决这个问题。解决方法引入js的某个方法方法一1.在公共js里写方法并export导出。export function add(a) { let b = 2; return a+b;}2.在组件 import 引入import { add } from '../../d

原创 ES6之export和export default的区别

export的使用1.直接输出export let words = 'hello world!!!' export function output() { 　　// ... }2.先定义再输出复制代码let firstWords = 'hello'let secondWords = 'world'let thirdWords = '!!!'function output() { // ...}export {firstWords, secondWords, thir

原创 vue/cli 3 引入 使用jQuery

注意这里配置的是vue-cli3.0引入jquery的方法，不是vue-cli2.0的配置方法一、安装jquery npm install jquery --save二、一般安装成功后在package.json文件内的dependencies项中会有"jquery": “^1.12.4”，如果没有可以手动添加。需要注意的是，现在我们都是直接使用模板创建项目的，所以第一步是可以省略的(不要说我第二步才说第一步可以省略，这是你自己的问题，看任何东西都是先看了再去做的)。三、打开.eslintrc.j

原创 error Parsing error: Unexpected token import的解决方案

步骤一：在.eslintrc.js中配置```javascript"parserOptions": { parser:'babel-eslint', },步骤二：在npm中配置安装：```htmlcnpm install --save-dev @babel/plugin-syntax-dynamic-import

原创 Module Error (from ./node_modules/eslint-loader/index.js):解决办法

vue启动项目报如下错误：Failed to compile../src/components/Vcontent.vueModule Error (from ./node_modules/eslint-loader/index.js):E:\myvue\src\components\Vcontent.vue4:15 error Parsing error: unexpected-character-in-attribute-name vue/no-parsing-error4:37 er

原创 vue中的常用的数组方法

(1).filter()filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。是否改变原数组：否是否对空数组进行检测：否语法：const arr= [32, 33, 16, 40];const arr1 = arr.filter(item => item >= 18)console.log(arr) // [32, 33, 16, 40]console.log(arr1) // [32, 33, 40](2).map()map()

原创 vue-router传递参数分为俩大类

编程式的导航 router.push声明式的导航 编程式的导航router-push传递的参数分别为俩种类型字符串字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式简单但不能传递参数this.$router.push("home");对象想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由，查询参数1. 命名路由命名路由的前提是在注册路由的地方给路由命名如命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标页面接收传递参数.

原创 vue杂笔记

文件上传只用post方法转义用 \

转载 v-cloak

原创 vue脚手架的常用方法

created(){}mounted(){}data(){}watch:{}methods:{}

原创 vue常见面试题

Vuex的作用vuex是一个专门为vue.js应用程序开发的状态管理模式vuex可以帮助我们管理共享状态，也就是管理全局变量vuex的几个核心概念：vuex使用一个store对象管理应用的状态，一个store包括：state,getter，mutation,action四个属性state:state意为’状态’，是vuex状态管理的数据源getter:getter的作用与filters有一些相似，可以将state进行过滤后输出mutation:mutation是vuex中改变state的唯一途

原创 在vue脚手架环境利用vant组件简单实现移动端购物商城系统

用vue脚手架创建好项目，进行以下操作①下载vant插件在终端或cmd中运行npm i vant -S在main.js中全局配置vantimport Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);②下载安装axios在终端或cmd中运行npm install axios -S在main.js中全局配置axiosimport axios from 'axios'Vue.prototype.$axios .

原创 在vue的脚手架环境中利用elementui实现后台系统

后台实现效果：一、用Vue脚手架创建项目并运行①下载elementui插件在终端中或cmd中运行npm i element-ui -S②在main.js中配置import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);③在views下创建Classify.vue(商品分类)，List.vue(商品列表)，Index.vue④配置路由const

原创 前端工程师必备网站

https://www.iconfont.cn/ icon小图标http://www.bshare.cn/ "分享"代码的网站https://github.com/ github官网https://www.swiper.com.cn/ swiper轮播插件网站http://www.jq22.com/ jquery插件网站"http://www.jq-school.com jquery插件网站https:

原创 css多行或单行省略解决办法

css多行文字多余的部分省略号隐藏的解决办法display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;

原创 todo 备忘录

todo备忘录的效果及源码<template> <div id="big-box"> <div id="title"> <span>ToDoList</span> <input type="text" placeholder=" 添加ToDo" v-model="value" @keydown.enter="add"> </div> <d

原创 mvc和mvvm

M V CModel（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。综合以上内容，实际上你应该可以通过面向对象的基本思想来推导出controller出现的原因：我们所有的App都是界面和数据的交互，所以需要类来进行界面的绘制，于是出现了View，需要

原创 methods和computed的区别

methods和computed的区别methods是函数调用，而computed是属性调用computed有缓存，有缓存则下次调用相同方法时不需要加载，而methods没有缓存

原创 v-for

v-for的列表渲染one<ul> <li v-for="(item,index) in list" > {{index}},{{item}} </li></ul>vue:new Vue({el: ‘#app’,data: {list: [‘html’,‘css’,‘js’,‘jq’],})效果：two<ul> <li v-for="item in user">{{item.name}}</li

原创 v-bind

利用vue v-bind点击字体，字体颜色改变 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="te

原创 v-on

.stop 阻止冒泡行为html: <h2>阻止冒泡行为</h2> <div class="item" @click="click1"> <div class="inside" @click.stop="click2"> <div @click.stop="click3" class="iin"></div> </div> </div>vue ：methods:{cl

原创 v-model

.lazy 取代 input 监听 change 事件 <textarea rows="" cols="" v-model="value"></textarea>vue:new Vue({el:’#app’,data:{vue:’’ }})效果:失焦后其他值再随之改变.number 输入字符串转为有效的数字，若是字母开头，默认为字符串，则不过滤 <textarea rows="" cols="" v-model="value"><

原创 v-if和v-show的异同

学习vue的第一天在这里插入代码片#v-if和v-show相同点：v-show和v-if都能控制元素的显示和隐藏。实现本质方法不同:①v-show本质就是通过设置css中的display设置为none，控制隐藏。②v-if是动态的向DOM树内添加或者删除DOM元素，初始值为false,则不编译。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在