Vue
11111111
冷子夜
渭城朝雨浥轻尘,客舍青青柳色新
展开
-
Uniapp小程序web-view嵌套H5环境,如何实现H5页面生成的图片在小程序端下载
【代码】Uniapp小程序web-view嵌套H5环境,如何实现H5页面生成的图片在小程序端下载。原创 2024-05-27 17:06:18 · 442 阅读 · 0 评论 -
聊天列表自动滚动到底部
通过js控制让聊天列表自动滚动到底部,原创 2022-07-29 11:22:05 · 637 阅读 · 0 评论 -
Vue计时器和倒计时组件
Vue计时器组件和倒计时组件,二合一。原创 2022-07-26 16:26:23 · 1056 阅读 · 2 评论 -
CSS ios 父元素 border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
在父元素上加上这段代码 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -webkit-mask-image: -webkit-radial-gradient(white原创 2021-03-08 16:39:16 · 664 阅读 · 1 评论 -
好用,常用的Vue插件集合
vue-cli常用插件集合element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动原创 2020-12-14 14:12:00 · 1620 阅读 · 0 评论 -
Canvas连续切换绘制虚线和实线
待定原创 2020-12-14 14:06:37 · 814 阅读 · 0 评论 -
Vue利用visibilitychange监听页面显示和隐藏
mounted() { document.addEventListener('visibilitychange', _this.handleVisiable) }, destroyed() { document.removeEventListener('visibilitychange', _this.handleVisiable) }, methods: { handleVisiable(e) { if (e.target.visibilityState原创 2020-12-04 15:55:34 · 8319 阅读 · 0 评论 -
前端tab界面数据缓存和预加载思路
效果点击第5周。缓存第5周数据,并预加载第4、6周数据。继续点击第6周,读取第6周缓存数据,第5周数据已缓存,所以只预加载第7周数据。点击第1周。缓存第1周,预加载第2周,第0周不加载。代码<script>export default { data() { return { dataInit: false } }, methods: { /** * 加载数据 * @param String week 加载指定周.原创 2020-12-01 18:01:36 · 685 阅读 · 0 评论 -
vue实现带文字switch切换简化版
效果<template> <div class="toggle-button-wrapper"> <input type="checkbox" id="toggle-button" name="switch" :checked="checked" v-on="listeners" @change="onChange" /> <label for="toggle-button" class="button-label"> &转载 2020-11-11 17:17:24 · 1649 阅读 · 0 评论 -
switch开关组件Vue
效果代码<template> <div class="SwitchCp"> <label role="checkbox" :class="['switch', { value }]"> <input type="checkbox" class="switch-input" @change="toggle" /> <div class="switch-core" :style="{ backgroundColor原创 2020-11-11 17:06:01 · 967 阅读 · 0 评论 -
vue项目中滚动到某元素位置,使用scrollIntoView()
1.使用a标签+#号<a href="#box1">我跳到box1</a>上面这一种的缺点是,url会发生改变,会在url最后面加上片段识别符#box2,这样就改变了URL的路径,这是我们不想看到的。因为再次刷新的时候回出现问题。当使用 vue-router回退时,发现需要回退很多次。2.scrollTop滚动到某位置document.documentElement.scrollTop=380;//不需要加单位直接这句就可以实现滚动到某位置3.scrollIntoVi原创 2020-10-30 11:22:39 · 3106 阅读 · 0 评论 -
Vue 三种带文字分割线实现方式
第一种利用::before 和 ::after实现 <div class="not_has_more"> 常用品牌 </div> .not_has_more { margin: 40px 0; line-height: 50px; text-align: center; position: relative; height: 33px; font-size: 24px; font-family: .原创 2020-10-22 11:12:59 · 6811 阅读 · 0 评论 -
html2canvas应用问题概览
问题1使用以下省略文本样式,会绘制不出来 white-space: normal; /** 不能设置为这个 white-space:nowrap; 这个意思为不换行 **/ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排原创 2020-10-10 14:43:15 · 447 阅读 · 0 评论 -
vue常用插件集合
vue-cli常用插件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端转载 2020-09-21 17:10:31 · 388 阅读 · 0 评论 -
引入Vant组件并改变其样式
在加了scoped的style中重写样式 失效,因此另加一个不带scoped 的 style即可<style lang="scss">.main_page_process { //vant 组件类名 .van-progress__portion { box-shadow: 0px 6px 12px 0px rgba(255, 102, 102, 0.5) !important; }}.baby_desc_swiper { //vant 组件类名 .van-swip原创 2020-08-14 16:57:14 · 1883 阅读 · 0 评论 -
如何v-html 内的元素加样式
使用 ::v-deephtml<div id="rich_text" v-html="content" class="desc content"></div>CSS #rich_text { ::v-deep p { margin: 32px 32px 0; font-size: 28px; font-family: PingFangSC-Regular, PingFang SC; font-weight:原创 2020-08-03 14:14:55 · 684 阅读 · 0 评论 -
Vue-元素曝光(判断元素是否在可视区域内)(一)
IntersectionObserver介绍intersection-observer npm包实际运用原创 2020-07-24 20:19:53 · 4463 阅读 · 0 评论 -
Vue-元素曝光(判断元素是否在可视区域内)(二)
IntersectionObserver介绍intersection-observer npm包实际运用原创 2020-07-24 20:18:37 · 4605 阅读 · 4 评论 -
Access-Control-Allow-Origin‘ header in the response must not be the wildcard ‘*‘ when the request‘s
报错Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.原因:后台不能使用通配符 ‘*’,否则前端报错;请求的origin和后台设置的origin不一致。解决方案:(1)前端代码不用动。后台 为‘Access-Control-Allow-Origin’设置动态的ori原创 2020-07-23 17:57:18 · 6157 阅读 · 2 评论 -
swiper轮播图在vue中实现显示3张图片,一个完整的两边显示一半
这里是引用https://blog.csdn.net/weixin_44237806/article/details/100141698安装 yarn add swiper vue-awesome-swiper引用局部引用import Swiper from 'swiper/swiper-bundle.min.js'import 'swiper/swiper-bundle.min.css'swiper效果图,图片路径自己更改吧这个<template> <.转载 2020-07-20 14:46:04 · 5637 阅读 · 6 评论 -
package.json中库的版本号详解(^和~区别)
一般package.json依赖配置如下"dependencies": { "accepts": "~1.3.7", "array-flatten": "1.1.1", "body-parser": "^1.19.0", "content-disposition": ">0.5.3", "content-type": "~1.0.4", "cookie": "^0.4.0", "cookie-signature": "<1.0.6",原创 2020-06-10 20:32:08 · 3768 阅读 · 0 评论 -
H5视频播放器--西瓜视频播放器
文档官网技术文档github安装# 最新稳定版$ npm install xgplayer或者<script src="//cdn.jsdelivr.net/npm/xgplayer/browser/index.js" type="text/javascript"></script>使用<div id="mse"></div>let player = new Player({ id: 'mse', url: '//abc原创 2020-06-04 11:04:43 · 2421 阅读 · 0 评论 -
vue2.0的计算属性computed和watch有什么区别?说说各自使用场景
一个属性由多个属性计算而来时,使用计算属性;如订单总价一个属性值变化影响多个属性、方法,使用属性监听;如关键词搜索1 computed:通过属性计算而得来的属性1 computed内部的函数在调用时不加()2、computed是依赖vm中data的属性变化而变化的,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。3、comput...原创 2019-12-31 09:36:18 · 965 阅读 · 0 评论 -
发布npm包
1(新创建的包)初始化包参考文章 创建自己的私有npm包并发布进入底层目录,执行npminit命令此命令会在当前模块内创建一个package.json文件,目的是可以设置自己的模块名称,版本,作者等一系列信息要上传还必须得有自己的npm账号,可以去npm官网注册注册完后,继续回到模块目录执行npm adduser,登录登录成功后,执行npm publish即可发布3 ...原创 2019-12-18 10:37:11 · 120 阅读 · 0 评论 -
利用async、await关键字设置函数同步异步
vue async/await同步 案例1. async/await场景这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。2. 名词解释asyncasync的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个pro...转载 2019-12-05 17:17:29 · 1224 阅读 · 0 评论 -
小程序onPageScroll滚动监听优化:函数防抖和节流
```handlebarsasdsadas```## 标题saasdasd## 标题aasdasdsa转载 2019-12-03 16:19:59 · 5163 阅读 · 0 评论 -
Vue 中父级给子级传参加冒号和不加冒号的区别
原创 2019-04-11 15:33:31 · 1997 阅读 · 0 评论 -
Vue 刷新当前页面
1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面,页面是不进行刷新的2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好3.解决方法provide / inject组合作用:允许一个祖先组件向其所有子孙后代注入...转载 2019-03-29 09:53:48 · 312 阅读 · 0 评论 -
Vue Router 路由跳转传参知识 总结
一、跳转方式1、router-link 标签 to里的值可以是一个字符串路径,或者一个描述地址的对象。例如: 默认 to 不加:号<router-link to="/order/check_order_list" replace></router-link> 1.1 方法一 ( 按字符串路径) 路径:htt...原创 2019-04-16 16:45:42 · 603 阅读 · 0 评论 -
vue组件里setInterval定时器销毁问题
解决方法1:首先我在data函数里面进行定义定时器名称:data() { return { timer: null // 定时器名称 } },然后这样使用定时器:this.timer = (() => { // 某些操作 }, 1000)最后在beforeDestroy()生命周期内清除定时器:beforeDestroy() { clearInterva...转载 2019-04-18 08:55:07 · 3811 阅读 · 0 评论 -
vue.js 动态文字向上滚动广播中奖信息代码
????????????个人博客:Harvey的个人博客 ????????????效果如图<template> <div class="roll-msg"> <div class="popup"> <div class="box"> <ul class="lb" :class="{marquee_top:anim...原创 2019-04-18 09:03:19 · 2563 阅读 · 0 评论 -
Vue ajax图片上传及后端处理
前端????????????个人博客:Harvey的个人博客 ???????????? <div class="upload"> <div> <icon name="caozuo-shangchuan-upload"></icon> <input name="file" @ch...原创 2019-05-30 14:03:07 · 4189 阅读 · 2 评论 -
Vue 将 IconFont 封装成组件
SvgIcon.vue<template> <svg class="icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><script >export default { ...原创 2019-05-30 17:21:22 · 1656 阅读 · 1 评论 -
小程序tab组件封装
demo下面是html部分<view class="contain"> <view class="tab" style="position:fixed;left:0;top:{{positionTop}}"> <view wx:for="{{tabTitle}}" wx:key="{{index}}" class="tab-son {{num...原创 2019-08-06 20:58:58 · 1213 阅读 · 0 评论 -
Vue 中 import from @ 是什么意思?怎么配置?
**????个人博客????:[Harvey的个人博客](http://xhliu.top)**原创 2019-04-11 14:57:23 · 19369 阅读 · 0 评论