在表单方面有需求是两个必选一个为必填，一个必填值输入进去后自动清楚另一项校验 <template> <el-formref="form":model="form":rule="rules"> <el-form-itemlabel="名称"prop="name"> <inputv-model="form.name"placeholder="请输入名称"/> </el-form-item> <el-form-itemlabel="昵称"prop="nickname"> <inputv-model="form.n...

vue监视属性watch的作用是可以监视data和computed中属性发生了变化，并且记录了属性的新值和旧值 监视属性的位置 监视属性watch位置是和data属性computed属性methods属性平级 <script> exportdefault{ data(){//data return{} }, computed:{//计算属性}, methods:{//方法}, watch:{//监视属性}, } </script> 监视属性的使用场景 接口请求三秒后才能再次发起请求，记录当前时间为新值减去再次点击时的时间是否大于3秒，3秒后才可再次执行操作 监...

用elementuiDrawer组件封装一个Drawers抽屉弹窗组件，里面新增了一些属性，例如框的宽度等 红色为Drawers组件 子组件Drawers <template> <el-drawer v-if="showable" :visible.sync="showable" direction="rtl" :wrapperClosable="false" size="80%" :withHeader="false" :append-to-body="appendToBody" :modal="false" :destroy-on-close="true" :befo...

elementui的v-loading使用的是这个样式，背景颜色和字体颜色可以自行更改。 v-loading绑定你的变量名 element-loading-text加载文案 element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值 数据加载之前显示loading 数据code不为0显示异常 接口返回空数据显示暂无数据 接口返回值正常循环展示 <template> <div> <!--简单的文字提示用这个--> <divv-if="loading">疯狂加载中.....

computed的作用 computed用data中现有的属性计算出一个新的属性，叫做计算属性，计算属性和data中属性在{{}}写法和属性一样，例如计算属性name写为<div>{{name}}</div> computed的定义位置 computed的定义位置和methods还有data为同级写法为computed:{} <script> exportdefault{ data(){ return{ } }, computed:{}, methods:{}, } </script> 计算属性的属性名 计算属性的属性名需要写在comput...

ezuikit-js视频功能 获取ezuikit-js  使用npm下载 $npminstallezuikit-js 引入ezuikit-js importEZUIKitfrom'ezuikit-js'; 创建dom元素 <divid="video-container"></div> 注意：如果div上面写的有v-if逻辑条件，<divid="video-container"v-if="show"></div>请务必条件为true页面dom元素渲染成功后再进行newEZUIKit.EZUIKitPlayer实例初始化，最好v...

一个列表上面每一条数据上面有一个查看按钮，点击查看按钮显示3个tab，选中监控设备后显示前后设备摄像头，用的是萤石的视频插件，页面id存在时创建一个实例进行监控视频显示 我各种方法各种原因都用上了，搞了好久，想破脑袋都不知道为什么？最后正常了，但是只有一个正常错的显示正常的不显示，心塞啊，最后把v-if条件的变量去掉发现可以，然后我把条件中的某个变量去掉后，通过chatgpt又把条件重新捋了一遍，简化逻辑和条件把变量去掉了一些，功能依旧实现，加上某个变量后又不行了，id元素显示但就是没有创建实例成功，我怀疑是变量一开始是false然后调用了接口后返回true但是new实例的代码已经执行过了，...

css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。 方式一：利用css3滤镜filter中的drop-shadow 代码如下： <style> .icon{ display:inline-block; width:180px; height:180px; background:url('img/XXX.png')no-repeatcentercover; overflow:hidden; } .icon:after{ content:''; display:block; height:100%;...

elementui实现返回顶部 重要样式 .page{overflow-y:scroll;} js获取类名.page <divclass="page"style="padding-bottom:40px;"> <divclass="toTop"@click="backTop"> <divclass="h-svg-icon-wrappersvgColorsvgColor2"> <divclass="h-svg-icon"><!--?xmlversion="1.0"encoding="UTF-8"?--> <svgwi...

[Vuewarn]:Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-renders.Instead,useadataorcomputedpropertybasedontheprop’svalue.Propbeingmutated:“data” foundin —>atsrc/views/training/classroom/components/newView.vueatpackages/drawer/src/main.vueatsrc/components/Draw...

$message拼接动态值根据enableStatus变量值显示关闭失败或者打开失败 //错误写法 this.$message.success(enableStatus!1?"关闭":"打开"+'失败'); //正确写法 this.$message.success((enableStatus!1?"关闭":"打开")+'失败'); 这样，正确写法先会根据enableStatus来确定拼接的内容是“关闭”还是“打开”，再把“成功”拼接上去，就可以正确显示了。

私藏项目实操分享 oldfind/index.vue代码 <template> <view> <scroll-viewscroll-y="true":scroll-y="getStoreListLength"@scrolltolower="getStoreList":style="'height:'+svHeight+'px;'"class="store"> <viewclass="item"v-for="(item,index)instoreList":key="index"> <viewclass="imageBox">...

父组件通过on来调用子组件方法 //子组件MyComponent.vue <template> <div> <button@click="greet()">Greet</button> </div> </template> <script> exportdefault{ methods:{ greet(){ this.$emit('greet');//触发自定义事件 }, }, }; </script> //父组件Parent.vue <template> <div> ...

小程序与uniapp语法对比 //上面uni下面小程序 <view@click=""></view> <viewv-bind:click=""> <viewbind=""> 微信代码转uniapp代码的全局替换总结： wx:--->v- v-key—>:key {{—>（空） }}—>（空） bind:?tap—>@click catch:?tap—>@click.stop bind:?—>@ wx.—>uni. this.data.—>this <block—><...

可以在父组件的mounted钩子函数中获取子组件的ref，然后调用子组件的方法来设置当前节点，代码如下： //父组件代码 <template> <SideBarref="sidebar"/> </template> <script> exportdefault{ mounted(){ this.$nextTick(()=>{ //获取子组件tree的ref consttreeRef=this.$refs.sidebar.$refs.tree //设置当前节点 treeRef.setCurrentKey(this.articleIdList...

Ajax是一种用于在浏览器中发送异步HTTP请求的技术，即它可以在不刷新整个页面的情况下向服务器发送请求并获得响应。在实现上，Ajax使用了原生的XMLHttpRequest对象。 Promise则是一种原生的JavaScript对象，它可以用来处理异步请求的响应，从而实现更高效的异步操作。Promise支持链式调用，可以让异步操作变得更加优雅易读。 Ajax是一种用于创建交互式Web应用程序的技术，它可以用于在页面不刷新的情况下发送HTTP请求和响应数据处理 Promise是JavaScript中的一个对象，表示一个异步操作的最终完成或失败，并返回结果或错误，它可以用于处理异步操作。 ....

父组件调用子组件 子组件调用父组件 使用$parent 父组件 <child></child> important'./component/child' components:{child:child} helloWord(){console.log("helloword!")} 子组件 <button@click="sayHello">sayhello</button> sayHello(){ this.$parent.helloWord(); } 使用$emit(param1,param2) this.$emit(参数1,参...

私藏项目实操分享 uniapp <viewclass="upload"> <image:src="noAvatar"class="avatarImg"v-if="avatar=''"@click="upload()"></image> <image:src="avatar"class="avatarImg"v-else@click="del()"></image> </view> data:{ avatar:'', } upload(){ uni.chooseImage({ count:1,//图片张数 success...

请输入正确的姓名，支持中文或者英文(20位字符内)，例如：杨颖 /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/ 如果想要支持名字中间输入·和.这样写，例如：迪丽热巴·迪力木拉提 /^[\u4e00-\u9fa5a-zA-Z·.]+$/

uniapp微信小程序点击复制文字内容 如果使用微信小程序把uni.换成wx.就可以了 下面用的都是是uni的实例 uni.setClipboardData是把指定数据按照指定格式放入剪切板中 uni.setClipboardData({ data:'复制的文字', success:function(res){ uni.getClipboardData({ success:function(res){ console.log("res.data",res.data)//获取复制的文本内容 } }) } }) <view@click=copy()>{{con}}</v...