yzxzxf的博客

原创 h5写长按保存图片到手机相册

h5写长按保存图片到手机相册话不多说直接上代码首先引入html2canvasimport html2canvas from ‘html2canvas’ <div> //模板部分 <div class="contents"> <img src="./img/psb.jpg" alt="" class="imgs"> </di...

原创 vue npm install 报错处理

1、安装windows-build-tools。2.安装node-gyp。

原创 vscode 开发基本依赖

原创 前端数据处理总结

1.数组对象根据某个对象中的值删除该对象。2.根据数组对象中的某个值进行排序。

原创 vue el-table反显

1.当返回值与列表值相同时。2.当返回值与列表不相同时。

原创 整个项目的页面变灰

<style>html { filter:grayscale(100%); /* 下面这句：IE下的滤镜，如果直接写上面的属性，在IE下是无法实现的，所以需要加上下面这句，括号中是需要的属性 */ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>...

原创 css解决图片失真问题

1.背景图片失真.con{ height:100vh; width:100vm; background: url(../../assets/login/background.png) 100% 100%; background-color: #2d3a4b; background-size: 100vm 100vh; image-rendering: -webkit-optimize-contrast; }2.图片失真img {

原创 判断当前地址是http还是https

var ishttps = 'https:' == document.location.protocol ? true: false;if(ishttps){alert('https');}else{alert('http');}

原创 百度地图实现点聚合，

<template> <div class="home" id="home"> <div class="content" > <div class="top"> <div class="top_text"> <div class="lists" :class="[classindex==-1?'active':'']" @click="allIn">全部</div> ...

原创 vue 微信支付

onBridgeReady(){ var vm = this; window.WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": "", "timeStamp": "", "nonceStr": "", "package": "=", ...

原创 简易登录样式

<template> <div class="login-container"> <div class="login_cont"> <p class="title">账号登录</p> <el-form :model="loginForm" :rules="rules" autocomplete="off" class="login-form" .

原创 vue 工具封装

Tool = { /** * 空校验 null或""都返回true */ isEmpty: function (obj) { if ((typeof obj == 'string')) { return !obj || obj.replace(/\s+/g, "") == "" } else { return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0); } }.

原创 呜呜呜呜呜呜

historyBack () { /** 解决微信端刚进入页面会触发popstate事件 */ let bool = false; setTimeout(function () { bool = true; }, 1500); let state = { title: "...

原创 支付简易demo

methods: { onClickLeft() { this.$router.go(-1); }, goPay() { const toast = this.$toast.loading({ duration: 0, // 持续展示 toast forbidClick: true, message: "支付中……", // loadingType: "spinner", });.

原创 ElementUi设置时间范围为30天

pickerOptions为关键在data() retrun 添加这段代码，后再设置htmldata(){ return { var vue = this;//为了在disabledDate中用到this pickerOptions: { //timeOptionRange:'', disabledDate: time => {//this为当前日期控件不是页面,...

原创 h5与app进行双向通信

1.webview_flutter 与H5交互 flutter代码vue代码<template> <div> 获取到的Flutter传入信息： <span>{{ infoFromFlutter }}</span></div></template><style scoped></style><script>export default { name...

原创 vue utc转正常时间格式

format(time) { var date=new Date(time); var year=date.getFullYear(); var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1; var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate()...

原创 vant+vue 支付剩余时间

<div> 剩余支付时间:<van-count-down style="display: inline" :time="time" format="mm分ss秒" /><div>js: data() { return { time: 30 * 60 * 1000, }; created() { this.countTime() }, m

原创 vue 路由跳转到指定区域

需求：点击跳转时，页面呈现在内容部分方法一： 通过路由html <h3 class="title" id="title">北京办公区</h3>```htmljs mounted: function () { // var hash = window.location.hash; // var index = hash.lastIndexOf("#"); // if (index != -1) { // var id = has

原创 2021-06-28

根据设计领域的最新趋势，我选择了10个值得你关注的CSS生成工具，以帮助你构建漂亮炫酷实用的UI界面。这些工具将有助于提升设计人员和前端开发人员的工作。1、Neumorphism地址：https://neumorphism.io/它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。但是这个工具，可以直接在线调试UI风格，并直接生成CSS代码。2、带有渐变的图标地址：https://www.iconshock.com/svg-icon

原创 前端常用链接

1.蓝湖https://lanhuapp.com/2.idea下载激活码http://idea.medeming.com/idea/3.elementUI 官网地址https://element.eleme.cn/2.0/#/zh-CN/component/menu4.vant ui 官网地址https://youzan.github.io/vant/#/zh-CN/quickstart5.vue-element-admin 官网地址https://panjiachen.github.io

原创 修改本地项目的远程地址

1.git remote -v # 查看当前的远程仓库2.git remote set-url origin +远程地址 # 修改为想要设置的远程仓库3.git remote -v # 查看当前的远程仓库（看下是否修改）4.git pull origin dev --allow-unrelated-histories #强制合并之前的相关历史git pull / git push...

原创 点击新增，增加input模块

<template> <div> <el-button @click="add">添加</el-button> <el-table :data="data"> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-input v-model="data[scope.$index].name">

原创 vue在谷歌浏览器打开rtmp流

vue在谷歌浏览器打开rtmp流1.先启动一个vue项目2.安装依赖cnpm install videojs-flash --savecnpm install vue-video-player -S3.在main.js中全局引入import VideoPlayer from ‘vue-video-player’import ‘video.js/dist/video-js.css’import ‘videojs-flash’Vue.use(VideoPlayer)4.在页面中填写<

原创 vue-cli3 关闭eslint

关闭eslint直接注释掉package.json文件中eslint的配置就可以了（以下是vue-cli的默认配置）“eslintConfig”: {“root”: true,////此项是用来告诉eslint找当前配置文件不能往父级查找“env”: {“node”: true//此项指定环境的全局变量，下面的配置指定为node环境},“extends”: [// 此项是用来配置vue.js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错“plugin:vu

原创 vscode在.vue文件中＜template＞标签没有html标签提示

vscode在.vue文件中标签没有html标签提示下载 Vetur

原创 fromdata传参多选字段格式更改

多选传参返回操作错误默认获取格式实际要求要传的格式修改格式join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

原创 **谷歌浏览器select出现黑色边框**

谷歌浏览器select出现黑色边框启动Chrome浏览器访问chrome://flags/#form-controls-refresh。从下拉菜单中选择 “禁用”，然后重新启动浏览器。

原创 ios在微信中遇见的bug

ios在微信中目前遇见的bug1.ios在微信浏览器中不能获取文本域的焦点将有这几个属性删除即可* { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:non...