vue
a_靖
大前端,全栈工程师
展开
-
Failed to load module script: Expected a JavaScript module script but the server ···报错解决
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.报错解决原创 2024-09-12 15:48:02 · 455 阅读 · 0 评论 -
echarts使图表组件根据屏幕尺寸变更而重新渲染大小
图表组件根据屏幕尺寸变更,重新渲染大小原创 2024-08-13 17:46:20 · 303 阅读 · 0 评论 -
浏览器窗口放大缩小自动适配字体和元素的大小
根据浏览器窗口大小自动适配字体和元素的大小原创 2024-08-13 11:09:18 · 300 阅读 · 0 评论 -
vue实现PC端图片放大缩小可鼠标拖动,鼠标滚轮控制放大缩小完整代码付效果图
vue实现放大缩小,拖动盒子完整代码付效果图原创 2024-08-07 16:55:16 · 368 阅读 · 0 评论 -
JS实现文字打印效果(完整代码附效果图)
VUE实现文本逐字打印的动态效果完整代码原创 2024-08-05 17:06:21 · 274 阅读 · 0 评论 -
VUE实现图片放大缩小,超出可滑动实现完整代码
VUE实现图片放大缩小,超出外框可自由滑动实现的完整代码原创 2024-07-02 11:16:42 · 480 阅读 · 0 评论 -
uniapp中image切换图片Url过度效果平滑实现
uniapp中image切换图片Url过度效果平滑实现方案原创 2024-06-13 16:24:17 · 317 阅读 · 0 评论 -
H5进度条样式,自定义进度条
自定义一个进度条样式原创 2024-06-04 11:46:21 · 440 阅读 · 0 评论 -
CSS实现风车转动动画效果,水流动动画效果(完整代码附效果图)
该效果为无限循环转动,因为是GIF,所以只截了一般分,看起来会卡顿,实际效果不卡顿。rotate 是旋转动画,shake 是模仿水流动画。原创 2024-04-10 11:32:29 · 827 阅读 · 0 评论 -
H5指定盒子截图,H5页面生成海报卡片完整代码附效果图
本篇博文是实现 H5 页面中指定一个盒子(div)生成一张图片。实现一个盒子里面的内容生成一张图片,包含完整代码资源,一看就会。原创 2024-03-15 17:56:29 · 900 阅读 · 0 评论 -
JS封装本地缓存的设置,读取,移除,清空方法及使用示例
前端JS缓存管理,缓存封装使用,JS获取本地缓存,JS设置本地缓存,JS移除缓存,JS清空缓存的封装使用示例原创 2024-01-18 14:52:02 · 1518 阅读 · 1 评论 -
VUE子组件通过计算属性,修改父组件传递的数组里面的值
从父组件传lists给子组件,本来我们是在子组件把 lists 直接渲染,但是因为不能直接修改 lists 的值,我们通过设置计算属性 showList 等于 lists,这个时候我们就随便修改 showList 的值了。父组件lists更新时会覆盖 showList。父组件传文章列表的数组对象给子组件,子组件显示文章列表;原创 2023-11-15 16:29:31 · 1532 阅读 · 0 评论 -
Vue.js快速入门指南:构建现代Web应用的利器
快速入门Vue.js,快速学习vue详细教程原创 2023-09-08 10:46:16 · 2144 阅读 · 0 评论 -
this.$refs使用方法
深入理解和使用this.$refs——Vue.js的利器原创 2023-08-21 16:40:01 · 8731 阅读 · 0 评论 -
ant vue 中,如何让左侧菜单都固定全部展开,不关闭
this.openKeys 改成你要固定展开的一级菜单目录 ['/msdebookh5']原创 2023-08-18 17:04:32 · 2432 阅读 · 0 评论 -
VUE使用下标修改数组内的对象的属性值时,watch不触发问题解决
VUE使用下标修改数组内的对象的属性值时,watch不触发问题解决原创 2023-08-07 18:32:46 · 3722 阅读 · 0 评论 -
uniapp动态获取列表中每个下标的高度赋值给另一个数组(完整代码附效果图)
uniapp动态获取列表中每个下标的高度赋值给另一个数组(完整代码附效果图)原创 2023-07-19 19:16:59 · 2907 阅读 · 0 评论 -
ant 后台自定义左侧菜单的图标
AntDesignVue自定义菜单图标原创 2023-07-14 13:52:06 · 3078 阅读 · 0 评论 -
VUE根据图片做图片形状的词云效果
VUE根据图片形状制作词云效果原创 2023-07-09 04:27:16 · 2312 阅读 · 0 评论 -
ant vue 自定义首页菜单实现
ant vue 自定义首页菜单实现原创 2023-07-04 12:53:35 · 2289 阅读 · 0 评论 -
VUE做词云图效果
在Vue中创建词云图效果可以使用一些第三方库来实现。库创建词云图效果,你可以根据具体需求自定义词汇和权重,并使用。提供的配置选项进行进一步的样式和布局调整。这样,当Vue组件被挂载后,词云图就会在。注意:上述示例仅展示了如何使用。原创 2023-06-07 15:37:31 · 5403 阅读 · 0 评论 -
vue解决跨域问题- vue-jsonp
vue解决跨域问题- vue-jsonp原创 2023-03-01 14:08:28 · 2891 阅读 · 0 评论 -
v-decorator 和 v-model 的使用区别
v-decorator 和 v-model 的使用示例代码原创 2022-06-02 22:23:19 · 4295 阅读 · 0 评论 -
ant vue a-select 重置
需求:点击重置按钮,初始化下拉菜单选中的值。实现效果图:上代码<a-form layout="inline" @keyup.enter.native="searchQuery" :form="form"> <a-row :gutter="24"> <a-col :xl="4" :lg="7" :md="8" :sm="24"> <a-form-item label="期数"> <a-s原创 2022-05-31 13:34:40 · 2774 阅读 · 0 评论 -
a-table设置单元格宽度,超出自动换行附效果图
示例效果:设置 a-table 中 columns 的指定单元格属性,通过插槽实现文本超出指定宽度自动换行 { title: '描述', align: "center", scopedSlots: { customRender: 'description' } },html <span slot.原创 2022-05-30 17:54:12 · 5699 阅读 · 1 评论 -
a-upload 上传文件到阿里oss
组件代码: <a-upload v-model:file-list="fileListcl_noticeUrl" :action="clAction" :data="upFileData" :multiple="false" :max-count="1" class="upload-list-inline" list-type="picture-card" @change="uploadFilecl2" :before-upload="be原创 2022-05-19 17:59:23 · 2591 阅读 · 0 评论 -
ant Vue 表格使用示例代码
示例代码:<template> <a-card :bordered="false"> <!-- 查询区域 --> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> <a原创 2022-05-19 17:31:50 · 1994 阅读 · 0 评论 -
marquee 循环空白解决方案完整代码+效果图
跑马灯无间隙无效循环滚动效果图:本篇文章要实现的是跑马灯无间隙无效循环滚动;marquee 标签滚动完一次以后,第二次会空白一个屏幕宽度才开始,而我们的需求是接在后面马上开始。我在网上找了一圈,没有发现能满足需求的属性,于是自己写逻辑了。注释:以下代码块的内容部分,应该填充跑马灯需要滚动的内容,自己随便填充。示例:我的是for循环遍历的内容默认跑马灯代码(如果可以接受有留白,用这代码就行,不用往后看)<marquee direction="left".原创 2022-05-06 20:27:13 · 3004 阅读 · 0 评论 -
Ant Design Vue 表格内编辑(附完整源码及效果图)
效果图:实现关键代码就是表单的 columns 属性对象下标的 scopedSlots:scopedSlots: { customRender: ''}实现完整代码:<template> <div> <div class="public-container"> <div class="table-wrapper"> <!--每个列的宽度必须比列名总长度大才能使表格所有列对齐,留一个.原创 2022-03-10 17:28:55 · 8734 阅读 · 3 评论 -
Vue全局路由侦听beforeEach路由守卫附代码使用示例
使用路由守卫beforeEach,可以实现路由侦听;实现代码:this.$router.beforeEach((to, from, next) => { console.log('111111113',to,from); next();});to 是跳转路由之后的page对象,里面包含路径from 是跳转路由之前的page对象,里面包含路径next 是执行下一步,验证通过的意思,必写,否则会无限循环...原创 2022-03-01 18:13:35 · 2051 阅读 · 0 评论 -
Vue 过渡组件,可实现组件或者页面的动画过渡或者css过渡
使用过渡效果,可以优化用户体验,Vue给我们封装了一个很好用的组件,专门用来处理过渡效果,下面我们来看看怎么使用它;Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用v-if) 条件展示 (使用v-show) 动态组件 组件根节点一个简单的代码示例:<div id="demo"> <button v-on:click="show = !show"> Toggle </b..原创 2022-03-01 17:32:06 · 1980 阅读 · 0 评论 -
Vue mixins(混入) 附代码示例详解
mixins 我们称它为 “混入” ;官方的解释:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。简单理解它的作用:可复用组件中的功能,可以理解为一个公用的组件对象,定义一个混入对象以后,在其它的组件中引入该对象,就相当该对象中的东西都在组件中一样,在发生冲突时以组件数据优先;下面我们来看怎么定义和使用它;1. 新建一个文件,文件原创 2022-03-01 16:40:23 · 2459 阅读 · 0 评论 -
样式集(11)注册页面样式,全部代码附效果图
效果图:代码:<template> <view class="page"> <view class="top"> 新用户注册 </view> <image :src="sanjiao" mode="widthFix" class="sanjiao"></image> <!-- <image style="width: 100vw;" :src="bolang" mode="widthFi原创 2021-11-24 16:41:39 · 2098 阅读 · 0 评论 -
provide和inject,Vue父组件直接给孙子组件传值
看代码app.component('todo-list', { // ... provide() { return { todoLength: Vue.computed(() => this.todos.length) } }})app.component('todo-list-statistics', { inject: ['todoLength'], created() { console.log(`Injected proper原创 2021-10-18 19:03:25 · 2013 阅读 · 0 评论 -
* core-js/modules/es6.array.fill in ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref
运行Vue项目报错,报错截图如下:导致该错误的原因是core-js版本不对:安装了淘宝镜像就可以$ cnpm install core-js@2安装完成重新运行就可以了外:清除npm缓存命令 :npm cache clean -f原创 2021-09-01 11:17:31 · 3392 阅读 · 2 评论 -
移动端自动播放音视频实现代码
视频组件<video :custom-cache="false" :src="item.voideoUrl" :id="'audio'+ index" :vslide-gesture-in-fullscreen="false" :direction='0' :enable-progress-gesture="false" :show-fullscreen-btn="false" loop object-fit="inherit"></video>使用wx的jssdk,原创 2021-08-12 10:49:13 · 2993 阅读 · 0 评论 -
touchEnd 不执行解决办法
场景:vue环境,在组件监听touchEnd 用户触摸滑动结束事件,在安卓端手机用户滑动结束后没有执行touchEnd 的事件解决办法:在 滑动过程中的事件 touchMove 中,延迟.05秒判断当前距离顶部的距离是否跟当前距离顶部的距离相同,然后把touchMove 中携带的参数传递给 touchEnd ,主动调用。看代码: <view :id="'myVideo'+index" @touchstart="touchStart" @touchmove="touchMov...原创 2021-08-12 10:17:46 · 3456 阅读 · 0 评论 -
H5网页去除苹果手机底部白边
先看去除前后的效果对比在网页的head里面放以下代码 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />原创 2021-08-03 14:56:36 · 3029 阅读 · 1 评论 -
在vue中使用vuex,修改state的值示例
1、 安装 vuexnpm install vuex -S2、在目录下创建store文件3、 在store.js编辑一个修改state的方法然后在mian.js中全局引入最后在组件中使用这个的功能是运用mutations 修改state中的值原创 2021-05-25 12:05:19 · 5402 阅读 · 0 评论 -
样式集(12) - 自适应居中弹窗
效果图:代码<!-- 答题正确弹窗 --> <block v-if="answer_true_show"> <view class="answer_true_bg"></view> <view class="answer_true"> <img class="true_bg_img" :src="qualifyingAnswerIng_true_bg" /> <view class="原创 2021-03-31 15:07:51 · 1883 阅读 · 1 评论