- 博客(49)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 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
192
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
119
原创 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
1593
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
1205
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
259
原创 vue-quill-editor v-html内容不居中或者样式失效
只需要添加class="ql-editor" <div class="ql-editor" v-html="content">
2021-12-07 10:50:10
2142
1
原创 微信小程序中的一些记录
富文本中的图片超出解决办法temp.contentText = temp.contentText.replace('<img ', '<img style="max-width:100%;height:auto"')this.setData({ detail:temp})
2021-10-15 17:05:05
129
转载 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
172
原创 一些正则 (记录类)
数字/^[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
44
原创 定义全局自定义组件
1，mian.js中import comTip from '@/components/comTip/comTip.vue'Vue.component("comTip", comTip);2，使用<comTip />
2021-09-15 09:52:11
75
原创 高效格式化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
429
转载 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
2662
8
原创 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
6304
原创 npm install -save 与 -save-dev
package.json里有dependencies与devDependenciesdevDependencies 里面的插件用于开发环境dependencies 里面的插件用于生产环境–save-dev （-D) 安装的插件会被写入到 devDependencies 对象里面去–save (-S) 安装的插件会被写入到 dependencies 对象里面去...
2020-12-17 11:35:20
71
原创 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
2129
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
1283
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
6045
原创 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
654
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
1448
原创 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
132
原创 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
992
原创 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
936
原创 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
141
原创 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
93
原创 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
1016
原创 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
935
原创 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
695
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
582
原创 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
845
原创 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
674
原创 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
1866
原创 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
170
原创 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
6078
原创 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
1738
原创 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
1255
原创 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
682
原创 js三目运算执行多个操作
加上()，用’,'隔开// eslint-disable-next-line no-unused-expressions params.row.dynamic === 1 ? (tagColor = 'success', tagText = '是') : (tagColor = 'error', tagText = '否')
2020-04-24 14:32:57
2155
原创 iview tree控件的checked属性值无法更改
tree控件的checked属性值无法更改因为与tree控件绑定的数据中 父级的checked为true,所以子级的checked的值无法改为false。需要将父级的checked也改为false
2020-04-13 09:24:22
1006
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人