前端
haoqi好奇
五年程序员,精通前端和Java,可以定制开发,卫星:qingcreek(推荐),Q:2434705794
展开
-
css线条渐变,线条两边向中间渐变, 中间向两边渐变
【代码】css线条渐变,线条两边向中间渐变, 中间向两边渐变。原创 2022-11-29 17:09:11 · 1661 阅读 · 0 评论 -
el-element el-table表格内编辑,单元格编辑
【代码】el-element el-table表格内编辑,单元格编辑。原创 2022-09-13 10:05:27 · 976 阅读 · 1 评论 -
vue升序降序按钮功能实现
需求:默认升序,悬浮按钮变色,点击按钮下标跟随变化。html <div class="right" @click="change(item,index)" v-for="(item, index) in btnList" :key="index">{{item.lable}} <div class="box-icon"> <div class="u原创 2022-05-19 11:36:52 · 2018 阅读 · 0 评论 -
echarts Y轴单位右对齐
yAxis: [ { min: 0, max: 90, interval: 10, //刻度间隔 }, { min: 0, max: 180, interval: 20, //刻度间隔 ...原创 2022-05-09 10:56:16 · 1701 阅读 · 0 评论 -
vue3实现pdf文件预览,分页,放大缩小
很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,故写此分享。1. 安装依赖npm i vue-pdf-embed -Snpm i vue3-pdfjs/esm -S<template> <div> <div class="div"> <el-button @click="prev">上一页</el-button> <el-button @click="next">下一页原创 2022-04-07 14:42:08 · 7778 阅读 · 13 评论 -
vue中同时引入两个echarts组件无法自适应图表,resize无效
在父组件引入多个子组件(里面都是echarts图表)的时候,window.onresize()方法只会对最后一个组件里的图表产生效果,主要原因是组件加载顺序导致的,所以我们将window.onresize监听放到父组件去执行父组件(图利为vue3写法,可自行换成vue2):const line = ref();const bar = ref();onMounted(() => { setTimeout(function () { // 监听屏幕变化,重置组件图表 wi原创 2022-03-31 11:59:50 · 3086 阅读 · 3 评论 -
H5验证码倒计时,兼容iphoneX等机型锁屏倒计时
登录注册获取验证码需要倒计时;一般都选择setTimeout和setInterval 定时器;在web页面也没有问题,安卓手机也没问,但有IOS用户反应某些需要用到用户登录注册倒计时点击后锁屏再次开屏时间暂停了。html <span v-show="timeTrue == true" @click="acquire">获取验证码</span> <span v-show="timeTrue == false" >原创 2022-02-11 09:45:32 · 641 阅读 · 0 评论 -
vue中使用animate.css;animate.css不生效
第一步:安装:npm install animate.css --save第二步:引入及使用:// main.js中: import animated from 'animate.css' // npm install animate.css --save安装,在引入 Vue.use(animated)使用:<div class="animate__animated animate__bounceIn"> CSS3 animation 属性| 菜鸟教程原创 2021-08-11 11:56:53 · 1940 阅读 · 0 评论 -
promise封装XMLHttpRequest请求,封装ajax
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> Promise封装请求 <script> // 序列化参数 function serialize(data) { if (!data) return ''; var pairs = [.原创 2021-04-26 09:35:01 · 911 阅读 · 0 评论 -
flex列表最后一行靠右对齐
// css.box { width:330px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between;}.box span{ width:100px; height:100px; background: red; margin-bottom: 10px; margin-right: 10px; line-height: 100px; color: a.原创 2021-03-22 16:13:37 · 508 阅读 · 0 评论 -
js监听表单内容,点击返回表单内容不为空时提示取消或返回
// 表单数据类型示例// formData: {// name: '',// describes: '',// coefficient: '',// logoPath: '',// appTypeIds: [],// subjectArr: [],// },// true 提示, false直接返回 var flag = Object.values(this.formData).some( item => { if (ite.原创 2021-03-22 14:05:39 · 339 阅读 · 1 评论 -
vue多个商品选择与列表显示
// mock数据classRoom: [{ "id": "598", "name": "初中课程全套", "now_price": "0.01", "price": "880.00", "classroomCourse": [{ "id": "2434" }], "course": [{ "id": "504", "name": "初一语文", "is_free": 1 }, { "id": "629", "name": "初一初学.原创 2020-11-18 15:06:42 · 2083 阅读 · 0 评论 -
前端引入公用模块代码
写网页通常会遇到要公用一个头部区域,底部区域或其他区域。我们已公用头部header为例演示。1.共用头部header.js document.writeln(` // html写在此处 <ul class="navbar-nav" style="font-size:28px"> <li class="nav-item"> <div class="dropdown"> <button onmouseover="myF原创 2020-10-14 17:14:24 · 739 阅读 · 0 评论 -
uni-app底部绝对定位后随键盘弹起解决方法
<view v-if="tabbar">底部悬浮</view>data(){ return{ tabbar: true, windowHeight: '' }},onLoad() { uni.getSystemInfo({ success: (res)=> { this.windowHeight = res.windowHeight; .原创 2020-10-12 11:53:42 · 2418 阅读 · 1 评论 -
uni-app(vue)中使用Vuex的action封装和发送请求
1.封装请求可参考我之前的文章2.创建一个文件 api.js 封装具体的请求// 导入封装的请求import request from '@/utils/request.js'// 导出export function reqDataList(id){ // 资讯列表 return request({ url: 'mv1/list?id=' + id, method: 'get' })}3.vueximport {reqDataList} from '@/api.原创 2020-09-04 09:30:35 · 3364 阅读 · 0 评论 -
uni-app(Vue)直播拉流
@[TOC] uni-app(Vue)直播拉流 <div class="prism-player" id="J_prismPlayer"></div> ```javascript created() { function loadScriptString(src) { var script = document.createElement('script') //创建一个script标签 script.type = 'text/javascript原创 2020-08-20 18:31:30 · 3677 阅读 · 1 评论 -
css内容超过宽度显示省略号没效果,文字超过两行折叠省略
实现代码overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行没效果解决方案:放置文字的元素使用块级元素 例如p,div,不要使用span等行内元素。...原创 2020-08-17 16:15:23 · 2348 阅读 · 0 评论 -
uni-app拦截未登录状态,返回到登录
1. main中判断用户是否有tokenVue.prototype.checkLogin = function(){ const token = uni.getStorageSync('token') if(token === ''){ // 本地没有token表示未登录 console.log('未登录返回到登录页') uni.reLaunch({url:'/pages/login/index'}) return false }}2.组件中调用原型方法onLoad()原创 2020-08-12 17:22:14 · 10327 阅读 · 5 评论 -
uni-app 封装请求接口,promise封装请求
1. 在根目录下创建Utils.js 文件(内容如下)let apiReq={ req(obj){ var method = obj.method || "GET"; // 请求方式,默认为GET var url = obj.url || ""; // 请求路径 var data = obj.data || {}; // 请求数据 var header = obj.hea...原创 2020-01-17 11:28:07 · 10883 阅读 · 10 评论 -
uni-app消息推送
1. 注册和实名认证dcloud开发者(https://dev.dcloud.net.cn/)2. 登录HbuilderX开发工具,创建你的项目3. 在manifast.json 中配置勾选app SDK中的 DCloud UniPush服务4. 在开发者后台进入项目,选择项目里面的Uni-push -->厂商推送设置5. 申请对应厂商品牌的app信息(这需要几个工作日)...原创 2020-01-02 16:40:08 · 6381 阅读 · 7 评论 -
uni-app 页面滑动距离后出现回到顶部按钮,回到顶部
html<view class="top" :style="{'display':(flag===true? 'block':'none')}"> <uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons></view>jsdata...原创 2019-12-13 17:24:50 · 7460 阅读 · 7 评论 -
elementUI 表格 prop属性 如何通过判断转换值
1.去掉el-table-column 上原本的prop属性2.scope.row.属性值 <el-table-column label="等级" width="50px"> <template slot-scope="scope"> <span v-if="scope.row.oType === 1"> ...原创 2019-12-02 15:23:20 · 5712 阅读 · 0 评论 -
使用EelementUI时出错Uncaught TypeError: Cannot read property 'disabled' of null
这个是因为在页面中使用了el-dropdown,但是在这个标签里面没有设置它的子元素,所以会报错,在el-dropdown中添加el-dropdown-menu标签就好原创 2019-11-23 10:51:48 · 2438 阅读 · 0 评论 -
Vuex数据管理,组件数据一一对应
需求:我们点击拍照后将拍好的照片放入vuex的state里面管理,给其他的组件调用(此处以组件A,和组件B命名)1.组件A:我们拿到图片数据源,并且在点击拍照的同时创建一个当前时间,将图片源和时间以对象的形式提交vuex。var url = canvas.toDataURL();var date=new Date().toLocaleTimeString()this.$store...原创 2019-11-11 11:57:48 · 323 阅读 · 0 评论 -
Vue 当data中没有数据的时候不渲染该元素
需求:一个Img标签,当imglist数组中有数据的时候渲染imglist中的数据,当用户点击按钮的时候显示url数组中的数据。步骤一:使用三元表达式。但会出现一个bug,首次进入页面imglist中没有数据的话页面会报错。解决方案v-if判断当imglist.length>0也就是最少有一条数据的时候才渲染该dom <img :src="flag?imglist[...原创 2019-11-11 11:27:17 · 3067 阅读 · 0 评论 -
html2canvas截图拍照,结合element小图大图预览
cnpm i html2canvas -S //安装html2canvascnpm i jquery -S //安装jqueryscript标签内引用import html2canvas from "html2canvas";import $ from "jquery";视频区域(所需要截图的区域,博主的区域是canvas的一个帧视频区域,你可以用一张图片代替) &l...原创 2019-11-07 13:58:50 · 603 阅读 · 0 评论 -
ajax通过自己的服务器跨域得到API接口中的json数据,手机号码查吉凶
第一步:(准备工作)获取API接口,API文档访问www.mob.com 进入mobAPI --找到手机号码查询吉凶获得到了API信息。其中key的值需要用户申请,点击右上角申请之后会获得一个申请码即可使用该接口。例如博主申请的是2aa181c026ff4访问的请求示例:http://apicloud.mob.com/appstore/lucky/mobile/query?k...原创 2019-03-28 12:43:09 · 399 阅读 · 0 评论 -
Ajax封装,Ajax调用封装结合PHP用户名手机号码是否存在,案例
博主此次封装了两个ajax的方法(按TAB建校验用户名手机号码的案例)有些区别提前说明一下方法一:前端必须严格按照参数顺序传递参数方法二:此种方法可以某些参数使用默认值,前端参数传递顺序可以打乱,更加灵活(建议使用第二种)方法一前端代码:<!DOCTYPE html><html> <head> <meta charset...原创 2019-03-24 17:10:26 · 165 阅读 · 0 评论 -
跨域结合百度提示词接口实现搜索显示 ,arttamplate模板使用,jQuery跨域
今天做一个简单的百度提示词的跨域准备三个文件一:html页面二:jquery.js文件三:template-web.js文件template-web.js下载地址:https://www.awesomes.cn/repo/aui/arttemplate首先拿到百度提示词API参数上代码<!DOCTYPE html><html> &l...原创 2019-03-26 20:03:08 · 283 阅读 · 0 评论 -
Ajax结合PHP实现用户注册无刷新校验用户名是否存在
第一准备html页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>账号注册</title> </head> <body> <h1>账号注册&a原创 2019-03-11 20:17:29 · 780 阅读 · 0 评论 -
php实现from表单按学号查询学生成绩(模拟数据库)
一:首先准备html查询页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学生成绩查询</title> </head> <body> <h1>原创 2019-03-11 10:49:11 · 4657 阅读 · 1 评论 -
Vue项目启动出现Error:Cannot find module 'array-includes'解决方法
解决办法:1.删掉项目中的node_modules文件夹,2.执行npmcacheclean或者cnpmcacheclean命令清除掉cache缓存,3.然后cnpminstall和npmrundev就可以在这台电脑运行你的项目...原创 2019-03-11 10:31:14 · 18899 阅读 · 1 评论 -
vue项目中引入Bootstrap,Jquery
转载于https://blog.csdn.net/Take_up/article/details/77711848注意:1.eslint 检查 步骤可以省略 2.bootstrap文件要放入正确路径文件下原创 2019-01-19 19:11:22 · 174 阅读 · 0 评论 -
Vue的npm方式安装,vue脚手架安装,node.js安装,创建vue.js项目
第一步下载和安装node.js,进入node.js中文网,下载电脑对应的版本下载.msi格式安装包,下载完成后点击运行一直下一步完成安装安装完成后打开命令提示符,输入node -v回车,查看到有版本号的出现既是安装成功第二步,安装vue继续在命令提示符 中输入npminstallvue 回车第三步,安装Vue脚手架:命令提示符中继续输入:...原创 2019-01-14 15:36:07 · 349 阅读 · 0 评论 -
CSS3动画效果,文字图片切入效果,仿QQ会员页面
CSS .sec1 { height: 834px; /*no-repeat:不平铺,图片多大显示多大*/ background: url(img/bg_1.jpg) no-repeat center top; -webkit-perspective:1000px; perspective:1000px; } .sec1 .figer-1 { ...原创 2019-04-08 12:45:36 · 877 阅读 · 0 评论 -
CSS外部样式导入后没有效果,解决方法
博主最近在做一个项目的时候将外部样式.css文件导入html后没有效果,只有写在本页面的style里才有效果,困扰了几天,今天发现了问题。因为博主使用了bootstrap框架,所以被干扰。只要将我们自己的css样式放在bootstrap下一行就行,让浏览器后渲染我们自己的样式。...原创 2019-05-17 11:26:49 · 14309 阅读 · 1 评论 -
Vue组件切换和动画,使用Vue提供的component元素实现组件切换
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画实现组件切换</title> <script src="lib/vue.min.js"></script> <style type="text/css"&...原创 2019-08-18 21:39:53 · 450 阅读 · 0 评论 -
CSS3扑克牌2D旋转
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>扑克牌旋转</title> <style> *{ padding: 0; margin: 0; } .pk{ width: 15...原创 2019-09-09 21:52:30 · 1970 阅读 · 1 评论 -
CSS3Flex伸缩布局,携程网案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-09-12 10:47:33 · 425 阅读 · 0 评论 -
Vue中使用Vant优惠券组件,按需导入发现报错,说组件没有注册?Vant组件使用报错
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.在是用Vant的优惠券组件的时候出现了该错误我按照官方文档npm i vant -S安装npm ...原创 2019-08-30 17:46:20 · 6266 阅读 · 3 评论