今天代码敲了吗-CSDN博客

原创 vue中的inject和provide

在Vue中，provide 和 inject 是用来实现祖先组件向子孙组件传递数据的一种高级组件通信方式。provide 可以在祖先组件中定义数据，而 inject 可以在子孙组件中接收这些数据。这种传递方式不受组件层级限制，非常适合于跨多层级的组件通信。

2024-04-17 11:02:14 305

/ 存储年份数据的数组// 获取前一年的数据${// 存储年份数据的数组 let list = [ ];// 获取前一年的数据 const prevYear = {name : Number(` ${ currentYear - 1 } `) , label : ` ${ currentYear - 1 } 年 ` };// 获取当前年份 const currentYear = new Date() . getFullYear();

2024-04-16 10:08:17 224

原创折叠面板组件（vue）

折叠面板组件（vue）

2024-04-15 09:11:39 480

原创 Vue项目中ESLint配置（VScode）

Vue项目中ESLint配置

2022-06-23 13:14:05 12391 1

原创 vue moment 获取前一天的，前一个月，前一年的日期

vue moment获取前一天的，前一个月，前一年的日期该方法是已moment.js为基础的，使用时请先检查是否有moment.js获取前一天的日期 moment().subtract(1, 'day').format('YYYY-MM-DD')获取前一个月的日期 moment().subtract(1, 'month').format('YYYY-MM-DD')获取前一年的日期 moment().subtract(1, 'year').format('YYYY-MM-DD')如果你想

2022-02-22 08:04:23 18093

原创 vuejs2.x 封装组件,并发布到npm

vuejs2.x 封装组件,并发布到npm创建项目创建组件编写每个组件对应的配置文件最外层index.js文件夹配置配置文件 package.json配置文件webpack.config.js打包测试发布创建项目封装vue的插件用webpack-simple很合适，vue init webpack-simple name 此命令创建我们的项,因为webpack-simple创建的项目文件不会很复杂，操作起来更方便创建组件src下新建components文件夹用于存放所有开发的组件 -> 为每

2021-09-07 14:17:54 335 2

原创 vue 自定义树组件并能拖拽

vue 自定义树组件并能拖拽（目前只限于二级拖拽）安装拖拽组件依赖树结构样式使用拖拽组件 vuedraggable效果图安装拖拽组件依赖npm i -S vuedraggable树结构样式<template> <div> <ul class="pic-list clearfix"> <template v-if="list"> <div class="one-li"> <d

2021-08-03 13:27:41 1419

原创 Vue 页面跳转到指定位置

Vue 页面跳转到指定位置页面跳转页面scriptstyle进阶版：随着页面滚动变换导航菜单样式监听页面滚动方法销毁滚动页面跳转页面<template> <div class="groups" id="groups">  <div class="group-list"> <div v-for="item in groupList"

2021-07-20 13:24:35 2871 1

原创 VUE 根据不同命令打出不同环境的包

VUE 根据不同命令打出不同环境的包第一步配置全局变量第二步配置package.json来启动不同的命令第三步引用第一步配置全局变量在项目根目录创建配置文件：.env.test在.env文件中定义变量需要以 VUE_APP_ 作为前缀，最好都是大写。根据不同的需求定义多个变量NODE_ENV = 'production'VUE_APP_API = ""VUE_APP_TYPE = ""第二步配置package.json来启动不同的命令"scripts": { "dev":

2021-04-21 11:11:49 350

原创 Vue 使用 fraola——vue-froala-wysiwyg

vue-froala-wysiwygfroala官网安装npm install vue-froala-wysiwyg --save在main.js全局配置import 'froala-editor/css/froala_editor.pkgd.min.css'import 'froala-editor/css/froala_style.min.css'import 'froala-editor/js/froala_editor.pkgd.min.js'import 'froala-edit

2021-04-20 09:13:54 1935

原创 vue 腾讯地图（多个坐标，坐标选中效果）

vue 腾讯地图（多个坐标，坐标选中效果）封装成组件 map.vue<template> <div class="locationMap"> <div id="container" ref="mapContainer"></div> <div v-show="loading" class="loading"> <van-loading color="#07c160"&gt

2021-01-28 16:20:39 1372

原创 Vue 百度地图baidu-map多点显示

Vue 百度地图baidu-map多点显示安装baidu-map$ npm install vue-baidu-map --save引入main.jsimport BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY'})代码我这是把它封装成了组件，也可以直接做成一

2020-12-23 08:14:23 2068 2

原创 Vue 使用Vant制作H5开始时间至截止时间选择器

Vue 使用Vant制作H5开始时间至截止时间选择器selectDateOrName.vue<template> <div> <template v-if='dateFilter'> <van-cell is-link @click="showPopup('start')" title="开始时间" :value="formatStartDat

2020-12-18 13:56:45 1370

原创 Vue Vant点赞效果

Vue 点赞效果 <div class="clickLike"> //我使用了vant中的图标，大家可以使用别的图片或者其他组件的Icon来替代 <van-icon name="like-o" size="16" @click="likeClick" :color="num?'#F1050A':''" />

2020-12-17 13:16:43 1891 1

原创 Vue 使用IView自定义验证码组件

Vue 使用IView自定义验证码组件<template> <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit"> <FormItem prop="phone"> <Input v-model="form.phone" placeholder="请

2020-12-01 11:08:44 900

原创 Vue 使用websocket

Vue 使用websocket methods: { initWebSocket() { let url =''wss://localhost:8080'' this.websocket = new WebSocket(url) // 连接错误 this.websocket.onerror = this.setErrorMessage // 连接成功 this.websocket.onopen = this.setOnope

2020-11-11 16:53:21 565

原创 Vue 返回上一页页面不刷新

Vue 返回上一页页面不刷新场景：首页点进列表页时要刷新数据，信息页返回列表页时不刷新数据首先在router.js中配置 { path: '/home', name: 'home', meta: { title: '首页', }, component: () => import('./views/home/index.vue'), }, { path: '/info/:id', name: 'info', meta: {

2020-11-04 13:21:52 2150

原创 Vue iView table高度随浏览器窗口大小变化

Vue Iview table高度随浏览器窗口大小变化在mounted中监听<template> <div class="tables"> <Table class="table" :height="tableHeight" :columns="columns" :data="list" :loading="loading" :border="tru

2020-10-28 15:04:24 889

原创 Taro React使用echarts 词云

Taro React使用echarts 词云安装组件和配置npm install echartsnpm install echarts-wordcloudnpm install --save echarts-for-react引用import ReactEcharts from 'echarts-for-react';import * as echarts from "echarts";import "echarts-wordcloud";使用方法class wordcloud ex

2020-10-15 10:44:23 1446 1

原创 Vue 自定义返回顶部按钮

Vue 实现返回顶部按钮<template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <d

2020-10-10 10:48:08 2831 15

原创 Vue router路径跳转

Vue 路径跳转方法一<div @click="openPage(`/index`),{name:'2'},{type:'2'}"></div>//path,跳转的路径；query，query的参数，params，params的参数 openPage(path, query = {},params={}) { let routeUrl = this.$router.resolve({ path, query,params }); window.o

2020-09-21 09:55:55 1115

原创 VSCode插件安装完成后的配置二

VSCode插件安装完成后的配置二该配置适合喜欢使用单引号的用户，该配置使用后ctrl+s将没有自动格式化的效果，但当你使用shift+alt+d时会实现配置里的效果，优先使用单引号，而不是像配置一那样变为双引号其他效果跟上个配置一样。{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 4, // #值设置为true时，每次保存的时候自动

2020-09-12 12:13:30 1925

原创 Vue IView Table 按照数据默认勾选，分页之后也不会消失

Vue IView Table 按照数据默认勾选，分页之后也不会消失<Modal v-model="isParams" footer-hide title="参数" width="800"> <Table ref="table" :columns="columnsParam" :data="listParam" :show-header="true" @on-select="

2020-09-10 10:08:03 2396 1

原创 VSCode插件安装完成后的配置

Vue 组件安装完成后的配置VSCode插件安装完成后，有些插件如果你想要完整的使用其中的功能得在settings.json中就行配置，接下来是我常用的一些配置{ "workbench.iconTheme": "vscode-icons", "window.zoomLevel": 0, "files.autoSave": "afterDelay", "eslint.runtime": "", "editor.codeActionsOnSave": {

2020-08-24 09:15:29 4582 5

原创 Echarts 点击事件，this无法正确获取到对应的属性，this的指向问题

Echarts 点击事件，this无法正确获取到对应的属性，this的指向问题Echarts 点击事件<template> <div class="radiopie"> <div ref="radiopieChart" class="radiopieChart"></div> </div></template><script>import { mapState, mapMutations } fr

2020-08-17 08:33:36 3609 1

原创 Vue 自定义多选组件

Vue 自定义多选组件子组件（选项卡）checkBoxCard.vue<template> <div class="checkBoxCard"> <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()"> {{ name }} </div> </div></template>&lt

2020-08-10 10:53:57 2301 2

原创 Vue vue-esign签字板

Vue vue-esign签字板使用vue-esign让用户能够在手动签字并返回为base64或者file格式的文件流安装npm install vue-esign --save在main.js中全局引用import vueEsign from 'vue-esign'Vue.use(vueEsign)Demo<template> <div class="esigns"> <vue-esign ref="esign" st

2020-08-04 13:01:50 4471 2

原创 Vue Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作安装npm install v-viewer引用在main.js文件下全局引用import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)使用方法 <viewer :images="imgList"> <img class="imgsrc"

2020-08-03 16:23:05 1984 2

原创 VSCode 开发前端插件

VSCode 开发前端插件VUEvueVUEvue

2020-07-30 13:45:33 4715 4

原创 Vue vue-print-nb实现页面打印

Vue vue-print-nb实现页面打印安装在main.js中全局引入页面中使用安装npm install vue-print-nb --save在main.js中全局引入import Print from 'vue-print-nb'Vue.use(Print);页面中使用备注：只会打印id=printMe内的网页<template> <div class="table"> <div class="tableList">

2020-07-29 10:23:01 7321 2

原创 Vue swiper点击按钮轮播失效，按F12弹出编辑器后才有效

Vue swiper点击按钮轮播失效，按F12弹出编辑器后才有效我们在使用swiper的时候经常会跟其他框架一起使用，比如Vant,iview。有时候回遇到跟其他框架中的组件一起使用时，swiper的点击效果，轮播都不能正常使用，但是仅仅使用swiper时却能正常轮播。有时候会报无法找到$swiper的错误，就拿swiper中的thumb功能和iview中的Modal组件来说swiper中的thumb功能和iview中的Modal组件swiper中的thumb在vue中使用的基础代码<temp

2020-07-14 13:41:08 2385 2

原创 Vue vant 使用 ImagePreview 预览图片

Vue vant 使用 ImagePreview 预览图片场景1编列数组生成图片，点击预览图片 <div class="zoom" v-for="(item, index) in listData" v-show="item" :key="index" > <img v-if="item" class="img"

2020-07-03 11:07:40 15879 8

原创 Vue Echarts 漏斗图（金字塔型）

Vue Echarts 漏斗图（金字塔型）一般的漏斗图<template> <div class="timeLineview"> <div style="height:400px" ref="categoryChart"></div> </div></template><script>//调用echartsimport echarts from "echarts";export defaul

2020-06-29 11:05:58 10193 1

原创 Vue Echarts柱形图(带滚动效果)

Vue Echarts柱形图代码<template> <div class="timeLineview"> <div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div> <div v-bind:style="{ height: noHeight + 'px' }" class="nomore"> {{ noData }}

2020-06-28 11:33:26 2621

原创 vue iview Table 表格实现分页效果

<template> <div class="table"> <Table :columns="columns" :data="pageData" :border="true" > <Page :total="progressData.length" :current="page" :page-size="30" show-total

2020-06-23 11:26:59 2418

原创 Vue Vant文件上传进阶版

Vue Vant文件上传进阶版按照当前图片数保存数据，可以任意修改，当一次访问有数据时，实时显示<template> <div class="imglist"> <div class="h2">文件上传</div> <div class="upload"> <van-uploader v-model="fileList" multiple capture="c

2020-06-15 14:10:19 1839

原创正则显示0-100的数字（可以是小数也可以是整数，不能是01,02可以是0.1）

正则显示0-100的数字（可以是小数也可以是整数，不能是01,02可以是0.1）第一种，显示0-100的整数 var reg = /^((?!0)\d{1,2}|100)$/; if (!value.match(reg)) { return 0; } else { return value; }第二种不用正则，直接用if判断 if(parseFloat(value )){ if (value == "") {

2020-06-12 08:57:01 9624 3

原创 vue 给数组添加新对象并赋值

vue 给数组添加新对象并赋值方法一适用于数组就只有一组listData: [{name:"张三",age:18}],//直接添加对象listData.sex="男"方法二适用于数组就有多组信息listData:[],list:[{"张三","李四"}]//比如想把另外一个数组中编列出来的值加入到这个数组中 for (let index = 0; index < this.listlist.length; index++) { this.listData

2020-06-11 09:38:53 37622 2

原创 css 选取第一个标签元素

css 选取第一个标签元素方法一：直接获取对应class类名的第一个标签<div class="idcardlist"><div class="idcard">1</div><div class="idcard">2</div></div><style>.idcard:first-child { background-color: red;}</style>方法二：获取标签下

2020-06-08 14:45:44 20782

原创 css树状图

css树状图效果图 <div class="tree"> <ul> <li> <a href="#"> <div class="heda"></div> </a> <ul> <li> <a href="#"> <di

2020-06-06 13:50:02 1772 1

ES6学习笔记.docx

微前端qiankun在子应用中引入百度地图时无法显示，如何解决？