![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
可爱小仙子
做前端的可爱小仙子
展开
-
不同域名共享cookie
不同域名共享cookie原创 2023-01-17 14:24:07 · 340 阅读 · 1 评论 -
vue动态加载组件,解决v-html渲染组件失效问题
v-html渲染组件会失效,因为v-html只支持html标签。这时候就需要动态渲染组件的时候就使用不了v-html了。原创 2023-01-14 11:58:18 · 3459 阅读 · 0 评论 -
vue3使用vue-pdf-embed预览文件流格式的pdf文件
安装vue-pdf-embed,'data:application/pdf;base64,' + 接口获取的文件流;原创 2022-12-21 17:49:47 · 5019 阅读 · 6 评论 -
ant-Design-vue提交按钮放在表单外提交,自定义提交按钮
按钮在form标签外提交表单原创 2022-08-23 10:09:22 · 1956 阅读 · 0 评论 -
ant-design国际化扩展新语言
ant-design国际化扩展新语言(缅甸语)原创 2022-08-22 17:13:35 · 1107 阅读 · 0 评论 -
vue 引入Antd is not defined
vue引入ant design vue报错Uncaught ReferenceError: Antd is not defined原创 2022-08-10 17:05:57 · 1297 阅读 · 2 评论 -
因为v-if导致ref失效设置this.$nextTick()也无效。
v-if导致ref失效设置this.$nextTick()也无效。将v-if改为v-show原创 2022-07-28 16:20:43 · 2055 阅读 · 1 评论 -
mouted无法初始化style样式问题
this.$nextTick(() => { })样式加载完成之后原创 2022-07-20 15:45:54 · 187 阅读 · 0 评论 -
element-plus输入框显示图标
先安装icon# NPM$ npm install @element-plus/icons-vue# Yarn$ yarn add @element-plus/icons-vue# pnpm$ pnpm install @element-plus/icons-vue<template> <div class="page"> <!--标题--> <lstitle title="基础设置" enTitle="Instal...原创 2022-02-17 14:44:44 · 2957 阅读 · 2 评论 -
node获取当前域名,ip地址
var os = require('os'); var ifaces = os.networkInterfaces(); let locatIp = ''; for (let dev in ifaces) { if (dev === '本地连接') { for (let j = 0; j < ifaces[dev].length; j++) { if (ifaces[dev][j].family === .原创 2022-02-14 11:21:16 · 3202 阅读 · 0 评论 -
js将数组中重复项合并,其中不同数据拼接
* 合并 */ merge(arr) { var arrres = arr.concat(); var tempArr = []; var dealAfterArrres = []; for (let i = 0; i < arrres.length; i++) { var orderId = arrres[i].orderId; //如果orderId不存在tempArr中 if (..原创 2022-02-11 11:18:17 · 819 阅读 · 0 评论 -
搭建vuecli4+vue3+element-plus
目前是vue2,接下来我要换成vue3,并且搭建vue3项目。前提条件需要node版本大于8.9 版本。我的是10。一、先卸载vue-cli2。npm uninstall vue-cli -g二、安装@vue/cli也就是vue3。cnpm比npm快一点 cnpm install -g @vue/cli三、到需要放置的目录输入cmd,创建项目vue create 项目名四、启动项目npm run serve完成!...原创 2022-02-07 15:02:31 · 777 阅读 · 0 评论 -
去除elementUI表格鼠标移入背景色
html部分<div class="group"> <el-table></el-table></div>//css部分<style>.group > .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: white !important;}</style>原创 2021-12-20 17:07:18 · 1708 阅读 · 0 评论 -
vue和nuxt项目引入多个script
因为vue是单页面,一个页面只能拥有一个script标签。不过我们可以使用引入组件的方式引入多个script。通过components引入组件,把script内容写在组件的script标签中,达到使用多个script标签的目的! <tutorial></tutorial><script>import tutorial from '../components/Tutorial.vue'export default { comp...原创 2021-12-11 11:57:49 · 2641 阅读 · 0 评论 -
vue+element实现表格全选所有
<el-table :data="userList" highlight-current-row :header-cell-style="{ background: '#F9F9FB', color: '#555' }" style="width: 100%; border: solid 1px #f2f6fc" ref="mListTable" :row-key="r...原创 2021-09-30 15:16:45 · 2133 阅读 · 1 评论 -
vue中v-for绑定数组,当数组变化时页面数据不更新,:class和:style失效的原因
问题:点击事件里改变了数组内容,但是:class和:style没有监听到样式,从而页面样式没有一同改变。原因:根据vue的官方文档说明:Vue 包含一组观察数组的变异方法,所以它们将会触发视图更新。这些方法如下:push()pop()shift()unshift()splice()sort()reverse()splice 替换写法array.splice(index,n,data1,data2,......);参数index:需要替换的元素的...原创 2021-09-07 15:17:21 · 2373 阅读 · 0 评论 -
element表格相同行合并
先上效果图: /** * 合并父级行 */ objectSpanMethod({ row, column, rowIndex, columnIndex }) { const dataProvider = this.tableData; if (columnIndex === 0) { // 上一条数据 const prevRow = dataProvider[rowIndex - 1]; //.原创 2021-09-04 16:38:47 · 393 阅读 · 0 评论 -
vue、小程序都适用的回调函数,用于处理异步请求
/***获取实时定位短信数量*/getMesCount(obj){letparam={mo:storageData.getMo(),cmid:storageData.getCustomerData().cmid,csid:storageData.getCustomerData().csid,vs:storageData.getCustomerData().vs}...原创 2021-06-11 10:55:05 · 287 阅读 · 0 评论 -
好评动画效果网站
https://cssfx.lovejade.cn/https://codepen.io/topic/vue/templateshttp://www.html580.com/tool/css3maker/animation.php原创 2021-01-08 14:58:56 · 135 阅读 · 0 评论 -
vue 跳转 同一路由不刷新问题
解决办法两个方法,推荐用第二种:方法一:用watchwatch{ '$router': function(to, from){ ...... }}1 2 3 4 5方法二:在router-view标签上加":key"<router-view :key="$router.currentRoute.fullPath"/><!-- 或者下面这个,$route是当前正在跳转的路由 --><router-view :key="$route.原创 2020-11-14 17:11:05 · 254 阅读 · 0 评论 -
vue实现定时刷新功能
先看效果图,实现监控30秒刷新一次代码如下:/***定时器*/sleepTime(){this.userList=setInterval(this.getSleepList,30000);}},mounted(){this.role=this.PRO_SESSION_DATA.rolethis.sys...原创 2020-10-30 17:07:00 · 1863 阅读 · 0 评论 -
element时间选择器(TimePicker )数据回显
效果图:首先将timePicker绑定值的格式转换成你要显示的格式,让你要回显的值和timePicker绑定值的格式保持一致就可以回显,否则是不能回显的,我这里得到的数据格式是时分秒(HH:mm:ss),所以我给timePicker绑定值的格式也设置为HH:mm:ss(value-format="HH:mm:ss")保持一致就可以回显了!...原创 2020-10-30 09:47:16 · 7717 阅读 · 3 评论 -
js实现数组分页效果(vue+elementui)
先看效果图重要的是这个js方法//js分页数组pagination(pageNo,pageSize,array){varoffset=(pageNo-1)*pageSize;return(offset+pageSize>=array.length)?array.slice(offset,array.length):array.slice(offset,offset+pageSi...原创 2020-09-28 11:05:48 · 811 阅读 · 0 评论 -
前端不同分辨率兼容,等比例放大与缩小
//根据屏幕大小缩放if(window.screen.width<='1366'){document.write('<bodystyle="zoom:75%">');}vue项目可以在main.js中编写,也可在APP.vue中编写这段代码。自己设定屏幕大小区间,在什么范围就放大或缩小什么比例这样在大部分类型的屏幕分辨率下都不会让页面效果有很大变化,都能保持美观。...原创 2020-09-27 10:26:34 · 3219 阅读 · 0 评论 -
css背景颜色实现透明,利用rgba
rgba(0,0,0,0)就可以是背景色完全透明效果图如下:原创 2020-09-16 14:45:20 · 1989 阅读 · 0 评论 -
el-menu-item hover鼠标移入背景色
像这种鼠标移入背景色很突兀,我想换一种。就要找到这两个类名的hover事件添加一下背景色就ok了//父级的类名.el-submenu__title:hover{ background-color:rgb(3,19,33)!important;}//子级的类名.el-menu-item:hover{background-color:rgb(3,19,33)!important;}最后效果:...原创 2020-09-16 10:44:06 · 14569 阅读 · 3 评论 -
div水平居中
display:flex;align-items:center;justify-content:center;"原创 2020-09-15 16:39:29 · 127 阅读 · 0 评论 -
vue使用ueditor百度编辑器报错,Uncaught ReferenceError: ZeroClipboard is not defined
昨天这问题十足看了一下午,看了很多百度上的解决方法都没有用,什么改配置,改ZeroClipboard源码,都没有效果,我在自己本地是可以正常使用富文本,但是发布线上就报出这个问题。首先看看抛出来的问题,发现我得静态资源路径不对,少了一级,正确的应该是http://test.jkez.net:8082/news/static/ueditor/themes/default/css/ueditor.css所以就判定是路径原因,配置路径有两个地方需要检查一个是:ueditor.config.js..原创 2020-09-05 09:42:34 · 3394 阅读 · 3 评论 -
数组转字符串,字符串转数组,数组转json字符串
数组转字符串arry.toString()arry.join(",")数组转json字符串JSON.stringify(dataArr);字符串转数组string1.split(",")原创 2020-08-25 15:27:33 · 177 阅读 · 0 评论 -
创建vue项目(vue+elementUI+vuex+vue-router+axios)vue全家桶
1、先在你要放项目的地方创建一个文件夹2、点进入文件夹输入cmd3、在黑窗口先检查是否有环境,查看node环境:node-v,查看vue-cli:vue-V或者vue-list有版本号出来就证明已经存在无需安装没有的话就先下载node.js安装然后使用淘宝NPM镜像$ npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli,命令:cnpm install vue-cli -g...原创 2020-08-12 11:02:05 · 1790 阅读 · 0 评论 -
vue的form表单输入框输入不了内容
是因为你可能在赋值之前给被赋值的对象转换了数据,得给赋值得对象转换数据然后赋值给被赋值的对象就行了原创 2020-07-31 10:25:24 · 2554 阅读 · 5 评论 -
异步导致奇奇怪怪的问题
最近遇到了一个很奇怪的bug,点击下载的图片与名称顺序被打乱了经过调试排查,发现在这个功能所用到的打包工具,打包是需要一定时间,同时它并没有回调,导致异步执行了,使得顺序被打乱然后我就是使用了延迟处理的方法让它先给执行打包了,再来执行我的下一步代码,不过这只是偏门技巧,但还是可以解决这么个问题。...原创 2020-07-27 15:45:57 · 157 阅读 · 0 评论 -
element输入框限制内容为整数
oninput="value=value.replace(/[^\d]/g,'')"原创 2020-07-22 14:56:14 · 1575 阅读 · 0 评论 -
div从上到下从左到右自动换行显示排列
先看效果图:.box{//外部的div盒子 display: flex;//先设置div里的内容显示同一行 justify-content: flex-start;//左右布局 flex-wrap: wrap;//换行 align-content: flex-start;//紧揍排列}.child1 ,.child2{//div里的内容块 width: 100px; height: 100px;}...原创 2020-06-10 15:58:03 · 4383 阅读 · 4 评论 -
解决vue引入组件报错,和调用组件步骤及封装步骤
这里调用了组件然后报错Unknown custom element: <myAddress> - did you register the component correctly? For recursive components, make sure to provide the "name" option.讲的是调用<myAddress>组件找不到,那么就是我引入组件的地方有问题。那就去看看的确是有问题,因为引入组件不能用{},把它去掉就行了。接下来说一下,如何调原创 2020-06-10 12:05:49 · 2587 阅读 · 0 评论 -
vue elementUI 高德地图接口实现省市区街道四级联动
先看看效果图:这里我使用的是直接get方式去高德去接口数据的方式,所以不需要在vue安装任何东西。这里不要使用代理跨域,直接把高德地址放上去就行了,key是高德注册的key,后面的参数是用来传递subdistrict(显示的级数)keywords(按地区名称查询)。HTML这一块需要注意的事街道这里的可以,因为高德街道这一块的adcode是重复的,所以这里不能讲adcode设置为key了,不然会报错key值重复。data中定义变量:初始化省数据:监听省的下拉框:原创 2020-06-09 15:39:22 · 3316 阅读 · 0 评论 -
vue框架跨域问题
这里我是试用了代理方式在config包下的index.js中配置proxyTableapi文件接口以自己配置的/api开头请求的接口会转成自己的地址是正常的也就相当于后端的域名原创 2020-05-13 10:49:46 · 334 阅读 · 0 评论 -
vue+elementUI实现图片上传不显示添加按钮
先上效果图:HTML代码:<divclass="grid-contentbg-purple"style="text-align:center;"><el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card"...原创 2020-05-13 10:38:18 · 2070 阅读 · 0 评论 -
vue+vue-area-linkage实现省市区街道四级联动
先上效果图首先安装 npm install --save vue-area-linkage在main.js上进行依赖注入,如下图所示:import{pcaa}from'area-data-vue';import'area-linkage-vue/dist/index.css';importAreaLinkageVuefrom'area-linkage-vue';Vue.prototype.$pcaa=pcaa;Vue.use(AreaLinkage...原创 2020-05-13 10:29:34 · 1470 阅读 · 3 评论 -
vue实现动态时间刷新,年月日时分
先上效果图HTML代码js代码指定格式实现动态刷新就OK了,想要什么样的时间格式,可以自行更改!原创 2020-05-13 10:17:31 · 1294 阅读 · 0 评论