Vue
文章平均质量分 68
有关Vue和element的一些插件使用
進~
前端小菜鸡
展开
-
Vue文本内容超出显示省略号,超出显示tooltip提示2.0
Vue 文字超出tooltip提示,不超出则不提示原创 2022-09-16 19:15:00 · 2238 阅读 · 3 评论 -
javascript盒子的拖拽和缩放
盒子的缩放和拖拽原创 2022-06-30 20:42:32 · 1422 阅读 · 0 评论 -
使用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 · 1156 阅读 · 0 评论 -
使用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 · 2102 阅读 · 3 评论 -
前端 页面布局汇总
盒子模型了解页面布局之前,应该要了解一下盒子模型。所有的HTML元素都可以看作一个盒子,在CSS中,“box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。盒子的整个宽高公式是盒子的宽/高 = width(content)/height(content)+ padding + border + margin盒子模型分为(W3C)标准盒模原创 2020-12-02 17:53:12 · 519 阅读 · 0 评论 -
ElementUI input输入框实现选择部分内容
项目中有个文档管理模块,重命名功能是需要选中文件名,文件后缀不能被选中。ElementUI有提供全选的方法,如果选择所有内容可直接使用该方法。如图:如果要实现选择部分内容就不能直接使用该方法。实际input给我们提供了selectionStart,selectionEnd两个属性表示选择内容的起始位置。还有一个问题就是ElementUI提供给我们的输入框实际结构是这样的这样下来问题就简单了。上代码:```javascript// Name表示文件全名(包括后缀名),Suffix代表后缀名l原创 2020-12-29 10:14:05 · 4455 阅读 · 1 评论 -
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 · 14086 阅读 · 2 评论 -
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 · 2764 阅读 · 1 评论 -
基与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 · 551 阅读 · 0 评论 -
基与Vue的emoji表情使用 --- emoji-vue的使用和bug修改
介绍最近的项目用到了表情包,咱们以前项目有用到emoji-vue。我就直接拿来用了。使用过程中真的一言难尽啊~~~~~先附上一张这个插件在Vue中使用的列子。可以清楚的看到一个比较重要的方法onInput和myText属性。没错这就是我一言难尽的地方,使用这个demo会出现两个问题这里有个在线测试地址emoji-vue在线测试接下来咱们提提这个插件两处问题,先给一张自己测试的图。问题1 我测试的时候,开始输入了文字,后面准备在文字后面添加表情,但是无论怎么搞,表情都会在前面添加2 另一个问原创 2021-05-24 19:02:24 · 2220 阅读 · 0 评论