Vue
文章平均质量分 64
默默的小跟班
这个作者很懒,什么都没留下…
展开
-
【Vue】拖拽式分割布局的一个示例
示例展示代码特地写了一个demo代码,可以直接复制下来运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vu原创 2021-02-24 14:49:45 · 750 阅读 · 0 评论 -
【vue】封装带有输入推荐和语法高亮的编辑器
效果动图可以类似于代码编辑器,有语法推荐,语法高亮功能代码(含详细注释)只要是封装了微软的monaco编辑器,monaco编辑器基本就相当于网页版的vs code方便大家查找api,点击跳转链接实例上的方法、事件等monaco类上的方法、事件等<template> <div ref="refCodeEditor" key="keyCodeEditor" style="height: 100%;width: 100%;" /></template>&l原创 2021-02-23 14:43:39 · 798 阅读 · 1 评论 -
【Vue】可以自定义回显格式的日期选择控件(日月周季年)
一、组件特点基于element ui的datePicker的二次封装。两个特点:1. 回显格式可以自定义element ui的控件控制回显的属性为format,但是只能包含一个日期对象。业务需要展示为两个日期段,如:选择 一月,展示为 2020-01-01 ~ 2020-01-31。该组件采用一个假的input框通过css覆盖到原始的datePicker的input框上,然后可以自定义回显内容。2. 同一个组件支持日、月、周、季、年的切换element ui官方文档上没有季的选项但是实际原创 2021-01-15 16:14:23 · 3138 阅读 · 6 评论 -
v-for动态渲染img时src属性的处理
一、问题现象项目中需要渲染一个包含图片的列表。采用v-for循环渲染,代码简写如下: <li v-for="{ pic } in picList"> <img :src="pic" > </li>picList = [{ pic: '@/assets/images/mysql.png'}]采用了各种字符串拼接方案都不行。:src = "'@/assets/images/'+'mysql.png'":src = "'..原创 2021-01-12 13:02:45 · 1239 阅读 · 0 评论 -
element table固定表头,表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应。标签:<el-table ref="table" :data="tableData" :height="tableHeight"></el-table>vue中的ref解释第一种JS处理方式:export default { data(){ return { tableHeight: 50, tableData转载 2020-12-11 18:40:39 · 1490 阅读 · 2 评论 -
iview下拉添加全部选择功能遇到的坑
需求在iview的select下拉多选菜单下,加入一个全部选择和全部清空的功能。实现点击全部选择的时候,将当前下拉菜单下所有的item都加到select绑定的list里面问题二联下拉菜单,当一级下拉选择一个后,点击二级下拉的全部选择,再到一级下拉选择另外一个,再点击二级下拉的全部选择,此时,第一次一级下拉的内容和第二次一级下拉的内容,都会被选中。如图。一级下拉选择楼层3,二级下拉点击全选一级下拉选择楼层4,二级下拉选择全选问题出现了,此时,楼层三的内容也被选中放到了里.原创 2020-08-27 11:01:05 · 1060 阅读 · 1 评论 -
重写video标签的控制条(待更新汇总)
JS自定义多媒体Video控制条(控制视频播放、进度、全屏案例)https://blog.csdn.net/weixin_41105030/article/details/86695625?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-Blo原创 2020-08-27 10:29:39 · 1063 阅读 · 0 评论 -
【vue】使用render函数渲染table中的数据
注:公司项目,为了引起不必要麻烦,码一下,请见谅。原创 2020-08-10 14:35:51 · 8200 阅读 · 2 评论 -
【Vue】封装全局弹窗警告组件this.$message.success
先上效果图。背景有遮罩层,并且模糊,弹窗设置了最小宽度,文字超出范围,弹窗会自动扩展。写一个弹窗组件message.vue<template> <!-- 遮罩层 也是整个组件的容器--> <div class="pop-container" v-if="isShow"> <div class="message-container"> <!-- 两个icon放在一个容器中,但是只显示一个 --> <原创 2020-08-08 14:41:33 · 20678 阅读 · 2 评论 -
【vue】封装自己的button
设计图需求多种场景下的按钮,且每种场景下有三种不同状态,按钮预留size和disable选项。template部分直接写一个button,然后预留一个slot,用于在button中插入文字。绑定class,此时class的绑定有几种形式,详情见vue.js官方文档Class 与 Style 绑定:class="{active: isActive, “text-danger”: hasError}" // 变量是boolean:class="[isActive, hasError]"原创 2020-08-06 20:11:20 · 874 阅读 · 0 评论 -
【vue学习】axios 各种获取数据方式对比
https://www.jianshu.com/p/d771bbc61dab转载 2020-06-18 01:20:56 · 236 阅读 · 0 评论 -
Vue中Watch的简单应用
对于watch的用法,参考了几个微博,简单汇总一下。先上官方文档:https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A81. Watch的基本应用对于普通的变量,直接监听,两种写法 new Vue({ data:{ a1:1, a2:2, }, watch:{ // 普通的watch监听 官方写法,函数中默认传入newVal和oldVal // 监听a1这个变原创 2020-06-17 09:02:06 · 272 阅读 · 0 评论 -
Vue部分插件的使用
vue-awesome-swiperhttps://github.com/surmon-china/vue-awesome-swipernpm install --save vue-awesome-swipernpm install --save axios原创 2020-06-16 23:09:22 · 325 阅读 · 0 评论 -
WebApp开发中的rem.js
(function () { function a() { // clientWidth=width(样式中设置的)+左padding+右padding-垂直滚动条宽度。 var b = document.documentElement.clientWidth; b = b > 750 ? 750 : b; var c = b / 750 * 100; document.getElementsByTagName("html")[0].style.fontSi转载 2020-06-16 23:03:27 · 198 阅读 · 0 评论 -
Module build failed: TypeError: this.getResolve is not a function
解决npm报错:Module build failed: TypeError: this.getResolve is not a function1、sass-loader的版本过高导致的编译错误,当前最高版本是8.x,需要退回到7.3.1 运行: npm uninstall sass-loader(卸载当前版本) npm install [email protected] --save-dev2、如果上面的方法不行,或者又产生其他相关的错误,可以尝试一下在webpack.base.转载 2020-06-16 22:53:23 · 890 阅读 · 0 评论 -
从零开始配置Vue项目(WebApp)
Vue项目配置组件初始化安装全局安装 vue-clinpm install –global vue-cli创建一个基于webpack模板的新项目vue init webpack my-projectRuntime + Compiler — runtime-only (小于6kb,只能用 .vue开发)EsLint—YRouter—Y无网络环境下,离线配置环境。使用打包好的webpackTerminal进入当前用户文件夹下(如:C:\Users\82601 )mkdir原创 2020-06-16 22:45:57 · 849 阅读 · 0 评论 -
封装属于自己的Jsonp
先放上jsonp官方文档链接:https://github.com/webmodules/jsonpAPIjsonp(url, opts, fn)url (String) url to fetchopts (Object), optionalparam (String) name of the query string parameter to specify the callback (defaults to callback)timeout (Number) how lon原创 2020-06-16 22:18:57 · 172 阅读 · 0 评论 -
Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require)。如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requiredata.jsexport const recommends = [ { "pic": require('./1.png'), "name": "adidas 阿迪达斯 训练 男子", "price": "335", "num": "1" },]index原创 2020-06-16 12:38:33 · 2721 阅读 · 0 评论