web前端
文章平均质量分 58
技术交流与分享,相互探讨,共同提升
皮皮灬虾
代码“虐”我千万遍,我待代码如初恋!
展开
-
小程序富文本解析(mp-html组件)
微信小程序解析html大概有几种方式,我用过的有这三种rich-textweb-viewwxParsemp-html,各有各的优缺点,亲测,发现还是mp-html好用点。废话不多说,直接上代码。原创 2023-11-17 11:22:59 · 1026 阅读 · 0 评论 -
Vue兄弟组件之间相互调用方法
Vue兄弟组件之间相互调用方法原创 2022-09-28 15:49:31 · 3873 阅读 · 4 评论 -
element UI中table操作栏更多按钮展示与折叠的实现
Element UI中table操作栏更多按钮展示与折叠的实现1、然后给大家看下动态图2、解决思路: 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover 弹出框废话不多说,直接上代码吧html代码块:<el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selectio原创 2022-04-21 17:28:18 · 12429 阅读 · 4 评论 -
ant desgin vue table动态循环生成表格
场景: 根据选择日期年月份进行动态往表格添加数项话不多说,下面直接上代码一、html代码<!-- 表格 --><div class="admin_table_list"> <a-spin tip="Loading..." :spinning="spinning"> <a-table bordered size="small" :rowkey="id" :comp原创 2021-12-21 14:53:43 · 3454 阅读 · 2 评论 -
Vue项目中如何使用动画特效
一、安装在命令行中执行:使用npm或者cnpm安装npm install animate.css --save 或 cnpm install animate.css --save二、引入在main.js全局引入import animate from 'animate.css'......Vue.use(animate)//记得引入使用三、页面使用在index.vue中<template> <div class="box"> <button @c原创 2021-09-11 17:18:06 · 2860 阅读 · 0 评论 -
微信小程序点击图片预览真机无法显示的问题
问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中…如图所示:实际效果图:话不多说,直接上代码1、html代码:<view class="img-box"> <view class="imgs" wx:for="{{imgList}}" wx:key='id'> <image src="{{item.imgurl}}" bindtap="clickImg" data-url="{{item.imgurl}}" />原创 2021-08-27 11:30:35 · 1656 阅读 · 3 评论 -
Vue 使用element-UI 上传图片及图片回显
问题描述: 将后台接口返回的图片,回显到页面1、html代码<el-form-item label="房间图片:" prop="images"> <el-upload :action="action" list-type="picture-card" :accept="accept" :auto-upload="true" :limit="imgLimit" :multiple="isMultiple" :file-list="form.images" :原创 2021-08-24 14:31:21 · 3909 阅读 · 7 评论 -
Vue项目点击跳转外部链接
问题描述:在Vue项目页面中,点击某个按钮,跳转到项目外其他链接页面1、页面点击覆盖当前页面window.location.href = 'https://www.baidu.com'2、点击重新打开一个页面窗口,不覆盖当前的页面 window.open('https://www.baidu.com',"_blank") "_blank" 新打开一个窗口 "_self" 覆盖当前的窗口...原创 2021-08-13 15:20:45 · 4031 阅读 · 0 评论 -
ES6常见数组用法
这是看完ES6文档后的学习笔记1、let与constlet的用法类似于var,但是所声明的遍历,只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1const声明一个只读的变量。一旦声明,常量的值就不能改变。const PI = 3.1415;PI // 3.1415PI = 3;// TypeError: Assignment to constant .原创 2021-07-31 15:27:52 · 273 阅读 · 0 评论 -
Vue项目H5移动端在线预览PDF文件
1、安装pdfh5插件npm install pdfh5 --save2、使用<template> <div id="app"> <div id="demo"></div> </div></template><script> import Pdfh5 from "pdfh5"; export default { name: 'App', data() { return {原创 2021-07-14 09:43:43 · 1837 阅读 · 11 评论 -
Vue实现打印功能最简单的方法
摘要: 今天做了一个ERP系统打印订单的功能,下面是效果图:查了很多资料,一开始我直接用print.js这个插件,虽然能实现打印功能,但是当你需要打印的表格数据太多了,就无法实现分页打印,为了不浪费大家时间,所以在这里,我建议大家直接使用vue-print-nb这个插件,可以随心所欲的实现打印功能。在这里我就不多说了,用了就知道!下面说下安装和使用方法:1、安装vue-print-nbnpm install vue-print-nb --save2、在main.js文件中引入 import原创 2021-07-09 11:44:57 · 5779 阅读 · 33 评论 -
常用的js语法
常用的js语法1、提取数组对象中的某个属性值,并返回一个新数组//实例一:单纯的提取数组对象中的某个属性值,返回一个数组var detailList = [ { id:1, name:'张三' }, { id:2, name:'李四' }, { id:3, name:'王五' },原创 2020-10-16 17:56:47 · 425 阅读 · 1 评论 -
Vue项目登录加密
前端Vue项目-登录加密-crypto-js加密 AES加密今天做了Vue项目的加密,主要做了登录接口,保证登录的安全性能。网上关于 AES 对称加密的算法介绍挺多的,对这一块还不是特别理解的小伙伴可自行百度,这里我推荐一篇AES加密算法的详细介绍与实现,讲的还是蛮详细的~要用 AES 算法加密,首先我们要引入 crypto-js ,crypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5、SH原创 2020-08-31 18:14:35 · 2118 阅读 · 1 评论 -
git从克隆项目到本地分支和远程分支关联
git从克隆项目到本地分支和远程分支关联1、克隆项目git clone http://git.xxx.com/xxx.git克隆远程仓库的代码到本地后,想提交本地代码到远程仓库,这时候就需要先将本地仓库与远程仓库进行关联,否则无法直接上传到远程仓库。2.创建分支git branch develop3.查看本地分支:git branch**注:**名称前面加*号的是当前的分支4.查看远程分支:加上-a参数可以查看远程分支,远程分支会用红色表示出来(如果你开了颜色支持的话)git原创 2020-08-17 15:44:45 · 2401 阅读 · 1 评论 -
Vant-UI库和Element-UI库修改样式无效
Vant-UI库和Element-UI库修改样式无效最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效。css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用.van-grid-item_content{ background:#f4f5f7 !important; border-radius:8px;}vue项目中,当style标签有scoped属性时,它的 CSS 样式只作用原创 2020-07-10 11:45:13 · 1557 阅读 · 0 评论 -
H5 移动端调取手机相机或相册
H5 移动端调取手机相机或相册1、html代码如下: <!--图片二--> <label for="xFile2" style="padding-top:15px;" class=" cameraImg2" @click="removeImg2();"> <span v-if="imgList2.length == ''" class="glyphicon-camera" > <p style原创 2020-07-08 11:57:59 · 5996 阅读 · 0 评论 -
H5页面调用手机打电话功能
H5页面调用手机打电话功能摘要:H5也就是移动端head里面加上:<meta name="format-detection"content="telephone=yes"/>需要拨打电话的地方:<a href="tel:400-0000-688">400-0000-688</a>发短信:<a href="sms:18688888888">发短信</a>点击 页面上的电话号码,页面会调用手机的电话接口。...原创 2020-07-08 11:52:30 · 1298 阅读 · 1 评论 -
微信小程序下拉刷新上拉加载更多
微信小程序下拉刷新/上拉加载更多前言:今天说说小程序的分页功能做这个功能之前,咱们可以先看看微信小程序官方文档,有这个API的查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;看一下json文件:"enablePullDownRefresh": true,有同学说设置完之后可以下拉,但是看不到图标;在原创 2020-06-16 10:56:01 · 923 阅读 · 1 评论 -
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建Ant Design Pro of Vue下载安装启动步骤:一、Ant Design Pro of Vue 的介绍Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。因为Ant Design Pro of V原创 2020-05-26 18:10:15 · 14940 阅读 · 11 评论 -
vue-cli项目中使用mockjs(基础使用和全局配置使用)
vue-cli项目中使用mockjs(基础使用和全局配置使用)很多时候前后端分离的项目在开发过程中前端所需数据和后端接口并不会同步开发,此时在接口对接之前就可以使用mockjs来自定义模拟数据vue项目中的请求一般也是使用Axios进行请求,而axios的的一个特点就是会自动拦截请求,今天搞了一下午,也参考了很多文章,差不多完成了demoaxios的使用参考官网。脚手架搭建好之后npm install mockjs // 安装mockjsnpm install axios // 安装axios原创 2020-05-13 18:11:04 · 2157 阅读 · 1 评论 -
使用Vue-cli 3.0搭建Vue项目
使用Vue-cli 3.0搭建Vue项目[2018-07-31更新]: vue-cli 3.0正式版的中文文档已经出来了,详细的可以参考:https://cli.vuejs.org/zh/guide/关于Vue的其他基础知识,可以看我的文章(持续更新中):\1. Vue入门(1)——简介与安装Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:...原创 2019-12-19 09:43:42 · 221 阅读 · 0 评论 -
快速搭建一个完整的vue的项目
搭建一个完整的vue的项目Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖:可升级;基于 webpack 构建,并带有合理的默认...原创 2019-12-19 09:41:03 · 1256 阅读 · 1 评论 -
WEB前端简历模板
WEB前端简历模板详细资料 姓名:XXX 出生年月:XXXX年X月 名 族:X族 政治面貌:XXXX ...原创 2019-10-15 17:17:55 · 40823 阅读 · 7 评论 -
非常全面的前端协作规范
非常全面的前端协作规范万字长文,继续刷新我的文章长度记录,涉及前端开发的方方面面。本文将持续更新和完善, 文章部分观点可能比较武断或不完整,欢迎评论和补充,一起完善该文章. 谢谢笔者长期单枪匹马在前端领域厮杀(言外之意就是团队就一个人),自己就是规范。随着公司业务的扩展,扩充了一些人员,这时候就要开始考虑协作和编码规范问题了。本文记录了笔者在制定前端协作规范时的一些思考,希望能给你们也带来...原创 2019-10-14 10:33:33 · 2755 阅读 · 1 评论