- 博客(26)
- 收藏
- 关注
RSS订阅原创 echarts雷达图实现动态扫描效果
首先画出一个雷达图，然后使用css画出旋转光圈效果定位到雷达图正中心，就实现了该特效。其中绿色扇形光圈是顺时针转动的。
2023-05-12 16:19:07
1669
2
原创 记录vue+ts项目犯过的错误
1. ref的用法this.$refs.dialogs.dialogVisible=true这种用法会报错，应改为：(this.$refs.dialogs as any).dialogVisible=true
2021-05-25 12:08:08
182
原创 vue+elementUI实现多级联动筛选
新版后台，需要实现一个多级联动的筛选栏目，实现以下效果：（点击筛选按钮弹出下列选项框）首先父组件调用子组件模块：通过变量expands赋值给子组件。<Screen :expand="expands"></Screen>子组件代码：<template> <div class="filter-more"> <div style="width: 100%; min-height: 50px; background: #f9f9fc"&g
2021-03-26 14:01:43
3396
原创 elementUI日期选择器快速选择（今天，昨天，本周上周，本月上月，1234季度）
<template> <div> <div class="block"> <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="" start-placeholder="" end-placehol
2021-03-24 15:40:07
3435
原创 使用echarts实现半圆饼图
要实现的效果如下所示： <div id="myChart" :style="{ width: '285px', height: '285px' }"></div>在mounted里调用如下代码即可。 drawLine() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("myChart")); // 绘制图表
2021-03-20 14:24:01
3821
原创 vue项目去掉el-table内容部分边框
**项目要实现如下效果，如何改变el-table的样式呢？具体操作如下：**1.给el-table加上新的class类。2.不要在原有的带有scoped的style里添加样式。新写一个style。加上如下代码即可。<style> /* 去掉表格单元格边框 */.my-table th{ border:none; }.my-table td,.my-table th.is-leaf { border:none;} /* 表格最外边框 */.el-table-
2021-03-20 14:19:58
5670
原创 纯js的loading框
<div id="over" class="over"></div> <div id="layout" class="layout"> <img style="width: 50px;height: 50px;;" src="https://img.jbzj.com/file_images/article/201311/2013112931.gif" alt="" /> <div style="width...
2021-02-02 14:58:03
472
原创 html手写弹出层提示框
项目有时候需要单独写HTML文件，不能依赖任何插件，找了好久，根据业务需求自己改了一下样式，有需要的可以直接复制使用<html> <head> <meta charset="utf-8"> </head> <style> .header{ width: 100%; height: 50px; line-height: 50px;
2021-01-28 09:59:05
933
原创 vue前端环境配置
一、基础开发工具1、安装nodejs软件。http://nodejs.cn/download/2、安装git软件，代替命令行工具。https://git-scm.com/downloads注：* 如何解决Git Bash 面板中的中文乱码问题？右键->options->text->把编码格式改为UTF-8。3、全局安装nodemonnpm install nodem...
2020-04-30 08:40:23
1034
原创 vue自定义长按事件
html代码：<image class="logo-img" src="../../static/imgs/login/[email protected]" alt @touchstart="gtouchstart()" @touchend="gtouchend()" @touchmove="gtouchmove()"/>data里面定义一下：data(){ retu...
2020-04-11 10:21:54
401
原创 uni.navigateTo传递对象类型的参数
传递页面代码：visualPage(){ var that=this var editItem=that.pageModel uni.navigateTo({url:'/pages/visualPage/index?editItem='+encodeURIComponent(JSON.stringify(editItem))})...
2020-03-10 18:50:21
20828
1
原创 HOC高阶组件
HOC入参出参都是（函数），组件HOC（High Order Component） 是 react 中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个React API 。 它只是一种设计模式，类似于装饰器模式。具体而言，HOC就是一个函数，且该函数接受一个组件作为参数，并返回一个新组件。 从结果论来说，HOC相当于 Vue 中的mixins(混合) 。其实 React 之前的策...
2020-03-09 08:19:19
424
原创 记录uni-app开发过程中的坑~
1, that or this问题描述：在data中引入的变量，却一直提示undefined is not an object，转换了多次变量类型也毫无作用，找了好久才发现是作用域的问题！！！一定要牢记。var that=this uni.getStorage({ key: 'seal_params', success: function (res) { ...
2020-03-07 18:37:38
528
原创 uniapp一个组件使用两个picker
<!-- 第一行 --> <view class="list"> <view class="uni-title uni-common-pl"> <view class="require">*</view>文件类型 </view> ...
2020-03-07 16:03:49
1612
原创 uniapp提示弹窗
uni.showToast({ title: "正在打开...", icon: 'loading', duration:10000, mask: true })
2020-03-05 19:59:50
5206
1
原创 uni.getStorage里数据的使用方法
首先存储：（代码块中result是上面函数的返回值，此处没有贴出） uni.setStorage({ key: 'seal_params', data: result, success: function () { ...
2020-02-29 08:34:13
21092
1
原创 webApp，Native App，HybridApp，以及跨平台App开发
webApp概念：直接在手机网页上访问，用浏览器打开时，底部有导航，类似于一个App，就叫webApp，也叫m站（例如手机上做的京东），另一种上下滑动的，不像App的，就是单纯的网页。优点：无需下载安装包，节约手机空间，便于传播整体量级较轻，开发成本低，便于迭代基于浏览器，无跨平台压力，与其他网站之间跳转更方便应用开发者直接在后台更新，不需要用户手动更新，每次看到就是全新版本，更便于...
2019-11-25 19:13:24
279
原创 等比缩放rem文件
function resetRootFZ(){ var oHtml = document.querySelector('html'); var w = oHtml.getBoundingClientRect().width; // 设置根字体的大小等于html节点的宽度的十分之一 oHtml.style.fontSize = w/23.4 + 'px';};resetRoot...
2019-11-25 10:06:56
104
原创 使用Redux
Redux简介： Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。)可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外，还支持其它...
2019-11-22 09:12:47
84
原创 若后端数据没有给中文该如何处理表格？
有时候，在渲染表格时，后端数据只提供了几个表示不同状态的数字，并未提供中文的状态含义，此时，我们该作何处理呢？找到表格的const colums的地方，在你需要修改的表头处，添加如下代码： render(){ const columns = [ { title: '领取条件', dataIndex: 'condition'...
2019-11-21 15:46:09
89
原创 如何调取数据并实现分页查询？
1，在fetch文件中封装调取数据的方法代码示例如下：import axios from 'axios'// 和后端联系的方法：function fetch(api,method,data,callback){ axios({ url:'http://localhost:3000'+api, method:method, data:...
2019-11-21 15:38:21
388
原创 开始写你滴react项目
1.在src的routes目录下编写你的组件，例如编写一个首页的组件，routes–>home–>index.js基础模板如下所示import React from 'react''export default class Home extends React.Component {render(){ return ( <div> <h1>首...
2019-11-18 21:21:10
79
原创 接口文档以及fetch方法
接口文档是前后端分离，前端和后端沟通的唯一文档，一个接口文档最重要的内容是，api，请求方式，入参，出参（返回值），同一个接口需要重复使用，所以方法也写在fetch.js文件里面，示例代码如下import axios from 'axios'// 和后端联系的方法：function fetch(api,method,data,callback){ axios({ u...
2019-11-18 20:09:31
349
原创 README文件编写
react-project created by JannaChen at 2019-11-15常用项目命令npm install 安装各种依赖包npm start 运行项目npm build 打包部署项目,发给运维工程师，然后发送到服务端工程架构使用的是create-react-app脚手架工具搭建的工程架构npm run eject 对配置文件进行暴露nodejs+webpac...
2019-11-18 12:56:23
363
原创 利用脚手架工具搭建一个新的react项目
利用脚手架工具搭建一个新的react项目一，工程架构1.使用的是create-react-app脚手架工具搭建的工程架构npm install create-react-app -g2.提交项目2.1 git init 提交本地仓库2.2 git add .2.3 git commit -m ‘提交注释’3. 对配置文件进行暴露，配置webpacknpm run eject（没...
2019-11-18 12:52:24
308
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人