萌萌哒小可爱啦-CSDN博客

原创 Navigating to current location (“/path“) is not allowed

Vue路由跳转报错Navigating to current location ("/path") is not allowed解决方法this.$router.replace('/path').catch(error => error)

2022-03-25 15:25:36 254

原创 js文件下载功能（Blob文件流）

举例的是excel文件的下载整理了一些常用文件MIME类型。

2021-12-22 15:05:05 2186 1

我使用的是ant design Vue 的a-input组件，页面首次加载会自动填充用户名和密码框，有时不太方便添加autocomplete="new-password"就解决了这个问题<a-form-item label="用户账号"> <a-input autocomplete="new-password" v-decorator="[ 'username']"/></a-form-item><a-form-item label="登录密码">

2021-11-10 15:35:34 2213

原创 js点击按钮复制值到剪贴板中

js调用剪贴板效果如下：打开系统剪贴板，可以看到刚刚复制的内容代码如下：<button @click='linkUrl(item)'>点击复制</button>linkUrl(item){ let url = item.url;//拿到想要复制的值 let copyInput = document.createElement('input');//创建input元素 document.body.appendChild(copyInput);//向页面底部追加

2021-11-06 10:32:35 2599

原创 Text color plugin is now built in to the core editor...报错

在使用 tinymce 编辑器时浏览器控制台警告信息Text color plugin is now built in to the core editor, please remove it from your editor configurationContext menu plugin is now built in to the core editor, please remove it from your editor configuration将对应的插件在plugins配置中删除即可

2021-10-28 11:32:52 1030

原创 Vue无限滚动表格vue-seamless-scroll(带表头)

实现效果安装vue-seamless-scroll插件安装yarn add vue-seamless-scroll --save或者 npm install vue-seamless-scroll --save在main.js文件中引入import scroll from 'vue-seamless-scroll'Vue.use(scroll)任意项目文件中使用<template> <div> <table> &

2021-09-13 14:38:49 3024 2

原创 Vue兄弟组件通信

通过父组件传值父组件father.vue中，brother与sister为兄弟组件<template> <brother ref="brother" :brotherSaid="brotherSaid" @brotherCallback="brotherCallback($event)"></brother> <sister ref="sister" :sisterSaid="sisterSaid" @sisterCallback="sisterCall.

2021-09-03 09:55:53 231

原创 Vue中父子组件通信

子组件触发父组件方法在子组件children.vue中，通过this.$emit来触发父组件father.vue的事件methods: { children(){ this.$emit("ok"); //父组件的事件名称 }}父组件father.vue中，当ok事件被触发则会执行父组件中的father方法<template> <children @ok="father"></children></template><scri.

2021-08-25 20:53:14 757 3

原创 css实现左上角飘带效果

css实现左上角飘带效果效果如下：html代码<div class='wrap'> <div class='ribbon'> <span>测试1</span> </div></div>css代码.wrap { /* 最外层的div容器 */ min-width: 200px; min-height: 200px; text-align: center;

2021-07-29 15:33:55 621

原创 js中使用filter函数过滤json数组

json数组根据某个字段的值进行过滤，返回过滤后的集合，可以使用filter()方法js代码如下：//先定义一个json格式的数组let array = [ {id:'1111',name:'第一条数据',key_dict:'是'}, {id:'2222',name:'第二条数据',key_dict:'是'}, {id:'3333',name:'第三条数据',key_dict:'否'}, {id:'4444',name:'第四条数据',key_dict:'否'}, {id:'5555',na

2021-07-24 16:44:29 8026 2

原创鼠标移入echarts饼图时浏览器页面晃动

鼠标移入echarts导致浏览器页面晃动的原因是tooltip属性tooltip: { trigger: 'item', transitionDuration: 0,//防止页面抖动 }

2021-07-12 19:18:03 478

原创 js输入框输入IP地址段

在Vue中<textarea v-model= "textareaValue"></textarea><script>export default { data(){ return{ textareaValue: "" //存放输入框的值 } }}</script>匹配一条IP地址//定义一个正则的判断表达式//一条IP的正则const reg = /^((

2021-07-07 19:38:20 902

原创 Vue中聊天室界面滚动条默认滑动到最底部

准备一个高度确定的容器，通过ref给元素注册引用信息，唯一id<div class= "height" ref= "chatRoom"></div><style> .height { height: 800px; }</style>methods里声明一个函数，在页面初始化和更新时调用mounted() { //页面挂载完成时调用 this.scrollToBottom()},updat.

2021-07-06 16:52:30 2259 3

原创 Ant design Vue中时间选择框校验和时间大小比较

Ant design Vue中时间选择框TimePicker设置初始值，效果如下：使用v-decorator对表单元素绑定值的同时对必填项做校验，format是将时间显示格式为“时:分”，如果需要显示成时分秒可以写成format='HH:mm:ss'<a-time-picker v-decorator="['Time',validatorRules.Time]" format='HH:mm' />...

2021-07-06 15:00:44 2647 1

原创 js中数组、字符串类型互相转换

数组转成字符串js中常用join()方法将数组转成字符串类型，好处是可以通过指定的分隔符进行分隔，默认是使用,分隔let arr = [111,222,333,444,555,666];let newArr = arr.join(','); //"111,222,333,444,555,666"let newArr = arr.join('|'); //"111|222|333|444|555|666"字符串转成数组...

2021-07-02 18:29:19 370

原创 Vue中多行文本输入框textarea的placeholder内的文本多行显示

我们在使用多行文本输入框的时候，需要提示框内的文字多行显示发现使用\n等都无效，placeholder并不可以识别出来后来发现只能采取最原始粗暴的方法，placeholder内的文本换行显示，例如：<textarea placeholder="你好！哈喽~我在呢"></textarea>即可完成想要的多行文本显示效果，不过个人觉得html代码不够美观如果有更好的办法，欢迎评论区指正...

2021-06-26 11:18:29 6816

原创 CSS中修改ul标签的样式

在我们使用li标签的时候，ul样式经常会错乱ul标签样式设置如下：ul {list-style: none;padding: 0px;margin: 0px; }

2021-06-23 00:33:22 3555

原创 CSS中动态切换列表样式

默认第一条有背景颜色，鼠标经过时列表背景改变，点击列表背景颜色切换显示，效果如下：做到最后才发现也可以不用li标签来做，不过都可以实现html结构代码如下：<ul>   <li v-for='(item,index) in this.listItem' @cli

2021-06-22 19:41:29 1021

原创修改Ant design Vue组件的默认样式

在实际开发中，可能会有需要修改组件的默认样式的情况，但是不能直接在全局样式中修改，那样其他用到该组件的地方也会受到影响。Vue中，以card组件为例，要修改其内边距，如下修改不起作用<style scoped> .ant-card-body { padding: 15px; }</style>此时我们可以前面加上/deep/即可成功修改~<style scoped> /deep/ .ant-card-body { padding: 15px

2021-06-22 10:56:53 4426 9

原创 Ant design Vue中的Modal组件自定义尾部内容

Ant design Vue中的Modal组件中默认的按钮是确定和取消在开发中往往有着自定义按钮需求，效果如下：在<a-modal></a-modal>组件内部，定义footer插槽即可自定义尾部内容，代码如下：<a-modal> <template slot='footer'> <a-button type='primary'>自定义按钮1111</a-button> <a-button typ

2021-06-22 09:46:00 1815

原创 CSS中设置元素高度自适应，不出现滚动条

如果我们想设置外层容器为浏览器高度的100%，同时高度自适应，不出现滚动条，可以将高度设置为浏览器视口的高度，代码如下：<style scoped>.element { height: 100vh;/*元素的高度为浏览器视口的高度*/}</style>但是当我们遇到有固定高度的菜单栏时，此时高度设置为100vh将会产生滚动条，此时可以用100vh减去固定高度，直接相减会报错，此时可以使用calc()函数，代码如下：<style scoped>.elem

2021-06-21 17:54:00 3292

原创 CSS对边框添加立体阴影效果

CSS对边框添加立体阴影效果如图所示：对最底下div元素设置样式如下：<style> .class { border-top: 1px solid #ffffff; box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影 }</style

2021-06-17 19:18:11 2025

原创 CSS绘制三角形样式

CSS绘制三角形实现效果如下：html代码结构如图所示<div class='item_right'> <div class='right_bubble'>你好你好你好你好你好你好</div> <div class='myAvatar'></div></div>css样式代码如下：.item_right { /*flex布局设置输入框和气泡的对齐方式*/ width: 100%; disp

2021-06-17 18:54:00 228

原创 ES6模板字符串中使用变量

在模板字符串里加${value}即可实现let value = 1;let code = `可以在字符串里边使用${value}变量value`;console.log(code); // 输出结果：可以在字符串里边使用1变量value

2021-06-16 16:49:35 1856

原创 Vue中v-html解析代码如何修改样式？

Vue中v-html解析代码如何修改样式？detail变量中存放的是tinymic富文本中保存的标签内容<div class='style' v-html='detail'></div>如果div中的图片本身分辨率很高，展示出来则会出现横向滚动条，图片的大小并不能随着父元素的宽度自适应展示如果直接设置.style img { width : 80% };,发现并不能生效，并且存在此时可以加上 >>> 来修改标签内所有图片的样式.style { wi

2021-06-16 15:47:23 878

原创 windows查看本机ip地址

查看本机ip地址输入框中输入cmd，点击打开命令提示符查看本机ip地址命令为：ipconfig查看本机ip详细地址命令为：ipconfig -all

2021-04-02 15:38:20 2041

原创 v-decorator表单元素设置初始值和默认值

v-decorator表单元素设置默认值1.简单绑定值 <a-input v-decorator="['value',{rules: [{required: true,message:'输入不能为空！'}]}]" placeholder="请输入值"> </a-input> <a-input v-decorator="['value',{rules: [{required: true,message:'输入不能为空！'}]}]" placeholder="

2021-04-02 10:20:59 4796

原创 Vue中引入阿里巴巴矢量图标库

vue项目中引入阿里巴巴矢量图标库官方网站链接：阿里巴巴矢量图标库选择想要的图标，添加到项目中选择Unicode模式并下载至本地此时，本地便会有一个download.zip的一个压缩包解压之后有如下文件，将文件复制到项目中，demo.css和demo_index.html可不复制，demo_index.html文件是对添加图标的一个详细说明将文件复制到项目的src/assets/iconfont目录下在main.js文件中将图标引入iconfont目录下的iconfont.css文件，便可

2021-03-29 10:03:48 343

qq_43576662的博客