Vue
Vue相关知识点
萌萌哒小可爱啦
这个作者很懒,什么都没留下…
展开
-
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 · 246 阅读 · 0 评论 -
js文件下载功能(Blob文件流)
举例的是excel文件的下载整理了一些常用文件MIME类型。原创 2021-12-22 15:05:05 · 2141 阅读 · 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 · 2135 阅读 · 0 评论 -
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 · 1009 阅读 · 0 评论 -
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 · 2844 阅读 · 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 · 230 阅读 · 0 评论 -
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 · 679 阅读 · 3 评论 -
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 · 883 阅读 · 0 评论 -
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 · 2118 阅读 · 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 · 2580 阅读 · 1 评论 -
CSS中动态切换列表样式
默认第一条有背景颜色,鼠标经过时列表背景改变,点击列表背景颜色切换显示,效果如下:做到最后才发现也可以不用li标签来做,不过都可以实现html结构代码如下:<ul> <!-- `<li>`标签循环列表展示,绑定点击事件(可以传递该条列表的数据) --> <!-- 判断该条列表的索引index是否等于isActive变量的值, 以此来动态绑定样式--> <li v-for='(item,index) in this.listItem' @cli原创 2021-06-22 19:41:29 · 1003 阅读 · 0 评论 -
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 · 857 阅读 · 0 评论 -
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 · 4691 阅读 · 0 评论 -
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 · 337 阅读 · 0 评论