每日秃头

原创 vue+elementui table表格点击单元格单元格改变背景色

<el-table :data="tableData" border @cell-click="cellclick" :cell-style="tableCellStyle"></el-table>data(){ row:'', column:''}cellclick (row, column, cell, event) {...

原创 vue vant实现上传图片

<template> <div id="root"> <van-uploader v-model="fileList" :before-read="beforeRead" :after-read="afterRead" :max-size="isOverSize" :max-count="6"

原创 echarts引入报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

将import改为require的引入方式import echarts from 'echarts'var echarts = require('echarts')

原创 vue 实现移动端年周时间选择

vue 实现移动端年周时间选择使用组件样式实现代码实现使用组件添加链接描述样式实现代码实现<template> <div id="root"> <van-nav-bar left-arrow @click-left="returnHandle()"> <template #title> <span class="nav-title">统计分析</

原创 css 展开收起动画

@keyframes slide-down{ 0%{transform: scale(1,0);} 25%{transform: scale(1,1.2);} 50%{transform: scale(1,0.85);} 75%{transform: scale(1,1.05);} 100%{transform: scale(1,1);}}.select-open{ animation: slide-down .5s ease-in; transition: .3s eas

原创 css实现倒三角

.delete::before{ content: ''; width: 0; height: 0; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 5px solid pink; }

原创 css 实现边框四个角效果

<div class="bottom"> <!-- 四个角的边框效果 --> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div> <div class="border_corner border_corner_left_bottom"&gt

原创 vue 实现数据屏滚动

1.安装vue-seamless-scrollnpm install vue-seamless-scroll --save　　2.引入组件<vue-seamless-scroll></vue-seamless-scroll> import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll},　3.配置参数// 监听属性 co

原创 vue 实现点击复制文本

1.下载clipboard.jsnpm install clipboard --save2.引入插件//main.js中全局引入import clipboard from 'clipboard';Vue.prototype.Clipboard = clipboard3.应用代码 <a @click="copy" :data-clipboard-text="record.wenjuanLink" id="express_info_right">复制链接</a> &l

原创 vue项目中实现遮罩层

<template> <div id="app"> <div id="mask" ref="mask" @click="mask()"> <img src="..." class="mask_img"> </div> </div> </template>mounted() { this.$refs.mask.style.height = window.document.get

原创 echarts Cannot read property ‘init‘ of undefined“

下载下面这个版本可解决cnpm install [email protected] --save

原创 vue项目使用Echarts

cnpm install echarts -S**main.js全局引入**import echarts from 'echarts'Vue.prototype.$echarts = echarts再需要echarts图表的页面使用<div id="myChart" :style="{width: '300px', height: '300px'}"></div> mounted() { this.drawLine() },methods: {

原创 element ui Tabs 居中

一设置stretch<el-tabs v-model="activeName" @tab-click="handleClick" stretch> <el-tab-pane label="学院管理" name="first"></el-tab-pane></el-tabs>二::v-deep .el-tabs__nav-scroll{ width: 50%!important; margin: 0 auto!important;}.

原创 小程序使用echarts图表

一 首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。二 仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。三 创建一个页面文件，.json文件引入组件四 .wxml 中使用 组件。注意路径的相对位置要写对。其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置五import * as echarts from '../../../components/echarts-

原创 vue 本地背景图片铺满整个屏幕

.home{ width: 100%; height: 100vh; background: url("XXX") center center no-repeat; background-size: 100% 100%;}

原创 CSS 去掉当前元素背景颜色

background-color: transparent;

原创 小程序组件刷新

组件刷新是通过数据改变更新数据的，只要传入的数据更新，就会重新渲染组件

原创 小程序引入vant weapp Toast

原创 小程序获取当前屏幕高度

let that = this;// 获取系统信息wx.getSystemInfo({ success: function (res) { // 获取可使用窗口宽度 let clientHeight = res.windowHeight; // 获取可使用窗口高度 let clientWidth = res.windowWidth; // 算出比例 let ratio = 750 / clientWidth; // 算出高度(单位rpx)

原创 原生小程序分包

原创 小程序导入vant Weapp

1.打开当前项目终端2.输入命令 npm init 初始化项目 , 项目中生成package.json文件3.输入命令 npm i @vant/weapp -S --production ，详情勾选使用npm模块，工具中勾选构建npm,项目中生成miniprogram_npm和node_modules文件4.再在相对于页面引入即可，注意引入路径<!--index.json文件：-->"usingComponents": { "van-button": "/minipro

原创 解决vue路由跳转页面不刷新

占位符绑定key值

原创 element ui输入框 placeholder字体样式修改

element ui输入框 placeholder字体样式修改.el-input input::-webkit-input-placeholder { color:#AEABAB;}.el-input input::-moz-input-placeholder { color: #AEABAB;}.el-input input::-ms-input-placeholder { color:#AEABAB;}

原创 js截取url字符串中某个词后面的内容

var url = 'http://192.168.10.58:8080/group1/M00/00/03/wKgKNl-RPxiANK9aAAHFkEl6kXI416.jpg' if (url.indexOf('8080') !== -1) { const requestUrl1 = url.substr(url.lastIndexOf('8080') + "8080".length + 1) console.log(requestUrl1) }

原创 小程序引入样式 报错 media query expectedcss(css-mediaqueryexpected)

样式引入结尾加分号即可

原创 TypeError: Cannot read property ‘__ob__‘ of undefined

出现这个问题是因为.vue文件里面export default {}写了data(){}却没写return{}export default { data(){}}

原创 vue项目运行报错

先删除node,然后用cnpm i基本就能解决npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm i

原创 vue 父组件给子组件传值及父组件触发子组件事件

父组件<template> <div> <!-- 顶部导航 --> <topNav title="XXX" @click="goBack" ref="child" ></topNav> </div> </template> <script>import topNav from '../../components/topNavbar'ex

原创 时间格式的转换格林时间转2020-12-12 12:12:00

renderTime(str) { let that = this let nDate = new Date(str) let nYear = nDate.getFullYear() let nMonth = nDate.getMonth() + 1 let nDay = nDate.getDate() let nHours = nDate.getHours() let nMinutes = nDate.getMinutes

原创 Cannot read property ‘getAttribute‘ of null“ vue导入echarts报错

<templete> <div> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;" ></div> </div></templete><script>import echarts from

原创 vue 项目 跨域 前端vue.config.js配置反向代理

module.exports = { devServer: { open: true, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy '/api': { target: `http://playball.boyunke.com/`, changeOrigin: true, pathRewrite: { '^/ap

原创 vue 脚手架4.0 打包 静态资源路径加载不出来vue.config.js配置

module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 公共路径 indexPath: 'index.html', // 相对于打包路径index.html的路径 outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录 assetsDir: 'static', // 相对于outputDi

原创 vue 项目 运行 报错Module build failed (from ./node_modules/babel-loader/lib/index.js)

vue 项目 运行 报错Module build failed (from ./node_modules/babel-loader/lib/index.js)把node_modules 删除之后，输入以下命令(一定这个顺序)：1. npm install vue-template-compiler -D2. npm install3. npm run dev转载原链接

原创 时间戳转换日期格式

var d = new Date(timeStamp) var times = d.getFullYear() + '-' + (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1) + '-' + // d.getDate() + ...

原创 单行、多行文本溢出隐藏显示省略号

1.单行.content_comments { width：100px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}2.多行参考博客（更详）.content_comments { display: -webkit-box; -webkit-box-orient: vertic...

原创 vue + element ui table表格多选改单选

<el-table ref="multipleTable" :data="LogisticstableData" :header-cell-style="{background:'#eef1f6',color:'#909399'}" border style="width: 100%" fixed @select="select...

原创 vue+elementui el-radio 页面不显示lable绑定值

<div class="bottom"> <el-radio v-model="commissionRadio" :label="item.commissionId">(单击选择当前佣金模板)</el-radio></div>

原创 小程序扫码进入获取二维码携带参数

onLaunch(options) { let that = this console.log('------小程序启动了------') if (options.scene) { // 参数二维码传递过来的参数 var scene = decodeURIComponent(options.scene) } }...

原创 微信小程序 绘制canvas保存图片

canvas 生成图片 生成临时路径wx.canvasToTempFilePath({ canvasId: 'firstCanvas', success: function (res) { console.log(res) wx.saveImageToPhotosAlbum({ // 下载图片 fi...

原创 前端获取带参数的微信二维码并绘制在canvas上

参考博客微信官方文档（获取小程序码）** 你的小程序已经有已发布的线上版本。否则,用户扫码后,微信会提示出错**微信官方提供了三个获取小程序码的接口，这里用的是接口B1.先获取ACCESS_TOKEN wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_cre...