- 博客(38)
- 收藏
- 关注
RSS订阅原创 vscode配置react开发环境
1、安装 ES7 React/Redux/GraphQL/React-Native snippets2、在设置-首选项下搜索Include Languages 在下面增加一项 javascript ，javascriptreact。如下图3、搜索trigger，在Trigger Expansion On Tab选项前勾选。
2022-05-28 08:06:05
2970
原创 npx命令讲解
1、npx是npm5.2之后发布的一个命令2、npx是为了解决什么？场景：项目中（项目内部，不是全局）安装了测试工具Mocha,想要调用之前需要再package.json的scripts字段里面添加./node_modules/.bin/mocha -v现在只需要使用npx mocha -v进行调用就行3、npx的原理是什么？npx会自动查找当前依赖包中的可执行文件，如果找不到，就会去PATH里找。如果依然找不到，就会帮你安装！使用案例：1、使用create-reac...
2022-05-28 07:16:07
2287
原创 原生js动态添加元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生js动态添加元素</title> <style> .phone { .
2022-03-17 14:44:54
2183
原创 vue 拖拽（Drag and Drop）
1、拖拽：设置允许拖拽的div元素及元素拖拽的的开始事件draggable="true"@dragstart="drag(item.data)"<div draggable="true" @dragstart="dragEnterEvent($event, videoSrc.id)" @dragend="dragEnterOver"> <div style="display:flex;"> <svg class="kc-svg-icon"
2022-01-07 17:08:09
11586
原创 js控制网页全屏，监听退出全屏动作
//控制全屏方法function requestFullScreen(element) { var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11.
2021-02-01 10:25:46
1034
1
原创 vue组件中插槽的使用<slot>
1、定义一个名字为headerBannar.vue的子组件，场景：带banner的导航栏里某块儿文字内容及样式自定义代码如下： <slot name="theme"></slot>父组件中： <common-header> <template slot="theme"> ...
2019-08-28 15:56:46
353
原创 纯css按钮的实现
效果如下（带动画）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
2019-08-23 16:52:06
749
原创 ie浏览器打开vue项目白屏问题
第一步：cnpm install babel-polyfill -S第二步：在入口文件main.js文件中引入 import “babel-polyfill”修改配置文件 vue-loader.conf.js entry: ["babel-polyfill", "./app/js"]最后在index.html中加入<mate http-equiv="X-UA-Compat...
2019-08-23 16:50:56
1541
原创 option在IE上隐藏不了问题解决方案
$("#selectEventopt option[value='locked']").wrap("<span style='display:none'></span>"); $("#selectEventopt option[value='label_index']").wrap("<span style='display:none...
2019-08-15 10:09:28
1134
1
原创 radio 选中不选中样式 2种方式
效果代码: <div class="radio-l"> <input type="radio" name="ll" value="open" id="open" checked> &am
2018-10-12 11:23:23
5634
原创 上传图片element
<template> <div class="bkc-f7 p-tb"> <div class="main-width"> <div class="comment-main" v-loading="loading" element-loading-text="数据加载中&q
2018-08-24 15:46:00
1621
翻译 阻止事件冒泡触发父元素的事件
v-on:click.stop.prevent="dosomething()"<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符
2018-08-24 11:03:58
974
翻译 轮播 vue
vue-awesome-swiper参考官方网站https://www.npmjs.com/package/vue-awesome-swiper/v/2.6.7
2018-08-17 14:49:40
509
原创 vue 锚点指令v-anchor
export default { inserted: function(el, binding) { el.onclick = function() { let total; if (binding.value == 0) { total = 0; } else { ...
2018-08-10 16:42:23
5749
4
原创 移动端公共底部
效果如下共通出来的vue组件<template> <div class="bottom_tabs"> <div class="tabs_list"> <ul> <li class="tabs_one"> <a href="javascript
2018-08-09 14:07:21
731
原创 移动端输入框过滤表情
changeEmoji() { var patt=/[\uD800-\uDBFF][\uDC00-\uDFFF]/g this.userMsg.nickname = this.userMsg.nickname.replace(patt, function(char){ if (char.length===2) { ...
2018-08-09 14:06:34
3650
原创 vue props报错
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "pa...
2018-08-09 14:06:17
2528
转载 vuex入门文档---细说
安装、使用vuex首先我们应该在vue.js 2.0的开发环境中安装vuexnpm install vuex --savemain.js 中引用import vuex from 'vuex'Vue.use(vuex);var store = new vuex.Store({//store对象 state:{ show:false }})...
2018-08-09 14:04:08
246
原创 vue过滤器 正则表达式 匹配第一个字符与最后一个字符中间用***代替 防止信息泄露
1、定义过滤器exports.phoneFilter = function (params) {if(params.length >1 ){return params.replace(/^(.).*(.)$/,"$1***$2")}else{return params+'***'}} 2、解析 $1是正则里的捕获,就是前面的(.)里的东西 3、效果...
2018-07-19 10:43:03
7000
1
翻译 js 判断数组中存在某个元素
1、通过循环遍历的方法var arr = ['11','12','13','14'];/** * 使用循环的方式判断一个元素是否存在于一个数组中 * @param {Object} arr 数组 * @param {Object} value 元素值 */function isInArray(arr,value){ for(var i = 0; i < arr.len...
2018-07-02 10:26:04
1764
翻译 css小三角提示信息
实现效果如下：不带边框的效果带边框的效果1、不带边框css:*{margin:0;padding:0;} body{ background:#666; font:14px/20px "Microsoft YaHei"; text-align: left; } ...
2018-06-22 10:13:29
692
原创 vue在已有数组对象中添加新数组视图不实时响应的解决方案
说明：item:指的是需要扩展的字段‘commentImgList’指的是扩展字段的名称[]:扩展字段的类型可以直接写值接下来push进去的字段视图也会跟着改变的
2018-06-22 10:12:32
2521
1
原创 vant 上传图片传参问题
// 上传图片 onRead(item){ return file => { let query = { file:file.content } console.log(item) comment.uploadImg(query).then(res=>{...
2018-06-21 17:47:08
15224
2
原创 js数组列表按时间排序后改成按时间展示的方法
fetchList(){ user.collectGoods().then(res=>{ this.result = res.data this.result.list.forEach(function(item) { this.result.newList = [] item.crea...
2018-06-19 17:13:17
4333
原创 input 、textarea 改变placeholder的字体颜色
.dz_textarea textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #9c9c9c;}.dz_textarea textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #9c9c9c;}.dz_textarea...
2018-06-15 10:40:22
15541
翻译 简单复制订单号手机号功能不用插件
效果：代码： <p class="li1">订单编号：<input type="text" :value="orderDetail.orderSn" id="copyObj"> <span class="fr" @click="copyOrderSn"&a
2018-06-12 17:28:50
5047
翻译 Hbuilder less自动编译成css
1、首先，电脑里面应该有less编译环境才可以，如果没有用node安装一下less即可（前提是有安装node）执行命令行 npm install -g less安装完后的位置大致在2、安装完成后，打开hbuilder 工具 ->预编译器设置->...
2018-06-07 12:00:10
1771
翻译 css计步器 购物车中的+ - 样式
效果如下：全部代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=n
2018-06-07 10:35:09
2226
原创 nuxt 路由扩展配置
霸气的把mimon中的-mi 去掉（在nuxt.config.js中） router: { extendRoutes (routes) { // 风骚的把-mi去掉 routes.forEach(element => { let path = element.path path = path.replace(/-mi$/,''...
2018-06-07 09:44:47
7286
原创 css文字两行或者几行显示省略号
一行显示否则省略号.line-clamp1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}两行显示多则显示省略号.line-clamp2 { overflow: ...
2018-06-07 09:33:41
32419
2
翻译 vue路由传参方式 nuxt
vue路由传参常用的三种方式1、通过params来传递参数（本人常用）传递参数接收参数<li v-for="article in articles" @click="getDescribe(article.id)">2、通过path跳转 getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$...
2018-06-07 09:19:51
4840
2
原创 checkbox 选中与未选中状态 来自米蒙服务器端渲染项目
1、效果2、html代码片段 <div class="pay_style"> <h5>请选择支付方式</h5> <label class="b-b noflex clearfix relative" for="zfb"> <div class="fl&q
2018-05-31 17:17:49
901
原创 基础css 移动端common.css
global.css@charset "UTF-8";body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div { margin: 0; padding: 0; border: 0;}html,body { height: 100%; width: 100%;}...
2018-05-19 17:17:35
2037
翻译 vue处理ie兼容性问题
安装 babel-polyfill （cnpm install babel-polyfill --save-dev）在入口文件中引入 import "babel-polyfill" 或者 require("babel-polyfill")webpack.base.conf.js中配置entry: { app: ["babel-polyfill","./src/main.js"], }...
2018-05-04 17:45:26
5702
原创 webpack打包后图片显示问题
1、先解释一下这段配置代码的意思，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，然后通过url-loader进行处理，不大于10kb就会进行base64转码，就是将图片转为base65格式，如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下，也就是static/img/图片名，2、注意相对路...
2018-05-04 13:22:42
14172
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人