進~-CSDN博客

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

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

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

公司有这方面的需求，以前是用的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

阿進在努力~~

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

原创 javascript盒子的拖拽和缩放

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