- 博客(65)
- 收藏
- 关注
RSS订阅原创 项目需求- 实现左右俩栏的表格数据
spanCol24 数组存放需要单独展示一行的变量名。objMap 渲染的循环的key-'字段名字'objSort 对显示循序进行排序。如图： 实现下面数据。
2023-04-16 10:37:53
219
1
原创 ts的一些用法
字面量类型，是来约束取值的，取值只能取定义的值增中的某一个，联合类型，是来约束类型的，取值可以为多种类型中的一种。2.联合类型 ｜ --- 定义变量的类型可以为多种类型中的一种。4.Pick ->摘取某项 K extends keyof T。3.字面量类型 --- 定义的变量只能是类型中的某个值。5.Record ->定义key,value 类型。1.交叉类型 & ---多个类型属性的集合。1.Partial ->可选类型。3.Readonly ->只读的。2.Required ->必选。
2023-03-30 11:19:01
696
原创 升级Node版本
注意：下述命令如果提示没有权或是运行在mac，请在命令的前边加上sudo1.第一步清楚node缓存npm cache clean -f2.第二步：安装n模块（n模块是管理nodejs的版本的）npm install -g n3.第三步：升级node.js到最新稳定版：n stable4. 查看node版本（node -v) /查看node安装路径 (which node)...
2022-05-11 16:58:35
33234
9
原创 ts学习第一章
1.开发环境如果你已经安装了Node. .js ,可以使用node -v npm -v检查node/npm安装版本2.全局安装 typeScriptnpm install typescript -g// 注意苹果电脑需要npm 前加sudosudo npm install typescript -g3.建立项目目录和编译 TS 文件建一个空文件夹（tsDome) ，在该目录下建一个index-01.tsfunction ceshi(){ let str: stri..
2022-05-01 23:06:08
907
原创 vue3自定义hook函数
什么是hook函数?本质就是一个函数，把setup函数中使用的Composition API进行封装类似于vue2中minxi自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。创建一个hook文件夹，里面创建文件usePoint.jsimport { onMounted , reactive, onBeforeUnmount} from 'vue';export default function(){ let point = reactive({
2022-04-25 15:46:11
1139
原创 uni-app上传图片和文件
gen如图所示：上传图片,使用的是uni.chooseImage这个官方api，count 数量根据自己的需求来，我们是最多只能上传9张 uploadImgEvent(){ uni.chooseImage({ count: 10 - this.uploadImgsList.length, success: (res) => { this.uploadImgsList.unshift(...res.te..
2021-08-05 14:04:37
8349
4
原创 根据不同的后缀名显示不同的图片
因项目需求，需要根据不同的后缀名显示不同的图片（如果是jpg,png,jpeg等就显示正常的图片地址，如果是word,pdf 就显示对应的图标，前提这些word,pdf等图片在image里存在)需要先获取后缀名，根据后缀名来判断 //获取文件后缀 let fIndex = url.lastIndexOf("."); let type = url.substr(fIndex+1);自己定义函数来判端类型 isImage(type){ return
2021-06-17 15:40:45
795
原创 项目中遇到的问题（uni-app)
1.当文字超过一行显示省略号和下拉箭头（ 之前是通过css 来控制的，发现并不好使，就改用函数）图一是正常，不超过一行显示的，图二是超过，也就是想要的效果，图三是点击箭头显示全部，主要是通过字数来控制的 <text v-if="key == 'isShow">{{ellipsisText(info)}}</text> <text v-else class="inline">{{info}}</text> <text v-i
2021-05-27 10:15:09
256
原创 树型数据结构化处理
有时候后台返回的数据需要自己处理，例：如下数据， let data = [{ id: 1, title: '飞蛾扑火', pid: 0 }, { id: 2, title: '你就像一只扑火的飞蛾', pid: 1 }, { id: 3, titl
2021-01-14 11:16:54
326
原创 vue3项目小demo练习
vue3 出来了，学和用要结合起来，我就做了个小demo,此中用到了watch,computed,toRefs等新特性。如图：点击下部的tab导航，对应的顶部内容切换思路：由于顶部导航的内容是不确定的，所以使用slot插槽，将导航的内容做为一个变量（headerTitle)存在vuex的state中，通过mutations根据路由名的变化来更改state中的headerTitle核心内容：1.获取路由import {useRouter} from 'vue-router'cons
2020-11-27 11:27:42
4882
1
原创 vue移动端项目打包成App
将vue移动端项目，打包成App，方便手机更真实查看效果思路： 1.vue项目正常打包生成dist文件夹 2.使用HBuilderX编辑器创建一个 5+App项目3.创建完成如下4.将vue项目打包的文件与这里的相同的文件覆盖掉 ，完成之后，打开manifest.json，进行基础的配置 ，包括版本 ， 名称图标等配置注：一定要先获取AppID5.右击项目->发行->原生app云打包 ,如图：ios打包需要上传公有证书...
2020-11-25 15:32:20
2824
原创 父子组件传参
1.props 这个和之前的vue2基本一样2.provide 父组件向子组件传参 inject 子组件接受父组件传来的参数 *这两个函数只能在 setup() 函数中使用，不限层级1.父组件中需要先正常引入子组件import About from "../views/About"2.父组件引入provideimport { defineComponent, provide } from "vue";3.和vue2一样注册子组件(在setup函数...
2020-11-18 10:40:17
2775
原创 vue3新特性computed,watch,watchEffect函数用法
使用computed和watch, 一定记得先引入import { reactive , computed,toRefs,watch} from "vue";computed属性使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式ref对象。如图所示，案例： <p>原来值:{{ count }}</p> <p>计算属性更改的值:{{ twoNumber }}</p>//引用ref函..
2020-11-17 15:36:38
2797
原创 vue3新特性中的setup(),ref(),reactive()函数
setup()函数的用法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑写在setup 里就可以ref() 函数用法，是更新简单的变量reactive()函数用法，更新复杂类型的变化(数组/对象)注：return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴漏的变量和方法案例 删除某个数据如图:template <ul v-for="(item,index) in studentList.list" :key="i...
2020-11-12 14:03:08
2921
2
原创 Node版本与npm 版本不一致，安装中报错
我是安装了最新版本的node ,但是用npm安装别的插件时，报不支持node版本错误，如下图：由于npm存在缓存的原因导致的在C盘找到C:\Users\Administrator\AppData\Roaming路径删除npm 和npm-cache 在重新安装node即可...
2020-11-03 16:55:00
2602
4
原创 vue--自定义tabbar组件
项目中底部导航经常使用，为了方便可维护，下次使用直接拿过来使用，封装了一个简单的底部导航栏（自定义TabBar组件）实现思路：1.TabBar中显示的内容由外界来定义 使用flex布局平铺TabBar2.自定义TabBarItem,可以上穿文字图片等（案例中只上穿了文字，图片后面会讲）1.定义TabBarItem,并定义插槽：文字2.给插槽外层包裹div,用于设置样式3.填充插槽，实现底部TabBar效果效果如图：在components下建个单独的文件...
2020-10-16 17:40:40
938
原创 React Hooks --- useContext父子组件传参
1.引用createContext,useContextimport React,{createContext,useContext} from 'react';2. 创建个变量接受一下createContext，例：const ageContext = createContext();3.在父组件中定义要传递的值(value变量)，一定要使用.Provider,ageContext是前面设置的变量<ageContext.Provider value={age}>
2020-09-29 15:31:32
1011
原创 Redux学习
先安装reduxnpm install redux具体学习步骤可以看技术胖博客里面有视频有文字，都很详细https://www.jspang.com/detailed?id=48#toc218
2020-09-25 16:49:33
97
原创 安装React调试工具
1.先去git上下载react-devtools文件到本地，https://github.com/facebook/react-devtools/tree/v32.进去下载下来的文件夹3。npm依赖安装npm --registry https://registry.npm.taobao.org install4.安装依赖成功后，在可以打包一份扩展程序（如下图）npm run build:extension:chrome ...
2020-09-24 11:42:27
145
原创 Echarts可视化图表常用案例5
接着上一篇图例https://blog.csdn.net/weixin_43650973/article/details/107978376参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM(模拟飞机航线)实现步骤:-需要下载china.js提供中国地图的js文件-使用社区提供的配置即可。修改地图省份背景 areaColor里面做修改,地图放大通过zoom geo: { ...
2020-08-13 15:16:25
642
原创 Echarts可视化图表常用案例4
接着上个案例https://blog.csdn.net/weixin_43650973/article/details/107974111图例组件展现了不同系列的标记大小legend: { itemWidth: 10, itemHeight: 10, }修改图例的文字标签 // 图形的文字标签 label: { fontSize: 10 },修改饼形图的大小 series: [
2020-08-13 14:18:48
291
原创 Echarts可视化图表常用案例3
接着上一个案列https://blog.csdn.net/weixin_43650973/article/details/107955962改变图例组件展现了不同系列的标记颜色（legend) legend: { textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } }修改y轴分割线的颜色 yAxis: [ { //...
2020-08-13 10:48:27
257
原创 Echarts可视化图表常用案例2
接者上一个案列https://blog.csdn.net/weixin_43650973/article/details/107938917改变线条颜色color: ["#00f2f1", "#ed3f35"]修改图表组件文字颜色legend: { textStyle: { color: "#4c9bfd" } },显示边框，改变图表大小，通过改变grid来控制 grid: { top: "20%", l.
2020-08-12 14:11:55
247
原创 Echarts可视化图表常用案例1
由于现在应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。官方地址https://echarts.apache.org/zh/index.html如图所示 一种图表该图表是将x轴影藏了配置的时候将show设置为false即可 xAxis: { show: false //不显示x轴 }两列y轴数据，所有yAxis是个数组格式 yAxis: [{
2020-08-11 16:59:03
528
原创 vue实现简单购物车功能
简单的示例图如下主要是全选，取消全选，单选，商品的数量的+1，-1进行这些操作时，商品总价格是不断变化的（用的vant-ui插件https://youzan.github.io/vant/#/zh-CN/）<template> <div class="home"> <ul> <li v-for="(item,index) in cartList" :key="item.id"> <van-ch..
2020-08-10 13:54:07
3305
转载 vue分享至qq空间，新浪微博，微信朋友圈及微信好友
具体博客链接https://blog.csdn.net/weixin_44868881/article/details/100924143
2020-07-10 18:02:58
778
原创 vue中input输入框有时候 修改不了和分页绑定了current-page但页码并没有变
1.input输入框有时候 修改不了由于视图并没有更新，导致的 <el-form-item label="物流名称" label-width="100px" prop="company"> <el-input v-model="formAddress.company" @input="changeInput" clearable placeholder="请输入物流公司信息..."></el-input> </el-fo
2020-06-23 15:24:58
827
原创 vue中使用vant移动端开发，indexBar 进行城市选择列表
1.按需引入组件，在 babel.config.js 中配置https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jianmodule.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: tru
2020-06-22 17:16:38
4306
1
原创 vue+elementui项目总结
1.为了方便项目的维护，将所有的接口都封装到一个文件中,在view下新建个api文件夹，包含http.js（封装请求）api.js（封装各个接口）http.jsimport axios from 'axios'axios.defaults.baseURL ='';const http = axios.create({ timeout: 300 * 1000, headers: { 'Cache-Control': 'no-cache' }});//http request 拦截
2020-06-09 09:59:50
2721
转载 网页性能管理
转载一篇阮一峰老师的网页性能管理介绍http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
2020-05-14 15:08:24
650
原创 vue中使用elementui中的NavMenu使用v-for循环实现
之前就是直接按照官网https://element.eleme.io/#/zh-CN/component/menu案例来写，显的代码十分的冗杂，就想这直接循环实现，不用引用多个el-menu-item,如图：主要思路是，运用了components动态组件（https://cn.vuejs.org/v2/guide/components-dynamic-async.html）来根据是否有二级菜单来判断，如果有改动态组件就使用is切换成el-submenu，否则切换成el-menu-item，核心代
2020-05-09 14:45:25
6908
1
原创 cmd命令行输入vue ui进行创建项目
1.cmd命令行输入vue ui就会打开创建项目的链接（如图）2.点击创建项目一下操作3.选择手动添加配置4.下一步选择配置，创建项目，下一步就完成了以上项目就创建完成了，可以去对应目录下找到相应的文件夹...
2020-04-29 11:40:35
2246
转载 文本溢出截断省略
我就不介绍了，转载了一遍很详细的https://blog.csdn.net/bbsyi/article/details/102928638
2020-04-17 17:12:31
147
原创 vue中分页数据实现第二页的索引是接着前一个页的索引累加的
产品测试的bug发现分页第二页的时候，索引应该是接着第一页的继续累加的，而不是从1开始，正确应该是21开始的，如图所示问题这个时候想要的是实时翻页修改index值 <el-table-column type="index" :index="indexMethod" :resizable="fal...
2020-03-25 09:41:10
1825
原创 解决window下Vscode下无法加载文件，在此系统上禁止运行脚本"报错，在cmd下运行正常
错误如图所示：这是因为PowerShell执行策略的问题解决办法以管理员身份运行vscode;执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的;执行：set-ExecutionPolicy RemoteSigned;这时再执行get-ExecutionPolicy，就显示RemoteSigned;在执行查看vuecli版本即...
2020-03-17 16:38:09
778
原创 从SVN上拉项目遇到的错误
错误如图所示：解决办法：先解锁在文件里右击checkout的文件->tortoiseSVN->Cleanup勾选然后在右击checkout的文件->SVN Update即下载正常
2020-03-17 15:58:44
469
原创 vue + elementUi实现可编辑表格数据
由于项目需求 需要表格的内容可以进行修改思路：当点击修改的时候切换到input输入框，否则就是文本如图:先定义一个变量用来控制span和input的显示隐藏，由于点击编辑只修改当行数据，所以用index索引来控制代码如下：<template> <div class="Sidebar"> <el-table :data="ta...
2020-03-16 11:19:46
4155
4
原创 高德地图如何创建一个key
1.注册一个高德账号（如何一直显示该手机号已被注册 可以去注册页面 使用短信登录进入）2.登陆之后，在进入「应用管理」 页面「创建新应用」如下是创建好的一个案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n...
2019-11-19 11:40:46
721
原创 vue项目开发中遇到的问题
1.打包上线的时候，发现自己写得覆盖原生elementUI样式没起作用，需要将App引入到element-ui样式下面，在重新打包就好了2.当需要像数组对象中添加新的属性时，可以使用map that.albums = that.albums.map((item,index)=>{ return Object.assign(item,{isChecked...
2019-08-28 14:32:08
416
原创 vue中引用富文本插件
1.tinymce插件先下载npm install @tinymce/tinymce-vue -S npm install tinymce@4.5.10 -S下载完成了之后，在node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到static目录下在components文件夹里新建一个EditorTinymce....
2019-08-13 15:15:34
6381
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人