- 博客(32)
- 收藏
- 关注
RSS订阅原创 将组件直接绑定到vue实例上面的写法
第三步，在main.js 文件中将demo.js文件直接挂载到vue实例上面。第二步，写个demo.js 文件，然后在这里把demo组件绑定到构造器上面。第一步写个vue组件叫demo。
2024-03-05 21:09:11
655
原创 通过CSS写提示工具栏的上下左右箭头
背景：现在很多提示工具栏都是组件库自带的，但是有些项目是通过原生js+jquery写的。这种项目就需要自己去写样式了话不多说直接上代码：1，剪头向下的<!DOCTYPE html><html><style>.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;}.tooltip .tooltiptext { visibil
2022-03-07 15:32:51
823
转载 CSS3实现边框为0.5px
方式一：border + border-image + 线性渐变linear-gradient<div class="border">0.5像素边框</div><style> .border { width: 200px; height: 200px; margin: 0 auto; border-bottom: 1px solid transparent; border-imag
2022-02-28 15:12:47
1824
原创 element封装一个 结合form/table/pagination于一身的公共组件
背景：现在写后台很多页面的列表长的都比较像，避免代码冗余，现将el-form、el-table、el-pagination封装在一个组件中。这样用起来也比较方便。上代码一、主体部分<style lang="scss">.TablePageContainer { .inner_content { width: 100%; overflow: hidden; } .el-table__fixed, .el-table__fixed-right { he
2021-12-17 15:53:48
603
转载 vue2.0 基于vue-seamless-scroll无缝滚动
背景：最近vue项目中有使用文字的无缝滚动场景，从网上看到有些挺有用的，特摘抄分享一下。1，安装vue-seamless-scrollnpm install vue-seamless-scroll --save 2，引入组件<vue-seamless-scroll></vue-seamless-scroll> import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式import scroll f
2021-12-08 16:40:44
15623
3
原创 使用Promise封装axios请求和uni.request请求
通过new Promise 封装Axios/uni.request请求为了方便前端开发者更加简单便捷的请求后端数据，特封装几种请求方式，希望对大家有所帮助1，通过new Promise封装axiso请求，代码如下// post请求export const post = (url,data) => { return new Promise((resolve,reject)=>{ axios.post(url,data).then(res=>{ resolve(res)
2021-12-08 11:12:04
1015
原创 微信小程序组件间的传参
对于微信小程序刚入门的小伙伴来讲微信小程序组件间的传参和vue组件传参还是有点区别的，今天给大家分享一下微信小程序组件传参的几种方式。父组件传值给子组件// 1,首先在page定义好父组件，然后在components文件中定义好子组件。// 2,在父组件的.json文件中引入子组件{ "usingComponents": { "tabs":"../../components/tabs/tabs" //引入子组件的路径 }}// 3,在父组件中使用引入的子组件<ta
2021-08-26 15:47:55
2149
原创 js 文字金额转换成汉字大写金额
最近在写项目时 经常出现输入数字金额 转换为汉字大写金额的需求 今天用js 简单封装一个方法。上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
2021-08-02 11:46:53
455
原创 全网最全的校验
JS 邮箱校验<script type="text/javascript">function SubmitCk() {var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if (!reg.test($("#txtEmail").val())) {alert("请输入正确邮箱地址")return false;}}</s
2021-07-28 10:11:22
284
原创 ant design vue 实现手机号 身份证 中文校验 邮箱校验
1，实现 手机号校验在data 中定义一个校验手机号的方法let validatorPhone=(rule,value,callback)=>{ // 如果为空值，就抛出错误 if(!value){ callback(); }else{ // 正则判断手机号格式的格式，正则判断失败抛出错误，否则直接callback() if(!/^1[2-9]\d{9}$/.test(value)){
2021-07-27 18:57:54
4829
原创 前端 crypto-js aes 加解密
背景：正常情况下前端相对后端来讲安全性是很低的，但是有些情况下也需要前端进行加解密来完成数据的隐藏。上代码：1，下载js提供的加密插件，crypto-jsvue项目下载：npm i crypto-js -S2，引入文件import CryptoJS from '@/node_modules/crypto-js/crypto-js.js'3，封装一下加密和解密的方法 const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六
2021-06-30 17:19:06
319
原创 js 英文符号转中文符号
英文符号转中文符号在开发的过程中有时会出现中英文括号解析有误的问题。现提供一案例工参考 var reg = /[\(]/g, reg2 = /[\)]/g; var str = "(ddd)"; str = str.replace(reg, "（").replace(reg2, "）"); console.log(str)...
2021-06-30 10:12:53
1484
原创 uniapp项目中引入vant
uniapp项目引入vant-UI 引入方式和踩到的坑uniapp框架可以写多端的项目和生成多端代码，在引入vant-UI时要确定是写那个端的项目，小程序端和H5项目引入vant组件是不一样的。这个对于刚用uniapp的搬砖人很不友好，容易搞错。今天简单把两种引入的方式在这里讲一下 希望能帮到一些人。uniapp小程序引入vant方法.在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级2.前往https://github.com/youzan/vant-weapp下
2021-05-17 14:44:46
34412
22
转载 vue 写移动端做适配
vue移动端项目做适配，现在的手机尺寸有很多种，写移动端的时候就比较麻烦，必须要做适配才行。今天做适配百度了很多种方法也试了很多种方法，很多坑。今天总结两种方式希望能帮助小伙伴避坑第一种方案——lib-flexible-1，安装npm i -S amfe-flexible-2，在main.js引入import 'amfe-flexible'-3，看具体效果：我们在切换不同设备时，在右边的代码中可以看到html标签的font-size一直在改变。看到这样的效果就说明成功了。第二种方案——p
2021-04-26 17:35:13
1014
原创 echarts案例
最近在写图表，研究了一下echarts，写个小案例里面有各种配置的备注，折线图显示最大、最小值、平均值的功能。话不多说上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
2021-04-23 10:54:20
183
原创 解决H5页面中的图片点击跳出问题
今天写H5页面 点击页面图片会自动弹出比较烦 。现在给大家分享一下几个解决方法：1，css设置img{pointer-events: none; }；**注意：**这种方式可以解决这个问题，但是当如果你在此时的img上绑定点击事件，点击图片时这个事件将不会被触发。这种情况可以使用一个带点击事件的元素包裹这个img解决。2，通过原生js阻止浏览器默认行为；document.body.addEventListener(‘click’,function(e){ e.preventDefault();
2021-04-22 10:27:39
1184
原创 vue中前端实现 导出excel功能
之前不太明白实现使用vue 实现 Excel 导出的功能和逻辑 之前也写过一个博客关于vue表格导出成Excel的功能 不过那个有点复杂了 今天给大家分享一个简单的写法。 话不多说，上代码// 安装两个关于Excel 的插件npm install file-saver -S npm install xlsx -S// 在需要用到的页面中引入import FileSaver from 'file-saver'import XLSX from 'xlsx'// 在methods
2021-03-17 14:41:29
497
3
原创 vue项目中批量删除功能的实现
后台管理项目中基本上都有批量删除的功能，今天来简单给大家分享一下批量删除功能的实现。话不多说上代码<a-button @click="batchDel">批量删除<a-icon type="delete"/> <a-button>js逻辑代码`data () {selectedRowKeys: [] // table中选中的向，ids : ‘’, // 定义一个存放id的容器}methods : {// 封装一个delet..
2021-03-17 14:15:59
3757
原创 vue 中父传子通信
父子组件间传参的一个高级写法，和传统的组件间通信有些不一样。上代码<script> const app = Vue.createApp({ data() { return { conut:1 } }, template:` <div> <dome v-model="conut" /> </div> ` }); app.component('dome
2021-02-24 15:29:00
268
原创 vue父传子通过对象的形式简写
今天刚看到父传子传对象形式的简写方式，给大家分享一下。 话不多说 上代码 <script src="https://unpkg.com/vue@next"></script></head><body> <div id="root"></div></body><script> const app = Vue.createApp({ data() { return {
2021-02-24 09:57:23
976
原创 一个简单视频播放器的实现 video
第一步，先把大概框架搭建起来// html 代码<div id="wrap"> 2 <video src="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4"></video> 3 <div class="control"> 4 <div cla
2021-01-12 10:57:24
1452
1
原创 vue中实现下载xlsx格式的excel
// 这是axios文件const VueAxios = { vm: {}, // eslint-disable-next-line no-unused-vars install(Vue, router = {}, instance) { if (this.installed) { return; } this.installed = true; if (!instance) {
2020-12-17 15:06:48
1122
原创 vue项目前端解决xss攻击方案
项目中input框中添加验证方法// 通过下面正则表达式验证export function isSpecialCharacter (s) { let regEn = /[`~!@#$%^&*()_+<>?:"{}.\/;'[\]]/im let regCn = /[·！#￥（——）：；“”‘、|《。》？、【】[\]]/im if (regEn.test(s) || regCn.test(s)) { return true; } else { ret
2020-12-15 15:15:11
9994
原创 ant design vue 中弹出窗里面使用select会出现下拉框随着页面进行滚动
<a-select v-decorator="['inst_id']" placeholder="请选择研究中心" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}" allowClear showSearch ...
2020-12-10 16:52:39
1950
原创 vue数据的双向绑定的原理：MVVM原理
MVVM原理es5 object.definaProperty()MVVM;M改变 v视图 vm自动刷新当你把一个js里面的object传入vue实例的data选项中，vue会遍历次对象中的所有property，并使用object.definaProperty把property全部转为getter/setter Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/sette
2020-09-16 14:24:30
158
原创 为什么组件中的data是以函数的形式把值返回了
“组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。”...
2020-08-27 17:27:16
332
原创 用原生js书写购物车的逻辑和功能
1，购物车的主体内容布局尽量用表格的布局模式2，判断用户是否登录代码如下，可以根据自己头部的布局来具体修改// 判断用户是否登录var username = getCookie("username");//如果登录成功就执行这段代码if(username){ var vip = $(`<a href='javascript:;'>欢迎<b>${username}</b>来到天猫超市</a>`) var loginout = $(`
2020-08-20 10:34:50
565
原创 node.js初识
1. node的一些简单的命令盘符: # 进入某个盘符cd 目录 # 进入某个目录 - cd /cd … # 回到上一级目录 - 一样dir # 查看当前文件夹中的文件和文件夹 - lstree # 查看当前文件夹中的所有文件和文件夹包括子文件夹及其文件，树状结构cls # 清屏 - clearipconfig # 查看当前电脑的网管信息 - ifconfigsysteminfo # 查看当前电脑的配置信息md 文件夹名 # 新建文件夹 - mkdir make director
2020-08-04 11:14:06
83
原创 数据的劫持与双向绑定
1，首先在html里面写一个input的文本输入框；// 我们后面需要劫持并且可以动态改变文本框里面的内容2，创建js代码<script> // 定义一个对象 用于存数据并且可以动态修改数据 var obj = { name:"张三" } // 通过input事件动态获取文本框的值 并且赋值给obj document.querySelect("input").oninput = function(){ obj.name = document.querySelect("in
2020-07-29 10:34:43
257
原创 js实现滑动轮播（里面有轮播的思路 还有几个封装好的函数 ，拿出去就可以用的 福利一波）
1，构建html样式，代码如下<div class="banner"> <ul> <li> <a href="#"> <img src="images/1.jpeg"> </a> </li> <li>
2020-07-25 09:11:39
204
1
原创 js实现登陆与注册
1，首先在phpstudy文件中寻找到一个文件名叫 “www” 的文件 在里面创建html，js，php文件；2，在Navicat 软件中连接到phpstudy的MySQL；3，在Navicat 软件中寻找一个数据库 并创建一个表格；4，书写html代码（如下图1）编写简单的注册表单结构 并通过js 给表单验证；点击注册跳转到php文件中；5，php代码（如下图2） 首先获取html代码中表单的值 然后查找表单的数据 进行判断 如果用户存在就跳转回到上个html页面 用户名设置成功后...
2020-07-22 00:10:54
7402
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人