- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue 子组件的子组件传值可使用inheritAttrs和attrs
父组件通过props可以向子组件传值，但在日常的开发中，还有一种情况很常见，就是父组件给子组件传值，这个值还要从子组件传给它的子组件，所以，我们可能会看到这样的代码：//父组件<div> <child :text="text"></child></div> //子组件<div> <my-child :text="text"></my-child></div> //子组件的子组件
2020-08-05 11:25:51
275
原创 vue+element表格表头列 动态配置列控制显示隐藏
1.配置表头列的子组件子组件全部代码 做了个本地存储 选择配置好的列 刷新 退出在登陆都会记录之前选择的状态<template> <el-popover placement="bottom" width="150"> <el-checkbox-group v-model="info"> <el-col :span="24" > <el-checkbox
2020-06-30 15:53:36
4283
原创 vue项目 vuex 结合v-if控制账号权限
1.首先在登录的时候需要后台返回一个当前账号绑定的角色id，会通过这个角色id去调一个接口获取到该角色的权限值 （如何给账号绑定角色，角色如何选择哪些功能权限不在此叙述）通过sessionStorage保存角色id sessionStorage.setItem("roleIds", response.data.data.roleIds);2.在路由js文件中使用导航守卫 判断是否有权限值先在vuex 中使用 store.getters.permission看是否有权限值 有的话下一步 没有的话通
2020-06-23 10:56:50
3188
1
原创 深入理解vue 修饰符sync
示例代码如下<comp :foo.sync="bar"></comp>会被扩展为：<comp :foo="bar" @update:foo="val => bar = val"></comp>当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：this.$emit('update:foo', newValue)猛一看不明白，下边我么通过一个实例（弹窗的关闭事件）来说明这个代码到底是怎么运用的<template>
2020-06-19 18:06:48
159
原创 vue中 this.$set的用法详解
<template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.name}}</p> <button class="btn" @click="handClick()">更改数据</button> </div></template><script>export default { name: 'App
2020-06-17 10:02:52
3058
原创 v-modle 原理解析
v-model借助元素的 value 属性和 input 事件实现双向绑定第一行的代码其实只是第二行的语法糖。<input v-model="sth" /><input v-bind:value="sth" v-on:input="sth = $event.target.value" />vue.js定义 new Vue({ data{ str:"我很帅" } })然后第二行代码可以简写成这样<
2020-06-13 13:55:13
897
原创 vue指令实现 防止按钮短时间内多次点击
1.创建一个clickStatefrom.js文件写上vue 全局指令//clickStatefrom.js文件export default { install (Vue) { // 防止重复点击 Vue.directive('preventClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!el.dis
2020-06-10 10:37:47
4043
1
原创 js基础基本数据类型的转换
其他类型转数字类型// 1.isNaN()是否有非有效数字 有非有效数字返回true 否则false console.log(isNaN(num)) //true// 2.Number()方法把其他类型转为数字类型 先把要转换的类型转换为字符串类型 在来判断是否有非有效数字 有的话就返回NAN 没有就返回数字 let num = "s23" let num1 = "23" console.log(Number(num))//NAN console.log(Number(num1))//23
2020-05-09 10:33:05
176
原创 try和catch的用法
try catch 错误处理；执行规则：首先执行try中的代码 如果抛出异常会由catch去捕获并执行 如果没有发生异常 catch去捕获会被忽略掉 但是不管有没有异常最后都会执行。try 语句使你能够测试代码块中的错误。catch 语句允许你处理错误。throw 语句允许你创建自定义错误。（抛出错误）finally 使你能够执行代码，在 try 和 catch 之后，无论结果如何。代...
2020-04-30 16:12:45
88449
5
原创 uni app 使用分段器之后如何动态自定义导航栏标题
1.在官网引用分段器 详细地址 https://ext.dcloud.net.cn/plugin?id=54 看会就明白//分段器使用<uni-segmented-control :current="current" :values="items.map(i=>i.title)" @clickItem="onClickItem" style-type="text" activ...
2020-04-27 10:22:00
2181
原创 js对象转化为数组对象
1.对象的两种取值方式我们最常用的一种let obj = {name: '张三'};console.log(obj.name);另一种是不怎么常用let obj = {name: '张三'};console.log(obj[name]); //张三2.将对象转化为数组对象let obj = {'未完成':5, '已完成':8, '待确认':4, '已取消':6};那二者之...
2020-04-25 15:37:20
570
原创 vue pc端换肤功能
1.在点击更换主题页面得地方 使用setAttribute设置自定义属性 并把变量存起来handleChangeTheme(theme) { window.document.documentElement.setAttribute('data-theme', theme) localStorage.setItem("theme", ...
2020-04-24 15:52:53
927
1
原创 Vue事件总线
一、初始化首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js`// event-bus.jsimport Vue from 'vue'export const EventBus = new Vue()二 .假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定...
2020-04-20 11:27:43
247
原创 element confirm确认框阻止键盘回车事件
使用beforeClose(){}这个函数 this.$confirm("出库电池是否选择租赁站点?", "提示", { confirmButtonText: "是", cancelButtonText: "否", type: "warning", closeOnClickModal:false, //阻止键盘点击回...
2020-04-14 14:14:26
2688
2
原创 VUE中this.$nextTick()怎么使用？
VUE中this.$nextTick()怎么使用？官方文档是这样解释的：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。简单的理解，我认为vue.js中this.$nextTick()就是起到了一个等待数据的作用，也就是说，将一些回调延迟，等到DOM更新之后再开始执行。简单点说，相当于setTimeout()的作用例如：你改变了dom元素...
2020-04-14 13:50:47
3854
原创 Vue项目中使用svg图标
一、配置1.安装依赖npm install svg-sprite-loader --save-dev2.配置build文件夹中的webpack.base.conf.js，主要在两个地方添加代码，如下图所示exclude: [resolve('src/icons')],{ test: /\.svg$/, loader: 'svg-sprite-loade...
2020-04-13 15:54:22
1486
原创 js 原生 Object.keys()详解
Object.keys()返回一个数组传入字符串，返回索引var arr = ['a', 'b', 'c'];console.log(Object.keys(arr)); // console: ['0', '1', '2']传入对象，返回属性名var obj = { a: 'alive', b: 'bike', c: 'color' };console.log(Object.key...
2020-04-10 16:06:57
223
原创 使用this.$refs传值组件复用之操作日志
1.父组件引用 注册 使用 import operationLogs from '@/components/cline/operationlog'; components: {operationLogs}, <operation-logs ref="operationLog" @success="operationOk"></operation-logs> //使...
2020-04-09 16:51:50
1737
原创 vue使用过滤器 根据字符长度对隐私字符加密处理
1，定义一个过滤器 filters:{ Name(val){ if(val){ let len=""; for (let i = 0; i < val.length-1; i++) { len=len+"*"; } return val.su...
2020-04-07 15:55:01
431
原创 子组件在全局注册使用 避免重复引入注册
1.新建一个js文件//把子组件引入 有多个 就引入多个import FSingleImageUpload from "@/components/FSingleImageUpload";import Operator from "@/components/operation/Operator";export default { install: function (Vue) { ...
2020-04-07 15:12:03
774
原创 vue+element封装公共上传图片组件
1.先定义一个上传图片的子组件 <el-upload class="avatar-uploader upload" :action="imgurl()" //接口地址 list-type="picture-card" //格式为图片 :show-file-list="false" ...
2020-04-07 14:58:38
2237
原创 vue+element分页组件封装成公共组件
1.首先定义一个分页子组件 <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :tota...
2020-04-07 11:15:30
1901
原创 vue全局使用公共方法
1.首先新建一个文件夹：utils ,然后在里面建立 一个文件auth.js2.封装的一个消息提示框3.在main.js全局引入4.最后使用记录一下 亲测可以使用
2020-03-28 10:04:22
724
原创 uni app 使用字体图标
1.首先登陆iconfont官网，创建自己的项目，找到需要的图标加入购物车，然后添加到项目中2.生成unicode ,点击下载至本地，解压3.将解压后的文件放入static目录4.修改为本地引入方式5.使用时在App.vue中全局引入该文件@import “./co...
2020-03-24 14:13:53
418
原创 vue中混入mixin的使用
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项mixin混入在vue开发中十分常见，它的用法也非常的简单，只需要记住，公共的方法函数属性统统都可以放置到mixin中，主要就是为了复用代码，减少代码冗余，如，公共的请求封装，公共的分页属性，公共的查...
2019-12-19 10:46:43
340
原创 JS正则表达式可以为空但不可以输入特殊字符可以输入逗号（自用）
在写备注或者说明输入框的时候，一般都要求不能有特殊字符，但是可以有逗号，可以输入汉字、字母、数字逗号。也可以为空 ，查了很多都不行，亲测有效。/(^$)|(^[\u4E00-\u9FA5a-zA-Z0-9,，]{1,250}$)/(^$) // 表示可以为空(^[\u4E00-\u9FA5a-zA-Z0-9,，]{1,250}$) //表示可以输入1-250个字的数字、汉字、字母、...
2019-12-14 16:13:10
1811
原创 es6 export及export default 的使用 及 区别
ES6模块主要有两个功能：export和import 1个导入1个导出export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口import用于在一个模块中加载另一个含有export接口的模块。一个a.js文件有如下代码：export var name="张三"; 在其他文件里引用import { name } from "/.a.js" //路径根据你的...
2019-12-13 14:10:03
229
原创 vue中使用 v-viewer图片放大，旋转，缩小等操作
1.安装全局依赖npm install v-viewer --save2.全局引入import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css';Vue.use(Viewer);Viewer.setDefaults({ Options: { "inline": true, "button": true,...
2019-12-12 14:24:06
891
原创 自定义组件使用v-modle
父组件<template><div class="parent"> <p>我是父组件, 对子组件说： {{data}}</p> <Child v-model="data"></Child></div></template><script>import Child fr...
2019-12-07 11:19:33
121
原创 数组去重和数组对象去重
遇到一个数组对象需要去掉重复数据得问题； let arr=[ {id:1,name:"广州运营商"}, {id:2,name:"北京运营商"}, {id:3,name:"深圳运营商"}, {id:1,name:"广州运营商"} ]我们借助对象访问属性的方法，判断属性是否存...
2019-12-05 16:55:05
171
原创 js对象的属性名是中文如何点出来？
今天在做项目的时候遇到了返回中文命名的数据如图:可以这样点出来 如下 let data={总收入:1088699.67,总订单:4455,总客户:4260} this.smg = data["总客户"];
2019-11-26 13:57:28
5629
3
原创 vue 本地的项目别人怎么通过 ip地址来访问
最近有人问我，我写了个vue 项目，但是我经理想在他电脑上看效果 怎么看不了，连接的是同一个无线网**1告诉大家一个最简单的方法，找到confing下的index.js 把你的host： 原来的localhose 改为0.0.0.0，然后保存，这样别人就能在同一局域网下 来访问你的vue 项目了 ** host: '0.0.0.0', //改为0.0.0.0 port: 80...
2019-11-26 09:23:55
3614
1
原创 新增编辑共用同一组件
父组件 <addPut ref="addPut" :title="title" :info="info" :brandList="brandList" @close_add_edit="close_add_edit" />子组件<el-dialog :title="title" :visible.sync="showModal" :before-close="hand...
2019-11-23 18:04:17
1009
原创 可复用的显示隐藏按钮组件
先上效果图子组件代码1<template > <transition name="slide-fade"> <div v-show="show"> //是否显示隐藏 <slot></slot> //使用插槽 </div> </transition>...
2019-11-14 11:32:05
153
原创 vue结合element-ui的Upload上传图片
1.上传图片组件子组件代码//html代码<template> <el-dialog title="产品图片" :visible.sync="dialogPicVisible" width="30%"> <el-form :model="PicForm" :rules="rules" ref="PicForm"...
2019-11-14 10:55:00
265
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人