Vue
文章平均质量分 62
howcoder
这个作者很懒,什么都没留下…
展开
-
一款极简聊天应用,比较完整,略好看
基于vue3+socket.io的聊天应用原创 2022-04-15 17:15:45 · 8704 阅读 · 10 评论 -
vue通过this.$refs给元素添加水印
createWaterMark() { var width = this.$refs.element.clientWidth; // 元素的ref属性; var height = 2000; var len = width / 80; len = len.toFixed(0); var hen = height / 80; hen = hen.toFixed(0); var init_top = 30; va原创 2022-04-14 23:07:32 · 1091 阅读 · 1 评论 -
不要在v-for中使用v-if
一、前言以下代码写法,相信80%的初学者写过,即使没写过,也应该见过!<ul> <li v-for="product in products" :key="product.id" v-if="product.price < 50" > {{ product.name }} </li></ul>使用 v-if 来过滤 v-for 循环的数据是一个超级大错误!尽管这看起来很直观,但它会导致一个巨大的性能问题。二、原因Vue原创 2021-01-14 14:07:38 · 434 阅读 · 0 评论 -
vue+node+socket.io实现客服聊天功能
客服功能介绍:机器人智能聊天客服手动在线离线用户主动向客服发送信息(信息包括文本、表情包)客服选择会话成员,并且主动向用户发送信息(信息包括文本、表情包)用户/客服接收到对方发送的信息客服主动关闭用户会话,离线列表显示离线用户,用户端提示客服主动关闭会话,本次会话结束客服手动离线,清除所有会话列表,用户端提示客服已离线,本次会话结束客服刷新或关闭页面下线,清除所有会话列表,用户端提示客服已离线,本次会话结束用户刷新页面或关闭页面,客服端提示用户已下线,本次会话结束客服切换右边工具栏,选原创 2021-01-03 10:13:09 · 9203 阅读 · 47 评论 -
Vue使用vue-quill-editor上传图片路径为服务器路径
前言:vue-quill-editor富文本框插件的使用十分广泛,最近公司需要写一个指导文档,但发现上传图片时,是直接将图片转成base64显示的,此时提交的文本编辑器内容肯定也是一大串的html+图片base64字符串,这当然不能直接存到数据库数据库去,除非你不怕后端的一顿暴揍解决思路:vue-quill-editor有开放很多的扩展和自定义方法,我们通过在mounted初始化中获取自己的toolbar工具栏中的image,劫持image的handler方法,调用我们页面上一个隐藏的input:f原创 2020-12-17 09:42:28 · 1781 阅读 · 0 评论 -
Vue监听store中数据变化的两种方式
方式一watch: { "$store.state.userInfo.Name":{ handler:function(newVal,oldVal){ console.log(newVal,oldVal); } }}方式二computed: { isEdit () { return this.$store.state.userInfo.Name; //需要监听的数据 }},watch: { isEdit(newVal, oldVal)原创 2020-12-10 13:52:56 · 27804 阅读 · 0 评论 -
Vue/uni-app倒计时
导读:在平时,倒计时的运用场景非常多,比如新年倒计时、商品的开抢倒计时,因此把倒计时做好十分必要,我们先看下效果图。@[TOC]效果图一、效果图@[TOC]4步走二、实现该效果并不难,只需要4步走注意:下面代码以Vue为例,如果需要实现uni-app,则改动html的元素,并且引入组件即可(1)封装倒计时的组件<!-- 子组件活动倒计时 --><template id="countBackwards"> <div class="uni-countdown"原创 2020-12-04 10:14:21 · 650 阅读 · 0 评论