前端 - 简忆博客

js如何获取数组中的项

PHP中封装了array_column()函数用去获取取出数组的中项，js需要使用到.map(function(row){})函数获取，以下是函数，供大家参考//获取数据项 function getColumn(anArray,columnNumber) { return anArray.map(function(row) { return row[columnNumber]; }) },

百度echarts如何修改曲线背景颜色或者线条颜色

2021-10-17

173 0

百度ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。但是echarts默认的颜色我们不喜欢的话，可以通过过下面的设置进行修改，具体如下：1、设置线条颜色：在series下添加itemStyle itemStyle : { ; ; ; ; ; normal : { ; ; ; ; ; ; ; color:'#99CC33' ; ; ; ; ; } ; ; ; }, ; series: [ { ; ; name: '订单数', ; ; type: 'line', ; ; stack: 'Total', ; ; data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210], ; ; itemStyle : { ; ; ; ; ; normal : { ; ; ; ; ; ; ; color:'#

vue+file-saver+xlsx导出table表格为excel

2021-10-14

172 0

1、下载两个依赖npm install file-saver xlsx --save-dev cnpm install file-saver xlsx --save-dev //淘宝镜像 ;2、封装成一个独立的组件outTable.vue<template> ;;;<el-button size="mini" round type="primary" @click="exportExcel">导出Excel</el-button> </template> ; <script> import FileSaver from 'file-saver' import XLSX from 'xlsx' export default { ;props: { ;;;id: { ;;;;;type: String, ;;;;;default: 'Table' ;;;}, ;;;name: { ;;;;;type: String, ;;;;;default: 'Table' ;;;} ; ;},

Vue实现点击按钮执行订单数据打印功能

2021-10-13

154 0

点击按钮实现打印页面的功能，在很多系统中非常常见，以下是vue的一个打印功能插件，供大家参考：1、安装;;npm install vue-print-nb –save 2，引入;安装好以后在main.js文件中引入;;import Print from 'vue-print-nb' ;Vue.use(Print);;//注册 3、使用<el-table border stripe ;id="printTest"> ;;;;;;;;;;;;;;;<el-table-column align="center" type="selection" width="55"></el-table-column> ;;;;;;;;;;;;;;;<el-table-column label="ID" prop="id" min-width="20"></el-table-column> ;;;;;;;;;;;;;;

vue中element-ui设置el-dialog点击空白背景不关闭

2021-10-11

184 0

vue中使用elementUI框架的el-dialog模态窗口，有时我们会不消息点击到空白蒙版就自动关闭了，我可以关闭这个，这样就不会导致我们辛辛苦苦输入的东西都没了，我们可以给el-dialog加个属性即可;:close-on-click-modal="false" 详细demo: <el-dialog title="添加商品分类" :visible.sync="addDialogVisible"; width="30%" @close="addDialogClosed" :close-on-click-modal="false">  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width=

一个图片上传插件推荐，支持多图上传和删除操作

2021-10-09

187 0

本插件可以实现图片上传和图片删除操作，同时也可以限制上传图片张数，供大家参考和使用。效果展示：引入js:<script type="text/javascript" src="localResizeIMG.js"></script> <script type="text/javascript" src="mobileBUGFix.mini.js"></script> html部分代码： <div class="release_up_pic">;;;;; ;;<div class="up_pic"> ;;;;<span id="chose_pic_btn" style=""> ;;;;;;<input type="file" accept="image/*" name="file" /> ;;;;</span>; ;;;;<p class="maxpicture">

WebUploader文件多次上传和删除无法上传文件的问题解决方法

2021-10-09

123 0

WebUploader上传成功之后。移除文件，再次上传，选择了文件，但是没有渲染到页面上，博主想到的方法就是重置WebUploader状态//成功事件,;针对一个文件uploader.on('uploadSuccess', function (file, response) { uploader.removeFile(file); }); // 多文件下所有文件上传成功后调用;;;;;uploader.on('uploadFinished', function () { ;;//清空队列 ;;;uploader.reset(); }); 这样重置之后，就能继续选择文件上传了

解决jq动态添加class之后无法使用点击事件问题

2021-09-28

156 0

很多开发者、初学者会发现，使用jq给div动态加class之后，再次使用该clas点击事件，会出现无法点击的问题，我们使用下面方法来实现点击，解决该问题。$(document).on('click','.classname',function (){ });

css实现导航鼠标悬停走动酷炫效果

2021-09-25

184 0

我们有时做项目需要使用到类似上面的效果，可以参考下面的代码实现方法html页面代码：;;;<div class="header"> ;;;;;;;;<ul> ;;;;;;;;;;<li><a href="#">首页</a></li> ;;;;;;;;;;<li><a href="#">最新活动</a></li> ;;;;;;;;;;<li><a href="#">项目介绍</a></li> ;;;;;;;;;;<li><a href="#">关于我们</a></li> ;;;;;;;;;;<span class="move"> </span> ;;;;;;;;</ul> ;;;;</div> css代码实现：;&l

jquery实现导出Excel功能，支持多sheets导出

2021-09-25

219 0

前端项目开发中，我们有时需要将表格数据完整的导出来，而且保留原有样式，这样的如果用后端导出会比较麻烦，我们可以采用jquery来导出。1、比如有入如下几个表格;<button type="button" class="layui-btn" onclick="tablesToExcel('#table_1,#table_2,#table_3,#table_4,#table_5', '客户评分汇总.xls');" >导出</button> <table id="table_1" data-SheetName="表格一" > ;;<thead> ;;;;<tr style="background:#008080; color:#fff; font-weight:bold; height:50px;"> ;;;;;;<th width="60px" style="b

Layui表格如何实现点击图片预览图片功能

2021-09-12

234 0

在使用layui框架的时候，我们有时需要放大表格中的图片，可以使用下面的方法来实现。表格部分代码table.render({ ;;;;elem: '#currentTableId', ;;;;url: '{:url("union.customer.getCustomer")}', ;;;;toolbar: '#toolbarDemo', ;;;;defaultToolbar: ['filter', 'exports', 'print', { ;;;;;;title: '提示', ;;;;;;layEvent: 'LAYTABLE_TIPS', ;;;;;;icon: 'layui-icon-tips' ;;;;}], ;;;;cols: [[ ;;;;;;{type: "checkbox", width: 50}, ;;;;;;{field: 'id', width: 80, title: 'ID', sort: true}, ;;;;;;{field: 'cate', width: 100, t

解决iOS端微信H5网页不自动播放音乐问题

2021-09-10

242 0

iso端不自动播放音乐是个问题，我们可以通过微信的jssdk来解决<?php header("Access-Control-Allow-Origin:*"); $appid = "appid";;; $secret = "secret";;; // 步骤1.生成签名的随机串 ; ; function nonceStr($length){ ; ; ; ; $str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1NGJBQRSTUVWXYZ';//随即串，62个字符 ; ; ; ; $strlen = 62; ; ; ; ; while($length > $strlen){ ; ; ; ; ; ; $str .= $str; ; ; ; ; ; ; $strlen += 62; ; ; ; ; } ; ; ; ; $str = str_shuffle($str); ; ; ; ; return substr($str,0,$length)

H5网页实现打开页面自动播放背景音乐，以及点击关闭背景音乐

2021-09-10

293 0

相信大家都见过一些H5邀请函，打开之后会自动播放音乐，屏幕有上角也会自动360度旋转图标，以下是简单的案例，大家可以参考。1、html部分代码：放置音乐、放置旋转按钮<div style="display: none;"> ;;<audio id="music1" src="music/EasyBreeze.mp3" controls> ;;;;<source src="music/EasyBreeze.mp3" type="audio/mpeg" /> ;;</audio> </div> <a href="javascript:;" class="closemusic rotates"></a> <style> ;;.closemusic{ ;;;;display: block; ;;;;width: 2rem; height: 2rem; ba

H5微信9宫格抽奖+概率设置

2021-09-10

204 0

9宫格抽奖百度找了很久也没有找到可以设置中奖概率的，后面找到一篇文章，结合后端PHP设置的中奖概率。以下是个例子，供大家参考和使用。1、抽奖界面代码：<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status

canvas生成表单海报

2021-08-31

217 1

我们有时需要输入表单生成图片，可以使用下面方法生成海报<div class="dd"> <img src="images/bg2021.jpg" alt=""> <input type="text" class="username" id="username"> <input type="text" class="tel" maxlength="11" id="tel"> <input type="text" class="num" id="num"> <input type="text" class="time" id="time"> <button type="button" class="save" onclick="save()">提交生成</button> </div> <div id="app" class="app"> <div id="appmin" class="app

vue-quill-editor富文本编辑器工具栏汉化教程

2021-08-25

353 0

效果：vue-quill-editor默认是英文的工具栏，为了方便用户使用个体验，我们可以对它进行汉化。我们通过css样式来对富文本编辑器进行汉化，具体代码如下：<style> .ql-snow .ql-tooltip[data-mode=link]::before { ;;;content: "请输入链接地址:" !important; ;} ;.ql-snow .ql-tooltip.ql-editing a.ql-action::after { ;;;;;border-right: 0px !important; ;;;;;content: '保存' !important; ;;;;;padding-right: 0px !important; ;} ; ;.ql-snow .ql-tooltip[data-mode=video]::before { ;;;;;content: "请输入视频地址:" !import

$解决wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本。$

解决wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本。

2021-08-22

183 0

运行wepy项目报如下错误wepy build watchwepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置行:1 字符: 1解决方法：打开windowpower 管理员执行set-ExecutionPolicy RemoteSigned命令，输入A即可，如下图所示：

React如何使用Braft Editor符文本编辑器

2021-08-22

207 0

Braft Editor符文本编辑器，美观好用的React富文本编辑器。官网地址：http://braft.margox.cn/1、安装使用npm或者yarn来将本编辑器加入到你的项目中：# 使用npm安装npm install braft-editor --save # 使用yarn安装yarn add braft-editor 2、使用编辑器支持value和onChange属性，这类似于React中原生的input组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器：2.1、页面代码部分<Form.Item> <BraftEditor value={editorState} onChange={(e)=>handleEditorChange(e)} /> </Form.Item> 通过onCh

react+antd实现图片上传预览功能

2021-08-21

257 0

效果展示：文件选择上传和拖拽上传控件Upload上传页面代码部分：import React, {useEffect, useState} from 'react' import { Breadcrumb, Upload, message, Image, BarcodeOutlined} from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; function Add() { ; ; return ( ; ; ; ; <div> ; ; ; ; ; ; ;<Breadcrumb style={{ margin: '16px 0' }}> ; ; ; ; ; ; ; ; <Breadcrumb.Item>主页</Breadcrumb.Item> ; ; ; ; ; ; ; ; <Breadcrumb.Item>文章添加</Breadcrumb.Item&

react+adtd实现表格数据分页

2021-08-21

218 0

效果展示1、;表格代码：<Table columns={columns} bordered dataSource={dataSource} pagination={{ ;;;;;;total:total, ;;;;;;showQuickJumper: true, ;;;;;;pageSizeOptions:[10, 20, 50, 100], ;;;;;;pageSize:10, ;;;;;;onChange:loadData, ;;;;;;showTotal: total => `共${total}条记录 ` ;;;;;;}}> </Table> 2、;定义表格列const columns = [ ;;;;;;;{ ;;;;;;;;;;;title: '序号', ;;;;;;;;;;;key: 'id', ;;;;;;;;;;;width: 80, ;;;;;;;;;;;align: 'center', ;;;;;;;;;;;render: (txt, record, index) =>index + 1

Ant Design框架分页汉化

2021-08-20

325 0

Ant Design分页，默认是英文，看着很不习惯，我们可以进行汉化，antd本身带有中文语言包，当我们引入antd，就可以进行汉化了，事实上antd为了进行国际化，本身就有多个语言包汉化方法1、引入语言包// 在需要用到的组件文件中引入中文语言包 import zhCN from 'antd/es/locale/zh_CN'; // 引入国际化配置 import { ConfigProvider,Table } from 'antd'; 2、使用<ConfigProvider locale={ zhCN }> ;</ConfigProvider>包裹着表格import React, {useEffect, useState} from 'react' import { Breadcrumb, Card, Table, Button,