- 博客(36)
- 收藏
- 关注
原创 vue3+ts引用vue2的组件 解决$refs获取子组件里的方法和属性问题
vue3+ts引用vue2的组件 怎么$refs获取子组件里的方法父组件直接传参进去子组件watch监听 判断值调用方法
2022-05-13 13:18:19
945
原创 js复制功能
fzEvent(value) {//传入字符串 let clipboard = new this.$clipboard('img', { text: function () { return value } }) clipboard.on('success', e => { App.oTool.successT('複製成功'); clipboard.destroy(e) })
2021-10-28 10:43:14
132
原创 ant a-upload使用
<a-upload :action="$api.uploadPic" method='post' :show-upload-list="false" :headers='headers' :before-upload="beforeUpload" @change="val => handleChange1(val,i.
2021-09-18 10:36:09
2039
1
原创 vue element ui 主题色配置
项目目录package.json{ "name": "myweb1", "version": "1.0.0", "description": "A Vue.js project", "author": "", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm
2021-09-13 09:22:00
254
原创 vue ant 主題色設置
vue 2項目目录package.json{ "name": "myant", "version": "1.0.0", "description": "A Vue.js project", "author": "", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start":
2021-09-13 09:17:26
123
原创 excel請求接口下載
下載的連接 str+urls方法一this.$ajax({ method: 'get', url: str+urls, responseType: 'blob' }).then(res => { const BLOB = res.data; // Blob 对象表示一个不可变、原始数据的类文件对象(File 接口都是基于Blob) const fileReader = new FileReader(); // FileReade
2021-09-10 13:59:43
100
原创 router/index.js 各种问题
1router/index.js配置二级路由二级目录是 children 不是 childimport Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ // { // path: '/', // name: 'H
2021-09-07 13:54:25
1642
原创 ant <a-table customRow属性
有个需求是修改行的样式官网那个说明比较模糊改变行的样式没说清楚百度也是:customRow=‘rowstely’<a-table style="width:100%;" :columns="columns" :data-source="columnsData" id='fromtable' :rowKey='(record, index) => index' :customRow='rowstely' :row-selection="{ selectedRowKeys
2021-08-11 15:26:46
1025
原创 css居中
1.水平居中內容居中(包括元素标签 注意 块元素同行显示 需要转换display:inline-block)<div style='text-align: center;'>居中</div>(前提容器属性为块标签)容器居中<div style="margin: 0 auto;width: 100px;">居中</div>2.垂直居中<div style="width: 200px; height:200px;"><a hre
2021-06-01 14:56:18
98
原创 用css border画三角形before after气泡三角
border 三角div{ display:inline-block; width:0; height:0; border:10px solid; border-color:red green blue yellow;}气泡三角1 div叠加通过div模拟before after实现,不如 before after方便2 brfore after#demo{ width:100px; height:100px; border:2px solid #0
2021-06-01 09:46:41
261
原创 原生vue.js 手写侧边栏菜单一二级菜单
项目需求毕竟特殊,一时间找不到对应的组件,盖起来样式太过于麻烦,手写了HTML<div v-for='(item,ind) in menulist'> <div v-if='item.child'> <div class='gre-title' @click='item.static = !item.static'> <!-- <a-icon type="file-word" /> --> <img :s
2021-05-20 09:39:33
1285
原创 CKEditor4-vue 内联编辑器 使用避雷(为你使用 CKEditor 提供新思路)
最新接到一个项目,需要使用CKEditor,多方查找资料CKEditor4/5,最后我使用CKEditor4-vue。本着使用过百度的富文本编辑器。应该很容易上手才对。在使用过程中确实踩了很多坑。在使用学习新的技术,知识的时候。发生许多问题。为以后的学习开发。打开新思路。编辑器查找官网 // https://ckeditor.com官网提供三种不同的样式,我这里选用稍复杂的内联编辑器选取环境包的时候有两处github 官网 https://github.com/ckeditor 提供的.
2021-05-11 14:31:46
1195
原创 HTML5 小结
(一) 语义标签 (二)增强型表单 (三)视频和音频 (四)Canvas绘图 (五)SVG绘图 (六)地理定位 (七)拖放API (八) WebWorker (九) WebStorage (十)WebSocketHTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加绘画 canvas;用于媒介回放的 video 和 audio 元素;本地离线存储 lo.
2020-10-12 15:37:36
86
原创 HTML篇 小结
1简述一下你对HTML语义化 的理解用正确的标签做正确的事html语义化让页面的内容结构化,结构更清晰,便于浏览器,搜索引擎解析;即使在没有样式 CSS的情况下也以一种文档格式显示,并且容易阅读;搜索引擎的爬虫也依赖与THML标记确定上下文和各个关键字的权重,利于SEO;阅读源代码的人对网站更容易将网站分块,便于阅读维护理解;2标签上title与alt属性的区别是什么alt是给搜索引擎识别, 在图像无法显示的代替文本title视关于元素的注释信息,主要给用户解读当鼠标放到文字后图片上时有
2020-10-09 15:46:03
94
原创 CSS 篇 小结
1 介绍一下 css 的盒模型有两种:IE 盒模型 ,W3C 盒模型盒模型:内容(content) 填充 (padding)边界 (margin) 边框 (border);区别:IE 的 content 部分把 border 和 padding 计算了进去2 css 选择器优先级!important > 行内 > id >类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性3 垂直居中几种方式?单行文字:line-height = heigh
2020-10-09 15:45:28
76
原创 [object HTMLDivElement] 创建dom报与 innerHTML appendChild使用
在创建DOM , 插入DOM报错,其实是一种错误的写法 。错误演示 var a = document.createElement('div') //**创建DOM*// a.innerText = '123' // document.body.appendChild(a) //正常使用不报错 document.body.innerHTML= a //错误使用报错 页面显示 [object HTMLDivElement]正确使用innerHTML 插入的是
2020-09-30 09:30:26
1237
原创 textContent 与 innerHTML 与 innerText 区别
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul id="ul"> <li id="dli">蓝猫<div&
2020-09-30 09:22:07
204
原创 我对js原型和原型链的用法
我们知道在js中,万物皆对象,对象可以说是重中之重了。每一个对象都拥有自己的属性。但是在这个世界中有很多东西都是相似的,可以归为一类,他们有共同的方法和属性。不可能让每一个对象都定义一个属性吧。那样太消耗内存了。所以,在js中怎么才能让多个对象共享一个或多个方法呢?原型的出现就是为了解决这个问题。在js中每个对象都有一个与它关联的对象,叫做原型对象(可以理解为兄弟对象,他们两个有一定的关系)。每一次获取对象属性都是一次查询过程,当在对象的自有属性中找不到时就会去查找它的原型对象。在js中函数也是一个对象
2020-09-25 16:33:29
110
原创 HBuilder X 创建vue 遇到的坑 命令行创建 vue 项目
最近使用 HBuilder X 创建vue发现有很大的坑就是各种报错下载的目录也不全 总之就是各种坑咱也不会用啊 ,总之是不太友好于是就想到 直接用命令行创建vue init webpack + 项目名称就 OK
2020-09-23 16:54:42
1478
原创 Vue 路由四种跳转方式 比较
路由跳转的四种方式声明式:编程式:router.push(…)1 router-link2 this.router.push()3this.router.push() 3 this.router.push()3this.router.replace()用法同push4 this.$router.go(number)this.router.push跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面this.router.push 跳转到指定url路径,并想his
2020-08-05 10:36:23
409
原创 router-link八种属性介绍
router-link组件的属性有:to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class1 to<router-link :to="{name:'home',query:{kkk:'5555'}}">home页</router-link><router-link to="home">Home</router-link><router-link :
2020-08-05 10:27:07
1326
原创 Vue router 配置
本人写前端Vue 一年多了 。说来遗憾 ,接手的Vue项目居然没有用到路由跳转。特殊的项目需求(带点另类的奇葩)打开项目不管页面怎么跳转 url不变 。老总决定。出于这种情况的考虑。我的前台大哥,考虑了许久 (可以做但是会有很大的局限性)。就是组件的注册和销毁来实现。一年后的今天。老总想实现跳到当前某个项目的页面。走不回来了,所以又要改回 路由跳转。长时间的不使用接触 ,对路由跳转遗忘的很厉害。router/index.js 配置import Vue from 'vue'import Router
2020-08-04 15:54:21
209
转载 Vue 全局变量 两种方式(store ,自定义)
Vuex 并不限制你代码结构。但是, 它规定一些需要遵守的规则应用层级的状态,应该集中到单个store对象中提交mutation是更改状态的唯一方法,并且这个过程是同步的异步逻辑都应该封装到action内遵循以上规则,如何组织代码随便。如果store文件太大,可以将action,mutation和getter分割出来 ,形成单独的文件State 单一状态的树储存在Vuex中的数据和Vue实例的数据遵循相同的规则,例如对象必须是纯粹的Vue组件获取store实例中的值// 创建一个 Co
2020-07-31 11:31:27
3914
原创 探究HTML标签自定义属性
HTML标签可以自定义属性,IE,Firefox 以及chrome下的兼容性问题 <div l='s' id='myid' name='wac'>123 </div> <div id="newTest" myAttr="getAttr"></div>自定义属性 l myAttrIE浏览器console.log(document.getElementById('myid').name)直接赋值而动态产生一个自定义属性:docu
2020-07-29 10:38:01
131
原创 迷茫与焦虑---是世界观,价值观,人生观,人格品行的形成
每个人都会走过迷茫和焦虑包围的阶段它存在的意义是上天对于人的自我考量,信念,人生的意义,价值观,世界观,独立思考与行为,品性的磨砺。是真正自我认知,独自认知,形成的结果影响一生的一个过程。勇敢,坚强,奋斗,吃苦,自爱,慎独,克制是最考验人的内心善良,勇敢,坚强…出淤泥而不染,还是随波逐流 。人生的选择从信念开始...
2020-07-29 09:19:45
247
原创 冥想(自我修养- 慎独 自我修行)
冥想是让人进入高度稳定的状态,闭上眼睛来做 ,此时静而生慧。很多想不通的事情会想通————‘开悟’意识是分散的,让意识稳定。凝聚成一个强有力的点。达照法师永嘉第一卷说;惺惺寂寂是 无记寂寂非 寂寂惺惺是 乱想惺惺非惺惺就是明明白白 寂寂就是安安静静无记就是昏沉瞌睡 乱想就是心猿意马‘非’就是no ‘是’就是yes冥想又叫止观 先止一切妄想杂念 再去觉知一切达摩。只止不观 就是无记 是昏沉 很多人打坐禅修做一天 脑子里什么也不想 昏昏沉沉 这样只能感召等流的无记果(下辈子变成 之类每天不需要用
2020-07-27 15:05:05
473
原创 iframe标签用法
iframe<iframe src='url'></iframe>常用属性name ‘名称’widthheightsrcframeborder 边框 1,.0align 对齐scrolling 滚动条 (yes ,no,auto)sandbox 启用一系列对iframe中内容 的限制marginwidth 左边和右边的边距marginheight 顶部和底部 的边距srcdoc iframe中显示的页面HTML内容
2020-07-27 09:59:03
494
原创 JS中的深拷贝与浅拷贝(深复制浅复制)
Object.assign()object.assign()方法 从来没用过 看别人的博客上说经常使用 哎,年轻!这个方法就是浅拷贝,有一点特殊 ,就是处理第一层的深拷贝。var employeeDetailsOriginal = { name: '前端', family: { name: '前端大家庭' }};var employeeDetailsDuplicate = Object.assign({}, employeeDetailsOriginal );emp
2020-07-23 11:04:12
93
原创 理解 - JS构造函数与原型prototype上的方法
构造函数的方法与构造函数prototype属性上方法的对比区分 : 函数内声明的方法 , prototype上声明的方法函数内的方法 使用函数内部的方法可以直接访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话我们这个时候就需要考虑在函数的prototype 上添加方法prototype上的方法 当我们需要通过一个函数创建大量的对象,大量的方法时 就需要考虑prototype了这种情况下我们代码的内存占用就比较小在实际的应用中 这两种方法往往是结
2020-07-23 10:14:49
323
原创 前端 localstorage sessionStorage cooKie 保存token
前端用户登录的思路在网络上,用户访问有两种状态,匿名(没登录) 实名(登录)比如 :1 上百度搜索 ,匿名用户获取的权限,已基本满足用户的使用需要;2 上淘宝,匿名只有浏览器的使用权,想要买东西 ,必须登入(获取权限)3 上腾讯QQ,微信 必须登入获取权限登入必须获取token(token是有效期) 第一次登入 需要获取token 第二次登入 (1 token 还在有效期 2token已经期 3用户注销token)这里涉及到登入后保存token的问题 涉及到 token 的储存地址
2020-07-13 16:42:39
3087
原创 js 函数闭包探索
js 函数闭包经典案例 function fisrtFn(){ var a = 123 function twoFn(){ var b = 456 console.log(a) } return twoFn } var fa = fisrtFn() ...
2020-07-08 11:10:59
133
原创 webstorm 执行 npm install 报错 C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-07-08T01_30_
webstorm 执行 npm install 报错C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2020-07-08T01_30_10_697Z-debug.log也去百度了一下 好像遇到的人不多我的情况是 复制一份没有node_modules的VUE项目 npm install 下载环境 报如上错误方法一 解决办法:删除C:\Users\用户名.npmrc + 重新启动 (重启发现没有什么用)方法二 先清理一遍缓存npm ca
2020-07-08 09:52:10
8767
原创 14个 Vue 指令介绍 十个常用指令
Vue 指令一共有15个 常用 的在10个左右v-text插入文本<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>v-html插入标签更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用
2020-07-07 14:28:30
673
原创 jq Ajax请求中cache 属性各种属性 的 含义
cache作用:是否在缓存中读取数据的读取。cache属性是true(默认值)时:在第一次请求完成之后,如果地址和参数不变化,第二次去请求,会默认获取缓存中的数据,不去读取服务器端的最新数据。cache属性是flase(默认值)时:每次读取的是最新的数据。ajax缓存只对GET方式的请求有效,因为浏览器认为POST请求提交的内容必定有变化,所以不走缓存。$.ajax({ url : "haha", cache :false, //是否在缓存中读取数据的读取。 async :
2020-06-30 15:05:18
919
转载 vue 组件 Vue.component 用法
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。后面越来越发现插槽的好用。1、插槽内可以放置什么内容?2、默认插槽3、具名插槽4、作用域插槽一、插槽内容一句话:插槽内可以是任意内容。<div id="app"> <child-component></child-component></div><script> Vue.component('ch
2020-06-30 14:43:49
1120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人