- 博客(58)
- 收藏
- 关注
RSS订阅原创 vue中如何实现点击某个地方,让echarts生成的图表发生变化
总所周知,echarts中生成的图表只会在mounted中只执行一次类似这种写法mounted() { const lineCharts = echarts.init(this.$refs.charts) lineCharts.setOption({ title: { text: '销售额趋势' }, })}如果有个需求需要你点击按钮进行切换,这个title不能写死的,就要将你这个图表实例定义在data中方便操作,然后监听你点击之后的变化,我这里点击
2022-01-19 15:33:49
1056
原创 elementui 如何修改表格里面cell的样式
首先给你要修改样式的td增加类名<el-table-column prop="address" label="操作" width="150" class-name="operation"></el-table-column>然后css里面.attrBox /deep/ .operation>.cell{ display: flex !important;}.attrBox /deep/ .operation>.cell>button{ min-
2022-01-07 10:34:44
1122
原创 vue中使用less
首先npm安装npm install --save less less-loader@5使用<style scoped lang="less">//你的样式<style>
2021-12-02 17:05:35
524
原创 vue中mixins的理解
我的理解是能不用就不用,除非一个js文件在多个vue页面需要使用再用例如:test.jsexport default {//必须导出 data() { return { reqName: '23' } }, methods: { getReqName() { console.log(this.reqName) } }}其他页面使用import tes
2021-11-26 15:10:01
542
原创 js中的事件循环和宏任务和微任务的理解
参考许多大神的文章,写下自己的理解事件循环:说到事件循环就得谈到js中同步和异步的执行顺序1.javascript将任务分为同步任务和异步任务,同步任务放到主线中,异步函数首先进行回调函数注册。2.当异步任务满足触发条件的时候,异步任务的回调函数会被放入事件队列中。3.然后当主线程的同步任务都执行完毕,系统就会去事件队列中读取异步的回调函数。例如这段代码:// 同步任务 打印 firstconsole.log("1"); setTimeout(() => {
2021-11-10 10:37:00
749
原创 css3骚操作记录
如果你们自己能动手运行,收获会很大1.用CSS动画实现省略号动画.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @k
2021-09-14 16:03:24
108
原创 微信小程序通过getUserProfile和wx.login获取后端的token
后端接口要求encryptedData,iv,rawData,signature,code这个5个参数,前4个在getUserProfile方法中,后一个在wx.login中,最后在掉接口,所以我想到了promise,千万不要在方法的sucess回调中一层一层的写会报错先用一个js文件封装起来/** * promise 形式 getUserProfile */export const getUserProfile=(desc)=>{ return new Promise((resolv
2021-09-13 17:34:50
1518
原创 微信小程序利用缓存实现加入购物车功能
<view class="tool_item btn_cart" bindtap="handleCartAdd"> <view>加入购物车</view> </view>//然后在js里面写data: { goodsObj:{} }, //点击加入购物车 handleCartAdd(){ let {goodsObj} = this.data //goodsObj是我当前商品这个对象 //获取缓存在的.
2021-09-08 15:57:37
1069
原创 微信小程序利用缓存提高接口请求性能
在onload中data: { leftMenuList:[],//左侧菜单数据 rightContent:[],//右侧的商品数据 },onLoad: function (options) { //利用缓存技术来提高性能,先判断本地存储有没有旧数据,有就使用本地的没有就发送新请求 const Cates = wx.getStorageSync("cates") if(!Cates){//不存在就发送请求 this.getCates() }
2021-09-07 14:25:32
433
翻译 2021-09-06
标题什么是 Python While 循环？While 循环剖析while 循环将根据条件的值连续执行代码。它以关键字 while 开头，后跟要评估的比较，然后是冒号。下一行是要执行的代码块。向右缩进。与 if 语句类似，只有在比较结果为真时才会执行主体中的代码。然而，while 循环的不同之处在于，只要评估语句为真，该代码块就会继续执行。一旦语句不再为真，循环就存在，下一行代码将被执行。例子：用户名 = get_username()虽然无效_用户名（用户名）：打印（“无效的用户名”）用户名
2021-09-06 17:37:57
147
原创 uniapp中实现每次点击左侧菜单右边区域都从顶部开始
使用scroll-view容器,借助滚动事件捕获当前距离顶部距离,然后给scroll-top重新设置为0实现滚动<scroll-view class="right" scroll-y id="right" @scroll="scrollChange" :scroll-top="scrollTop"> </scroll-view>data() { return { lastScrollY:0, scrollTop:0 }},methods: { scro
2021-09-03 14:31:38
1081
原创 如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font然后在App.vue中引入 @import url("./static/font/iconfont.css")//这是我的路径这样做完运行一定报错,因为font文件夹下的iconfont.css的路径也要改才行。@font-face { font-family: "iconfont"; /* Project id 2762090 */ src: url('~@/static/font/
2021-09-01 09:46:22
314
原创 vue中关于flv.js的心得操作
项目中做实时监控,我选择了b站的flv.js没想到这么坑，本人做的一屏同时展示4个画面一定要加destroy生命周期export default { data() { return { //存放视频直播的数组 list: [], } }, methods:{ video(){//视频列表接口,将拿到数据放入数组 videoList.get().then(res=>{ this.list = res.d
2021-08-25 16:35:08
1083
原创 vue路由守卫判断用户是否登录，如果没登陆就跳转到登录
router.beforeEach((to, from, next) => {//路由跳转中 const nextRoute = ['About'];//将所有需要登陆才显示的页面的路由都放进一个数组，我这里是about页面 // 开启进度条 NProgress.start() if(nextRoute.indexOf(to.name) >= 0) { //判断要进入的页面路由是否需要登录才能进入,如果是就判断登录状态 if (getToken()) {//如果登录
2021-08-19 11:17:47
1475
原创 js闭包的理解
参考一峰大神的闭包写的个人见解Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，在函数外部自然无法读取函数内的局部变量。出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 function f1(){ var n=999;
2021-07-21 11:48:45
74
原创 封装request
/** * axios封装 * 请求拦截、响应拦截、错误统一处理 */import axios from 'axios'import router from '../router';import api from './request_api.js'import Cookies from 'js-cookie'import { getToken,removeToken} from '@/utils/auth'import { Toast } from 'vant';import s
2021-07-14 17:47:49
64
原创 如何在vue中使用剪裁图片插件cropperImage
首先在components文件下创建一个剪裁组件我这里叫CropperImage/CropperImage.vue完整代码<template> <div class="cropper-content"> <div class="cropper-box"> <div class="cropper"> <vue-cropper ref="cropper" :img="option.img" :outputSize="option.ou
2021-07-13 15:04:03
277
原创 vue中安装sass
安装了几次，发现很坑的地方安装必须@版本号不然不行npm install [email protected] --save-dev //安装sass-loadernpm install [email protected] //安装node-loadernpm install style-loader --save-dev //安装style-loader这个可以不用@然后再vue.config.js中写 css: { loaderOpt
2021-07-13 14:12:54
1017
原创 vue中使用js-cookie
先安装npm install js-cookie --save然后再你想使用的组件页面中import Cookies from 'js-cookie'mounted(){ Cookies.set('ss','222')},
2021-07-13 10:55:40
72
原创 解决vue中路由跳转同一个路径报错
在vue项目中，如果使用$router.push跳转到一个相同的路由会报错如何解决vue-router在3.1.0版本之后，push和replace方法会返回一个promise对象，如果跳转到相同的路由，就报promise uncaught异常1.可以回退版本2.在router/index.js导入VueRouter的时候，进行全局的处理const originalPush = Router.prototype.pushRouter.prototype.push = function push(l
2021-07-13 10:22:43
1040
原创 vue中安装使用echarts
安装 npm install echarts --save在main.js中，如果报错建议重装或者回退版本import echarts from 'echarts' // 引入echartsVue.prototype.$echarts = echarts再你想用的页面中<div ref="chart" style="width:100%;height:376px"></div>在方法中 mounted(){ this.getEchartData()
2021-07-08 21:29:28
1140
原创 如何在vue中使用图形验证码
首先在component问价夹下创建一个新文件夹并叫identity,并在里面编写组件<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script> export default { name:
2021-07-08 20:57:03
1185
原创 如何在vue-cli3中使用tinymce
脚手架vue-cli3首先安装npm install [email protected] @tinymce/[email protected] -S安装成功后，在node_modules目录中，查找tinymce/skins目录，将skins目录拷贝到public目录下。并到官网中下载中文语言包找到zh_CN.JS拷贝出来然后在components中创建文件夹tinymce和tinymce.vue在组件中写配置<template> <div class="tinymce-ed
2021-07-08 15:10:22
1087
原创 elementui更改默认样式
更改tabs默认样式 .mytabs .el-tabs__item { font-size: 18px; } .mytabs .el-tabs__item:hover{ color: #374795 !important; } .mytabs .el-tabs__item.is-active{ color: #374795 !important; } .mytabs .is-active i{ color: #374795 !important; }更改inpu
2021-06-18 15:59:14
120
原创 vue-cli3中安装lib-flexible和px2rem
先安装npm i lib-flexible postcss-px2rem --save然后再main.js中import 'lib-flexible'由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个meta name=“viewport” 标签删除或注释！！！配置postcss-px2rem创建vue.config.js,再文件中写 css: { loaderOptions: {
2021-05-27 14:49:29
438
原创 vue中实现美团双级联动菜单
利用better-Scroll插件来实现移动端滚动效果记得先安装再引入<div class="core-container" > <div class="wrapper" style="height:500px;overflow:hidden"> <div class="scroll-content"> <div class="scroll-item" v-for="(item, index) in listsd" :ke
2021-05-21 11:31:02
646
原创 h5配合css和js如何自定义单选框
既然是自定义单选框所以要清除原生的单选框样式input, textarea { //清除所有input和textarea的原生样式 border: 0; -webkit-appearance: none; -moz-appearance: none;}html5 <div class="radioBox"> <div class="radioItem"> <label> <div
2021-05-17 09:57:31
360
原创 uniapp中如何长按保存图片到手机相册和复制操作
<image class="currency-qrcode" :src="imgSrc" mode="" @longpress="code(imgSrc)"></image>方法code(url) { uni.downloadFile({ url, success: (res) => { console.log(res.tempFilePath) // 获取到图片本地地址后再保存图片到相册(因为此方法不支持远程地址) uni.saveImag
2021-04-30 11:28:17
1719
原创 uniapp中如何修改单选框和复选框的默认样式
在app.vue中写/* 选择银行卡单选框*/ .card uni-radio .uni-radio-input { /*.card是我的选择器名字不用加*/ border:1px solid #7E93DC; border-radius: 50% !important; color: #ffffff !important; background: transparent !important; } .card uni-r
2021-04-25 16:11:25
1786
原创 隐藏滚动条或更改滚动条样式加制作三角形
.scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /*必须*/ } .scroll-container::-webkit-scrollbar { width: 8px.
2021-04-25 09:41:47
523
原创 swiper.js使用心得
var swiper = new Swiper('.swiper-container', { ——请勿全部复制，根据需要添加子项 spaceBetween: 30, //slide之间距——间距30 resistanceRatio : 0,//禁止反弹 slidesPerView: 'auto', //多列——宽度自动 slidesPerGroupSkip: 3, //设置 前n个不列入分组 ——前3个不列入分组，将单独出现 slidesP.
2021-03-29 15:32:56
277
原创 响应式中解决图片大小不一样，导致盒子高度不一样的问题
直接用比例的方式来做,拿到图片宽除以图片高得到比例并且配合onresize来动态计算就好了很简单var Lheight = $(".swiper-slide:nth-of-type(1)>.slide_header").outerWidth() / 0.9; $(".swiper-slide>.slide_header").css("height",Lheight); /*让所有图片展示的地方区域等高 */ if($(wi
2021-02-22 17:08:26
536
原创 css3如何实现倒影效果
直接上代码 -webkit-box-reflect: below -357px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(250, 250, 250, 1)));
2020-12-29 11:16:37
170
原创 仿淘宝商品详情页图片滑动并且数字也跟着变化
今天遇到需求需要做个淘宝那样的商品详情页如图（这里只差放图片了）支持移动端，当然用的是swiper.js上代码html代码<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide
2020-12-23 15:43:28
851
原创 如何让文字溢出自动变成省略号
在你的p标签或者是什么上面加入这段代码 display:-webkit-inline-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; /*方向*/ -webkit-line-clamp:2; /*显示多少行文本*/
2020-12-18 15:59:14
378
1
原创 如何实现点击微信内置浏览器返回按钮，返回指定页面，或者原地刷新
$(function(){ function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "http://vote.iziyan.cn/index.php?g=Wap&m=Vote&a=index&id=9&token=Eioa5C5oj3S32qhH");//这里就是跳转的地方 } //将当
2020-11-28 13:02:12
955
原创 关于显示当前日期并且自动生成后面的日期,月份也正常显示
先上效果图如何实现这种动态生成的日期,当前日期高亮的效果本人前端入门，代码可能比较笨,欢迎大佬指正新方法html代码 <div class="seckill"> <h4>劲<span>情</span>秒杀</h4> <div class="seckill_box"> <a href="javascript:void(0)"></a>
2020-11-23 18:19:28
203
原创 解决点击事件让背景变红，在点击背景变正常，并且可以多选的效果
先上效果图,本人前端入门,用的方法比较笨，欢迎大佬说说其他方法想实现这种效果常规的加个布尔值,然后判断布尔值是true,还是false来改变背景颜色肯定不行,如果只是针对一个就可以这样做，但是用户不可能只选择一个吧,所以关键在于注册事件的时机，给那一个div.options中的那一个a标签注册事件，而不是div.options下所有的a注册点击事件。给所有的a注册事件必定出现问题。html代码 <div class="content_right"> <div cla
2020-11-20 10:51:02
478
原创 如何修改textarea中placeholder的字体
textarea::-webkit-input-placeholder { /* WebKit browsers */ /* placeholder颜色 */ color: #ff0000; /* placeholder字号 */ font-size: 0.14rem; } textarea:-moz-placeholder { /* Mo...
2020-11-19 16:45:35
1072
原创 获取滚动条距离底部的高度
今天写移动端遇到了需求要获取滚动条距离底部的高度 var wHeight = $(document).height(); var scrollHeight = wHeight - $(document).scrollTop(); //获取滚动条距离底部的高度
2020-11-18 14:56:24
642
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人