- 博客(49)
- 资源 (1)
- 收藏
- 关注
原创 Vue中computed和watch的总结
计算属性(computed)1,我们需要对数据进行一些处理后再展示这个时候就可以用到computed。当然模板中也可以处理,但是可读性差,且不好维护。如下: 对已知数组转换特定字符串 <!-- <div id="app">{{arr.join('-')}}</div> --> <div id="app">{{str}}</div> <script src="https://cdn.jsdelivr.net/npm/v
2020-10-20 11:38:18 202 1
原创 js浅拷贝与深拷贝的理解
拷贝第一种情况 普通赋值let a = 1let b = ab = 2console.log(a) // 1console.log(b) // 2但如果a是一个对象objAlet objA = { name: 'ming', age: 18,}let objB = {}objB = objAobjB.age = 20console.log(objA.age) // 20console.log(objB.age) // 20原本只是想修改objB中的age属性值,但同
2020-09-30 16:37:30 131
原创 iview + vue table分页勾选记忆
想法:1,已知给 data 项设置特殊 key _checked: true 可以默认选中当前项2,用tempArr[]记录勾选的数据的id,勾选时则加入,取消时则删除。3,渲染数据时,对比tempArr[]的id代码:<template> <div style="width:500px;margin:0 auto"> <Table border :columns="columns" :data="datas" @on-select="onSelect"
2020-06-30 14:55:01 1622 1
原创 Vue中使用并封装代码编辑器
我选择是 vue2-ace-editor1,安装npm install --save vue2-ace-editor2,简单封装成组件并使用<template> <div> <editor ref='myEditor' v-model="content" @init="editorInit" :lang="propLang" theme="chrome" width="90%" :height="propHeight" :options="op
2020-05-28 18:04:49 1269 1
原创 js 一键复制文本
//创建input标签 let input = document.createElement('input') //将input的值设置为需要复制的内容 input.value = '复制内容'; //添加input标签 document.body.appendChild(input) //选中input标签 input.select() //执行复制 document.execCommand('copy') //移除input标签 document.body..
2021-12-07 14:51:19 283
原创 vue-quill-editor v-html内容不居中或者样式失效
只需要添加class="ql-editor" <div class="ql-editor" v-html="content">
2021-12-07 10:50:10 2296 1
原创 微信小程序中的一些记录
富文本中的图片超出解决办法temp.contentText = temp.contentText.replace('<img ', '<img style="max-width:100%;height:auto"')this.setData({ detail:temp})
2021-10-15 17:05:05 138
转载 axios 中的content-type
get请求不存在设置content-type。只有post和put用到content-type,常用的post方式,所以这里着重说post。post的content-type三种类型:Content-Type: application/json对于axios,post的时候axios.post(url,{a:1,b:2}),第二个参数是对象的时候,默认是这个类型Content-Type: application/x-www-form-urlencoded对于axios,post的时候let
2021-09-17 09:13:07 186
原创 一些正则 (记录类)
数字/^[0-9]*$/数字与小数/^\d+(?=\.{0,1}\d+$|$)/手机号 /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
2021-09-15 11:58:12 52
原创 定义全局自定义组件
1,mian.js中import comTip from '@/components/comTip/comTip.vue'Vue.component("comTip", comTip);2,使用<comTip />
2021-09-15 09:52:11 93
原创 高效格式化element table的列数据
高效格式化element table的列数据1,如一个列表中有两列时间数据需要格式化2,代码3,格式化代码方法//格式化时间 (timeFormat)自定义格式化时间方法_timeFormat (row, column) { let date = row[column.property] return date ? timeFormat(date) : ''},...
2021-08-31 15:20:05 449
转载 vue中使用novnc
安装cnpm install @novnc/novnc封装<template> <div id="screen" style="width:100%; height:100%"> </div></template><script>import RFB from "@novnc/novnc/core/rfb";export default { props: { wsURL: { type: String
2021-01-28 17:13:51 2786 9
原创 import按条件导入
import命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行if (condition) { // 报错 import moduleA from './moduleA';}import()函数import()函数,支持动态加载模块,返回一个 Promise 对象。import()加载模块成功以后,这个模块会作为一个对象,当作then方法的参数。import('./moduleA .js').then(moduleA => { console.log(mod
2020-12-30 09:36:48 6756
原创 npm install -save 与 -save-dev
package.json里有dependencies与devDependenciesdevDependencies 里面的插件用于开发环境dependencies 里面的插件用于生产环境–save-dev (-D) 安装的插件会被写入到 devDependencies 对象里面去–save (-S) 安装的插件会被写入到 dependencies 对象里面去...
2020-12-17 11:35:20 79
原创 electron启动时出现短暂白屏与黑屏问题
白屏问题创建窗口时 show: false,等到初始化完成后再显示app.on('ready', () => { mainWindow = new BrowserWindow({ frame: false, show: false, // 先不显示 }) mainWindow.loadFile('index.html') // 加载html页面 mainWindow.on('closed', () => { mainWindow = null })
2020-11-23 14:39:20 2259 1
原创 electron的基本使用
Electron是GitHub开发的一个开源框架,它使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的跨平台开发准备首先保证电脑上已经安装node.js1,安装electronnpm install -g electron // 推荐使用淘宝镜像安装 cnpm install -g electron2,检查electron是否安装成功npm electron -v // 显示版本号 则安装成功3,新建main.js作为electron的主进程const
2020-11-12 16:35:45 1330 1
原创 表单验证规则rules
前提async-validator 是一个异步验证的库,element 与 iview 的 Form 组件都是基于 async-validator 实现的数据验证,这里用iview演示代码。官方链接 https://github.com/yiminghe/async-validator基本使用给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段<template> <div class="form-d"> &l
2020-10-29 17:35:44 6132
原创 iview-admin 菜单只有一个子菜单时,父级菜单不显示问题
菜单只有一个子菜单时,父级菜单不显示问题src/components/main/components/side-menu/mixin.js只要修改mixin.js中 showChildren()中的判断条件 showChildren (item) { return item.children && (item.children.length > 1 || (item.meta && item.meta.showAlways)) },ite
2020-10-13 09:02:17 697 1
转载 js base64转可用formdata上传的文件
/* * 将base64转换成可用formdata提交的文件 * @param {String} urlData base64的url */convertBase64UrlToBlob(urlData){ //去掉url的头,并转换为byte var bytes=window.atob(urlData.split(',')[1]); //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); v
2020-09-10 16:11:10 1520
原创 js的冒泡与捕获总结
冒泡事件: 事件会从绑定的元素从里向外层层触发,直到document捕获事件:事件会从最外层开始触发,直到绑定的元素冒泡事件 <div id="c"> <div id="b"> <div id="a"></div> </div> </div> <script type="text/javascript"> document.getElementById('a').addE
2020-08-27 15:25:47 151
原创 iview Table中switch值无法刷新问题
table中含有switch的一列 { title: lang.testpaper_status, align: 'center', width: 120, render: (h, params) => { let t = this return h( ...
2020-08-26 15:58:54 1048
原创 iview 获取Table中Input的实时值
{ title: '路径', width: 250, render: (h, params) => { return h('Input', { props: { value: params.row.image.booturl }, on: { 'on-blur': (e) => { console.log(e.target.value) // e.tar
2020-08-26 11:13:31 962
原创 es6 扩展用算符(...运算符/剩余运算符)
扩展运算符将数组拆分成 以’,'分割的参数序列let arr = [1, 2, 3]// ...arr => 1, 2, 3console.log(...arr) // 1 2 3合并数组let arr0 = ['a', 'b', 'c']let arr1 = ['1', '2', '3']let arr2 = [...arr0, ...arr1] // ["a", "b", "c", "1", "2", "3"]arr0.push(...arr1)console.log(ar
2020-08-24 17:37:16 148
原创 es6 解构赋值
解构赋值 可以将属性/值从对象/数组中取出,赋值给其他变量数组解构let arr = [1, 2, 3]let [a, b, c, d] = arrconsole.log(a) // 1console.log(b) // 2console.log(c) // 3console.log(d) // undefined对象解构使用变量的名称匹配对象的属性key值 ,如果一致则讲对象属性的value值赋值给变量let person = { name: 'xiaoming', age: 18,
2020-08-24 16:28:29 102
原创 export与import的基本使用
ES6模块化主要有两个核心:导出export和导入importexport第一种写法export let name = 'ming'export let sex = '男'export let age = 18export const getA = () => { return 'A'}// export function getA () {// return 'A'// }第二种写法let name = 'ming'let sex = '男'let age =
2020-08-03 16:39:49 1056
原创 Vue中实现分块上传
基于vue-simple-uploader安装 npm install vue-simple-uploader --save注入插件import uploader from 'vue-simple-uploader'Vue.use(uploader)封装<template> <div> <uploader :options="options" :file-status-text="statusText" class="uploader-exampl
2020-07-23 12:48:25 948
原创 iview 给组件的默认事件添加自定义参数
已知table组件事件on-select对该事件添加自定义参数arr<template> <div> <Table border ref="selection" :columns="columns4" :data="data1" @on-select="(selection, row)=>{onSelect(selection, row, arr)}"> </Table>
2020-06-29 17:45:00 711 1
原创 js中运算符‘&&‘ 与 ‘||‘的高级用法
1,赋值在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true&&:从左往右依次判断,当当前值为true则继续,为false则返回当前值||:从左往右依次判断,当当前值为false则继续,为true则返回当前值 let temp = null temp = 1 && true && 'a' // 'a' temp = 1 && 0 && 'a' // 0
2020-06-12 14:23:46 639
原创 iview中Message与Notice内容换行
在内容中添加 或(更加规范) this.$Notice.open({ title: 'Notification title', desc: '1,Here is the notification description<br/>2,Here is the notification description' });效果:
2020-06-08 12:56:03 870
原创 js取整,Math的常用属性和方法总结
一,取整1,取整 parseInt(1.5) // 1 Math.trunc(1.5) // 12,向上取整 Math.ceil(1.5) // 2 Math.ceil(-1.5) // -13,向下取整 Math.floor(1.5) // 1 Math.floor(-1.4) // -24,四舍五入取整 Math.round(1.5) // 2 Math.round(1.4) // 1 Math.round(-1.5) // -1 Math.roun
2020-06-03 11:53:41 725
原创 iview table某一列显示多个数据并处理(数组或对象)
使用render函数处理例子中处理的是一个对象{ title: lang.testpaper_question_count, minWidth: 250, render: (h, params) => { let newArray = [] let tagColor = '' if (params.row.count !== null && params.row.count !== undefine
2020-05-29 12:33:38 1930
原创 js 对数组中的对象排序
以对象的中的age属性排序 let arr = [ { name: "小a", sex: 'female', age: 5, }, { name: "小b", sex: 'male', age: 4, }, { name: "小c", sex: 'female', age: 7, }, { name: "小d", sex: 'female', age: 1, }, ]; arr.sort((a, b) => { return a.age - b.age })
2020-05-18 17:49:04 184
原创 FormData中添加数组
let form = new FormData() form.append('id', this.propId) // this.formData.files包含多个文件的数据 this.formData.files.forEach(element => { form.append('files[]', element) })
2020-05-09 10:10:11 6173
原创 iview 动态加载Tabs时的优化
问题:动态加载Tabs时,会触发所有TabPane子组件中初始化方法。出现没必要的请求和性能的消耗组件:<template> <div style="width:300px;margin:0 auto"> <Tabs :value="tabName"> <TabPane v-for="(item,index) in tab...
2020-04-29 17:17:04 1795
原创 iview 动态删除table的某一列
code:<template> <div style="width:600px;margin:0 auto"> <Tabs value="name1" @on-click="changeTab"> <TabPane label="标签一" name="name1"> <Table :columns="c...
2020-04-29 13:53:23 1291
原创 vue中定义全局变量
1,新建constants.js 存放变量,并export default导出const test = '123' // 变量值export default { // 导出 test}2,在main.js中引入,加到Vue的原型上import Constants from './libs/constants.js'Vue.proptotype.CONSTANTS = Con...
2020-04-24 17:44:41 719
原创 js三目运算执行多个操作
加上(),用’,'隔开// eslint-disable-next-line no-unused-expressions params.row.dynamic === 1 ? (tagColor = 'success', tagText = '是') : (tagColor = 'error', tagText = '否')
2020-04-24 14:32:57 2208
原创 iview tree控件的checked属性值无法更改
tree控件的checked属性值无法更改因为与tree控件绑定的数据中 父级的checked为true,所以子级的checked的值无法改为false。需要将父级的checked也改为false
2020-04-13 09:24:22 1048
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人