自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(20)
  • 收藏
  • 关注

原创 Vue文本内容超出显示省略号,超出显示tooltip提示2.0

Vue 文字超出tooltip提示,不超出则不提示

2022-09-16 19:15:00 2140 3

原创 javascript盒子的拖拽和缩放

盒子的缩放和拖拽

2022-06-30 20:42:32 1339

原创 创建uniapp空项目并引入uViewUI

公司有这方面的需求,以前是用的uview1.0,现在uview2.0出来了当然要重新整理一个空项目了。步骤创建uniapp项目(直接在HBuilder X 中创建)引入uViewUI创建uniapp项目直接创建一个空项目就行了。文件 ==> 新建 ==> 项目 ==> 默认模板引入uView插件市场找到对应插件uView2.0,点击使用HBuilder X导入插件。导入插件后,项目目录会多出uni_modules文件夹。接下来需要我们配置一些东西。具体可以看

2022-02-10 19:30:00 995

原创 uniapp文件上传(任意文件,多文件上传)

此处代码只针对APP,如果要针对全端们可以参考这个。https://ext.dcloud.net.cn/plugin?id=5459同样项目需求是这样要求可以在APP上传任意文件,没法啊,硬着头皮搞啊,插件市场找啊,哎~~没一个满足需求的。根据上个链接的启发.自己写一个,当然咱们项目是APP,所以只满足了APP端。重点讲一下几个重点把。webview: 可以了解uniapp的webview和H5+的webview(我用的H5+)webview和uniapp的通信: 如果不用通信可以不考虑这个

2021-12-31 18:00:21 18414

原创 Vue文本内容超出显示省略号,超出显示tooltip提示

项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出。文本超出显示省略号单行文本.t-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行文本.t-column-ellipsis { display: -webkit-box; -webkit-box-orient: vertical;

2021-11-26 22:30:00 12954 2

原创 基与Vue的图片裁剪vue-cropper组件的使用

项目中上传图片的宽高不统一,导致图片显示的时候出现变形的问题。故而用到了图片裁剪这个组件。代码仓库https://github.com/xyxiao001/vue-cropper实现效果下载的话用npm和yarn都可以,你喜欢就好。npm i vue-cropperyarn add vue-cropper如图,项目可以上传缩略图。点击上传图片,添加一张本地图片。裁剪框固定长宽且可移动,图片可移动且放大,缩小。点击确定,返回裁剪框内容给后台(File格式),同Element-UI的up

2021-11-03 16:47:59 504

原创 uniapp用Promise封装get和post请求

用Vue开发Web网页,请求都是都会用到axios这个库,axios支持promise。所以就打算在uniapp中封装一个返回Promise对象的get和post请求。HttpUrl 就是固定前缀和axios.defaults.baseURL一样的第三个参数正常来说应该传个header对象,但是项目需求没这么大,所以就直接传了个属性下面两个函数其实就method不一样,还可以封装一个函数传递请求的,这里我就不写了吧。//get请求import app from './main.js'cons

2021-10-15 17:41:41 1811 1

原创 使用Vite搭建Vue3.0 + TypeScript + Element-plus + VueRouter + Vuex + axios项目

最近在学习vue3.0,所以尝试自己创建项目玩玩。大多数项目都是有登录的,这就会涉及到token失效跳转回登录页,以及请求携带token。配置里面都有涉及到,可以参考。安装vite环境npm init @vitejs/app 或者 yarn create @vitejs/app创建vue3.0 + tsnpm init vite 或者 yarn create vite之后会填写项目名称,选择vue和ts。如图:下载Element-plus和使用根据element-plus文档可以快速入

2021-08-27 09:06:20 1114

原创 使用Vue导出word(纯前端,异步处理图片)

项目需要导出word,于是乎又是查阅资料。然后自己写。参考链接https://github.com/evilc0des/docxtemplater-image-module-freehttps://www.jianshu.com/p/b3622d6f8d98Vue导出Word配置word模板新建一个word文档,名字随便取只要对应就好,我创建的是一个template.docx。下面是我的配置,简单解释一下:1. {#wordList}包裹一个循环对象{/wordList}2. 对象中有se

2021-08-27 09:04:51 2030 3

原创 基与Vue的emoji表情使用 --- emoji-vue的使用和bug修改

介绍最近的项目用到了表情包,咱们以前项目有用到emoji-vue。我就直接拿来用了。使用过程中真的一言难尽啊~~~~~先附上一张这个插件在Vue中使用的列子。可以清楚的看到一个比较重要的方法onInput和myText属性。没错这就是我一言难尽的地方,使用这个demo会出现两个问题这里有个在线测试地址emoji-vue在线测试接下来咱们提提这个插件两处问题,先给一张自己测试的图。问题1 我测试的时候,开始输入了文字,后面准备在文字后面添加表情,但是无论怎么搞,表情都会在前面添加2 另一个问

2021-05-24 19:02:24 2145

原创 ElementUI环形进度条设置渐变色

最近项目中写到圆环进度条,element-ui并没有提供渐变色的。于是就查阅资料。步骤实现效果如图所示是实现的效果:普通圆环进度条普通效果实际就是复制粘贴element-ui中的案列<el-progress type="circle" class="yellow" :percentage="25" :width="82" :stroke-width='9'></el-progress>渐变圆环进度条原理通过查看目标元素可知elemnt-ui中绘制圆环进度条是通过

2021-04-20 23:39:08 2694 1

原创 uni-app上传图片(选择,预览,删除图片)

用uni-app做项目时,上传图片的功能需求应该是在正常不过的了。最近有几个项目都有遇到,所以想总结一下。所用到的api都很简单。功能需求功能需求如列表所示,视图展现如图所示,代码如下。点击相框按钮可选择图片上传,点击每一个图片可以进行预览,点击每个图片删除图标可删除对应图片。本地相册选择图片或使用相机拍照上可以预览选择上传的图片删除选错或不选的图片<!--出错了就自己写,不知道复制粘贴对没有--><view>图片上传</view><vie

2021-03-09 19:06:40 8600 4

原创 ElementUI input输入框实现选择部分内容

项目中有个文档管理模块,重命名功能是需要选中文件名,文件后缀不能被选中。ElementUI有提供全选的方法,如果选择所有内容可直接使用该方法。如图:如果要实现选择部分内容就不能直接使用该方法。实际input给我们提供了selectionStart,selectionEnd两个属性表示选择内容的起始位置。还有一个问题就是ElementUI提供给我们的输入框实际结构是这样的这样下来问题就简单了。上代码:```javascript// Name表示文件全名(包括后缀名),Suffix代表后缀名l

2020-12-29 10:14:05 4362 1

原创 uniapp IndexedList索引列表添加搜索框

最近做uniapp项目时,用到了IndexedList索引列表这个组件,但是需要添加一个搜索功能,于是呢我就尝试着在组件上面自己改一下。下面我就简单介绍一下:所需组件其实也就是两个,首先是indexedLIst索引组件,其次就是搜索框组件了,如果你不显麻烦,搜索框组件你可以自己写。这里我用的searchBar搜索栏组件。步骤1. 下载两个组件。最主要是在uni-indexed-list.vue页面中添加搜索框,记得先引入啊。如图所示。import uniSearchBar from '@/co

2020-12-10 17:26:00 4938 2

原创 前端 页面布局汇总

盒子模型了解页面布局之前,应该要了解一下盒子模型。所有的HTML元素都可以看作一个盒子,在CSS中,“box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。盒子的整个宽高公式是盒子的宽/高 = width(content)/height(content)+ padding + border + margin盒子模型分为(W3C)标准盒模

2020-12-02 17:53:12 498

原创 uniapp 图片缓存

思路:最近遇到项目图片很多导致加载数据很慢,所以想到了缓存图片到本地,然后直接加载本地的图片。具体思路大概就是首先加载本地图片,如果本地图片不存在image组件会调用error事件,error事件中处理两件事。把路径修改为服务器地址的路径将图片保存到本地讲解之前需要了解一下后台返回的图片地址,如图所示。这里我都是直接修改的返回后的Attachment属性。最主要的就是多张图片的路径使用了逗号隔开。三种路径的文件名(形如 2781c620-af5e-4293-b73d-f254e989b9f2.j

2020-09-23 17:31:45 7973 2

原创 中文汉字按拼音排序并按字母分类(uniapp indexedList索引列表格式匹配)

最近做uni-app项目,遇到中文排序,使用indexedList组件布局渲染。自己也是查询了很多资料,https://www.cnblogs.com/wteng/p/5658972.html展现了一种方法。但是自己测试怎么也不对,不知道是不是环境问题或者是自己代码写错了。代码如下所示interface Curr { letter: string, data: string[]}function pySegSort(arr: string[]): any[] { let letters:

2020-08-11 14:44:55 3264 1

原创 el-tree未完全勾选子节点,但父节点存在则子节点全部勾选问题

我从后台获取默认勾选的节点(包括父节点和子节点)。子节点未全部勾选,但获取数据中只要存在父节点,则子节点就会被渲染。开始使用如下代码进行渲染,出现了问题。后来改为如下代码,问题呗解决了。...

2020-07-24 18:13:07 925

原创 获取发布的SHA1和PackageName

我们进入高德开饭平台的控制台后创建新应用,在新应用李点击添加按钮。会弹出如下提示框。此时的需要填写SHA1和PackageName,可根据以下链接进行填写。https://ask.dcloud.net.cn/article/35777...

2020-05-08 15:44:57 939

原创 highcharts柱状图颜色渐变

其中this.chart中的数据需要自己定义,类似与legend,credits,Axis,series等。initChart() { var colors = [ ["#01D2F0", "#02A6D0", "#053F6A", "#081422"], ["#17F8EC", "#14D1CA", "#0C5C60", "#09232B"], ...

2019-12-31 10:59:01 1447

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除