![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 60
一个抱抱一首歌
加油鸭
展开
-
Vue3(2):Vue3使用socket.io
今天想使用eggjs和vue3搭建一个简单地聊天平台,发现普遍用的是socket.io(其实是eggjs的websocket在github第一个项目就是socket.io) ,而且socket.io和websocket并不相通socket.io和wesocket有点区别,区别大家可以点击下边连接了解下。原创 2022-11-13 22:28:05 · 2895 阅读 · 3 评论 -
Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别
Rollup是一个JavaScript模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的ES6版本中,而不是以前的特殊解决方案,如CommonJS和AMD。ES6模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6模块最终还是要由浏览器原生实现,但当前Rollup可以使你提前体验。原创 2022-08-24 20:29:46 · 815 阅读 · 0 评论 -
vant-form 统一校验表单
vant 官网 点击进入vant 官网提供了submit按钮,但是submit按钮实在很不好用(防抖节流用不了,独立样式不好用)vant 官网提供的form的校验方法 :当我在输入: console.log(this.$refs.form)输出的是:发现了其中的validateAll,打断点进去,发现该方法用Promise.all去提交所有验证,如果发现errors.length大于1,返回reject,否则返回resolve validateAll: function va.原创 2021-11-08 11:19:39 · 7707 阅读 · 0 评论 -
antdv实现 tags-Input
Tags-Input实现要求使用input和tags能够输入回车后显示支持校验是否填写代码<template> <div> <template v-for="(tag,index) in tags"> <a-tag :style="TgOptions.tagStyle" :key="index" :closable="closable" @close="(原创 2021-08-30 09:43:00 · 1993 阅读 · 0 评论 -
手写一个Vuex
vuex和redux区别在于vuex 是通过改变响应式的数据改变state的值 state的改变将会直接影响使用他的compoents的改变redux 是通过dispatch进行发布订阅 让使用的组件进行修改vuex.jslet Vue;class Store { constructor(options){ this._mutations = options.mutations; this.__actions = options._actions;原创 2021-06-29 23:38:39 · 84 阅读 · 0 评论 -
vue antd select 自定义options显示文字
在 a-select 添加 option-label-prop=“label” 属性 option-label-prop 对应的是options中label的属性 <a-select style="font-size:10px;width:130px" v-model.trim="i.signer" :getPopupContain.原创 2021-06-10 17:02:00 · 5376 阅读 · 0 评论 -
vscode 新建vue代码片段
vscode 代码片段添加打开用户代码片段填入代码段文件名键入一下片段{ "Print to console": { "prefix": "vueinit", //键入前缀 "body": [ "<!-- $0 -->", //占位符 "<template>", " <div></div>", "</template>", "<script >", "export def原创 2020-12-14 11:58:21 · 254 阅读 · 0 评论 -
better-scoll实现上拉加载更多数据
实现的需求使用better-scroll下拉刷新用mixin将列表请求进行封装scroll.vue<template> <div ref="wrapper"> <div > <slot></slot> <!-- -> <div class="scrollBottom" v-if="pullup">{{showText[scrollText]}}</div&g原创 2020-12-12 18:28:07 · 436 阅读 · 0 评论 -
vue出现Avoid mutating a prop directly since the value... 问题解决方案
今天在写一个自己的弹窗组件时候发现一个bug,虽然只是一个警告,但还是想方法解决了下触发原因如果你写一个弹窗组件,父亲通过showBottom控制该组件的打开关闭,然后子组件将showBottom改成false,问题就出现了。(这里不用emit的原因是父组件其实没必要在写一个方法去监听这个方法)vue是不建议通过子组件擅自更改父组件传过来的值的。会报错:报错代码如下父组件 <cartBottom :showBottom='showBottom'></cartBottom&g原创 2020-12-07 21:23:21 · 4512 阅读 · 0 评论 -
vue不同组件传值的多种方式
index.vue页面<template> <div> <child-one :dataOne="dataOne" @recevice="onRecevice"></child-one> <child-two></child-two> <child-three></child-three> <child-four></child-four> &原创 2020-11-30 14:13:45 · 861 阅读 · 1 评论 -
uni.showToast一闪而过的问题
今天在用真机测试uniapp的时候 发现uni.showToast会出现一闪而过的问题。设置duration也没有用。结果发现是在执行的时候,下面加了刷新列表的方法。虽然不知道是uniapp自己的bug还是传入父组件请求刷新列表的问题。加个setTimeout即可搞定 onConfirm(e) { this.hanleFJFF({ equipCode: this.selectObject, runstatew: e.value[0], }); /原创 2020-11-25 15:26:21 · 5629 阅读 · 0 评论 -
js以及jq获取select选中的option
<body> <div> <select id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select id="sele原创 2020-11-15 21:47:18 · 242 阅读 · 0 评论 -
vue+vant组件+h5plus使用Hbuilderx实现拍照选取图片功能
这几天用cordova用的头大,用cordova插件cordova-plugin-camera感觉不好用,而且在某些机型有点问题==所以改成用HubuilderX进行打包,并且使用h5plus的api进行拍照调用官方api: 点击这里进入注意的是 :该程序必须打包成apk在真机或者模拟器运行,不然会报错github项目地址:从这里进入先上效果图:具体实现:android.js//获取系统方法function takePhoto(callback) { var cmr =原创 2020-11-04 14:00:00 · 2920 阅读 · 6 评论 -
用css实现一个弹出框(类似element的Popover )
实现的效果点击按钮弹窗子组件(采用vue的fade-in动画)点击其他地方弹窗消失tab选中效果先上效果图父页面 <transition name="fade"> <div v-if="locationvisible"> <locationDialog class="locationDialog"></locationDialog> </div> </transition>原创 2020-09-20 14:45:13 · 2042 阅读 · 1 评论 -
CSS 宽度固定,字体不够撑开,字体超出用省略号
效果CSS:width:60px;text-align:justify;text-align-last:justify;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;原创 2020-09-08 11:41:58 · 941 阅读 · 0 评论 -
初级前端文章精选
HTML,CSS布局https://www.jianshu.com/p/d9373a86b748/ (Flex布局)https://juejin.im/post/6865107864139087886 (多种布局)https://juejin.im/post/6844903474879004680 (16种实现水平居中垂直居中)JShttps://juejin.im/post/6844903496253177863 (call,bind,apply)https://blog.csdn.原创 2020-09-08 10:54:49 · 156 阅读 · 0 评论 -
H5+CSS 实现前面带搜索图标的搜索框
一个由H5+CSS3实现带图标的搜索框效果图H5:<div class="wx-index"> <div class="wx-index-search"> <div class="icon"><img src="./search.png" class="search-icon" /></div> <input v-model="search" placeholder="口腔溃疡" /> &原创 2020-08-13 00:33:58 · 2154 阅读 · 0 评论 -
记录vue运行出现的问题(Node Sass could not find a binding for your current environment: Windows 64-bit with N)
运行公司的项目 一开始运行出现这种错误Module build failed (from ./node_modules/sass-loader/dist/cjs.js):Error: Missing binding E:\江苏安防\lab\af-gl\node_modules\node-sass\vendor\win32-x64-64\binding.nodeNode Sass could not find a binding for your current environment: Windows原创 2020-07-25 11:24:54 · 557 阅读 · 0 评论 -
react HTML打印
今天公司发需求需要我将一些图片实现打印然后我使用的是iframe打印原理就是新建一个img标签 然后对图片进行存储,然后通过createElement创建一个iframe进行print()操作代码如下,下面是对图片进行循环打印,需要的话可以改成单张// 在新窗口打印 printOnNewWindow = (arr) => { let printContent = ""; // console.log(this.waterMark(arr[0])) for (le原创 2020-05-11 09:44:45 · 458 阅读 · 0 评论 -
box-sizing的content-box与border-box
content-box 为box-sizing的默认样式content-box 和 border-box 的区别在于content-box 宽度高度不包括padding以及border的宽度和高度我们设置 <div class="item box1"> box1 </div> .item{ width: ...原创 2020-04-26 09:19:59 · 199 阅读 · 0 评论 -
HTML水印
水印 <script src="./jquery-2.0.3.min.js"></script> <script> function watermark(text) { let opacity = "0.2" let space = 1 //修改这个可以改变文字间距 ...原创 2019-12-19 10:06:59 · 279 阅读 · 0 评论 -
闭包,es6 解决setTineout输出的问题
记得在一次笔试中笔试过这么一道题for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i) },1000 * i)}给你这个一个程序 然后输出 如果得不到想要的结果(0,1,2,3,4) 你会怎么修改解决方法一用闭包的方法解决for (var i=1; i<=5; i++) { setTim...原创 2019-09-02 14:21:20 · 314 阅读 · 0 评论 -
在Vue使用svg图标
安装 cnpm i svg-sprite-loader --save在webpack.base.conf.js中添加在rule里面添加{test: /.svg$/,loader: ‘svg-sprite-loader’,include: [resolve(‘src/icons’)],options: {symbolId: ‘icon-[name]’}在添加e...原创 2019-08-17 22:48:44 · 180 阅读 · 0 评论 -
span可改变宽度 不换行
做下笔记html<div class="form"> <span class="country"> 国家/地区 </span> <span class="countrys"> 中国 <...原创 2019-08-15 10:43:56 · 636 阅读 · 0 评论 -
ES6 Set基本用法
Set基本用法Set 结构的实例有以下属性。Set.prototype.constructor:构造函数,默认就是Set函数。Set.prototype.size:返回Set实例的成员总数。Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。Set.prototype.add(value):添加某个值,返回 Set 结构本身。Set...原创 2019-08-19 11:36:51 · 133 阅读 · 0 评论 -
单点登录SSO系统
什么是SSO系统 SSO,英文全称是Single Sign On,即单点登录。SSO是指在多个应用系统中,用户只需要登录一次就可以...转载 2019-08-06 14:57:43 · 152 阅读 · 0 评论