- 博客(23)
- 收藏
- 关注
RSS订阅原创 uniapp小程序/H5封装图片懒加载+渐变加载组件
实际效果图gif图片较大，加载较慢，请耐心等待…复制代码到项目中，可以直接运行封装m-image组件<template> <div class="m-image" :class="[ {showLoading, border}, `m-image-${index}` ]" :style="{'--bgColor': bgColor}" @click="$emit('click')"> <ima
2021-09-13 11:01:25
2252
5
原创 Vue3.2 setup语法糖、Composition API、状态库Pinia归纳总结
起初 Vue3.0 暴露变量必须 return 出来，template中才能使用； Vue3.2 中 只需要在 script 标签上加上setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中。所有ES模块导出都被认为是暴露给上下文的值，并包含在setup() 返回对象中。一、Vue文件结构<template> // Vue2中，template标签中只能有一个根元素，在Vue3中没有此限制 // ...</template><s.
2021-09-02 12:12:18
5490
5
原创 Vue/uniapp实现沿Y轴旋转并切换正反面内容动画
效果图实现原理1、animation动画;2、position: abaolute;3、backface-visibility: hidden;实现代码uniapp请将px替换为upx，复制粘贴即可看到实际效果<template> <ul> <li v-for="(item, index) in list" :key="index"> <div v-for="(child, i) in item" :key="i">
2021-08-05 14:59:45
1530
原创 一个div+CSS实现环形图
效果图仅适合统计两个数据源，多个数据源或者复杂效果请使用ECharts实现原理利用CSS锥形渐变conic-gradient，以下是该属性兼容性代码（Vue）<template> <!-- data-xxx可实现CSS attr(data-xxx)获取值 --> <div class="circular" :style="style" :data-percent="percent" ></div></t
2021-06-10 09:53:54
1668
原创 Vue Element UI 自定义描述列表组件
效果图写在前面写后台管理经常从列表点击查看详情，展示数据信息，Element UI虽然有表格组件，但是描述组件并没有，之前团队的成员遇到这种情况都自己去写样式，写起来也麻烦，而且每个人写出来的样式也不统一，破坏了项目的整体风格。像是Ant Design UI就有描述组件，用起来特别舒服，所以索性自己结合Element UI的el-row和el-col自己写了一个。实现哪些功能1、每行的高度根据改行中某一列的最大高度自动撑开2、列宽度自动补全，避免最后一列出现残缺的情况3、支持纯文本与HTML
2021-05-12 11:46:15
8210
9
原创 uni-app/小程序自定义导航栏+下拉刷新完美解决方案(封装原生page滑动组件)
实际效果图本组件优势：1、使用小程序/uniapp原生page滑动，流畅度好于scroll-view组件2、采用组件方式直接使用，只需在下拉刷新、上拉加载、加载完成时触发组件方法即可3、包含无数据时空布局展示4、可自定义下拉刷新、上拉加载样式5、采用组件的双向绑定v-model6、完美解决自定义导航后看不到下拉刷新loading的问题我们在page.json中开启了自定义导航栏属性和下拉刷新属性后// 开启下拉刷新"enablePullDownRefresh": true// 自定义
2021-04-30 10:44:55
6533
5
原创 封装uniapp全局弹窗并绑定到原型上
调用方式// main.js中引入import './popup'// Toast// 1、带成功图标提示框this.$Toast('success', '提交成功！', () => { // 提示框关闭后})// 2、不带任何图标提示框this.$Toast('none', '请输入手机号', () => { // 提示框关闭后})// 3、带loading图标提示框this.$Toast('loading', '加载中…')// Confirmthis.$C
2021-04-07 17:16:42
3391
原创 手写简版Vue
学习了Vue之后，根据自己的理解，手写了简版Vue，希望对正在学习Vue源码的初学者有所帮助，一起加油！HTML<!-- 声明meta，不然会乱码 --><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><!-- HTML --><div id="app"> <p>{{counter}}</p> <p>{{counter}.
2021-04-07 17:05:56
234
原创 创建完整的Vite + Vue3 + TypeScript + ESLint + prettierrc + Sass项目模版
一、创建项目# npm 6.xnpm init @vitejs/app my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init @vitejs/app my-vue-app -- --template vue# yarnyarn create @vitejs/app my-vue-app --template vue// 支持的模板预设包括：vanillavuevue-ts // 推荐vue-ts模版reactreact-ts
2021-03-09 22:34:15
5551
4
原创 vue-quick-calendar—Vue超实用日历组件(带示例图，注释超详细~)
效果图效果图如下，支持标记日期、点击日期、切换月份，复制即用，本示例为PC端，移动端请自行修改样式哦~一、Calendar组件代码，预处理器使用SCSS<template> <section class='m-calendar' :style="dateStyle"> <!-- 切换月份 --> <header class='changeMonth'> <span class='prepMonth' @click=
2021-01-28 11:13:56
7570
4
原创 手机靓号高亮效果（Vue）
效果效果如下，靓号部分会显示红色实现思路1、定义正则规则2、遍历手机号，生成一个由0和1组成的11位字符串，1表示靓号，0不为靓号3、在HTML中循环手机号，根据下标给数字添加类名light，即高亮JS代码getBeautifulPhone (phoneNum) { // 正则规则 var regexArrs = [ { regex: /(123|234|345|456|567|678|789|987|876|765|654|543|432|321){2}/,
2020-12-28 15:31:31
1067
原创 前端项目中常用JS方法封装分享
写在前面我在写项目时，会把经常用到的方法专门用一个JS文件来管理，下面是我项目中经常用的一些方法1、日期格式化（时间戳转年月日时分秒）；2、千分位格式化（10000转10,000）；3、Element UI前端el-table前端导出；4、两个数组对象去重；5、后端返回数据流前端下载方法；6、富文本标签过滤（去除HTML标签）一、日期格式化在实际项目中，后端返回时间基本都是以时间戳的格式，我们前端拿到肯定是要转换成相应的年月日时分秒格式的，以下是方法：1、对Date的扩展：新建js文件，
2020-06-26 23:02:25
1285
原创 Vue中使用contenteditable属性撸一个可以自动手动换行的输入框
写在前面有时候页面上需要一个类似于微信中发送消息的输入框，即可以实现：默认只有一行文字高度，用户输入超过自动换行，用户也可以点击Enter键盘换行，当输入的内容清空后，输入框又恢复成一行的高度，原生的输入框input和文本框textarea无法实现以上功能，所以就自己写了一个，采用HTML5的contenteditable属性，可以完美实现：1、自动换行及手动换行；2、双向绑定；3、类似于...
2020-03-23 13:14:09
2439
原创 Vue移动端树形控件实现（递归组件）
写在前面因项目中需要用到树形控件，第三方的组件也不满足项目的使用需求，就自己造了一个车轮子，用Vue递归组件的方式实现，代码简单易懂，直接复制即可使用。效果图子组件代码<template> <ul v-if="data.length"> <li v-for="(item, i) in data" :key="i" @click.stop="sel...
2020-03-14 15:48:20
9621
15
原创 Vue中双向绑定实现的表单选择组件（按钮样式）
写在前面表单中经常会用到选择框的组件，HTML自带的样式太丑了，第三方的组件也不满足自己的使用需求，而且样式也不好看，于是自己就撸了一个，代码很简单，可以实现单选和多选，且选择后不用再选择的数据对数据进行处理。我写的这个组件是按钮的样式，如果需要图标+文字的哪种，自行更改样式即可。效果图选择子组件代码<template> <div class="selectBtn...
2020-03-05 12:12:01
747
原创 Vue精简代码实现评分组件
写在前面组件还是自己写来的好，网上的一些评分组件都太过复杂，自己写的代码很精简，就能达到想要的功能，可以点击也可以禁止点击，可以展示全星、灰星、半星！效果图组件代码<template> <div class="star"> // 用于父子组件双向绑定 <input type="hidden" v-model="value"> ...
2019-06-10 17:06:52
1495
原创 五种方法实现前端PC页面三栏布局（圣杯布局）
写在前面做PC端的小伙伴肯定遇到过需要实现三栏布局，即左右两侧宽度固定，中奖宽度自适应，而且这也是面试中经常会问到的问题，一般现在用到的会有五种解决方案，包括：浮动布局、绝对定位布局、flexbox布局、表格布局、网格布局显示效果代码实现这里我们将左右两侧宽度固定为300px，高度300px第一种——浮动布局 // HTML <div class="block"> ...
2019-05-30 16:36:04
1885
原创 css修改自带滚动条样式
写在前面浏览器自带的滚动条不太好看，短粗短粗的，我们可以通过css来更改它的样式显示效果代码实现::-webkit-scrollbar{ width: 4px; height: 10px;}::-webkit-scrollbar-button{ width: 0; height: 0;}::-webkit-scrollbar-track{}::-webkit-scro...
2019-05-30 15:48:57
568
原创 Vue自定义全局弹窗组件
写在前面页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了效果图弹窗组件新建一个弹窗的组件——popup.vue<template> <transition name='fade'> <!-- 蒙版 --> ...
2019-05-27 11:58:20
17072
11
原创 Vue封装mescroll组件
写在前面搜罗全网，终于找到一个好用的Vue滑动组件，包括上拉加载，下拉刷新等一大堆好用的方法，他就是mescroll组件，由于很多个页面都需要用到mescroll组件，所以自己把他封装成了一个组件，方便自己使用mescroll组件<template> <div class="mescroll-wrap"> <mescroll ref="mescrol...
2019-05-16 11:19:22
2612
6
原创 ios移动端JS获取指定日期时间戳出现NAN的问题
问题在做移动端项目时，发现获取将指定日期通过new Date().getTime()转换成时间戳时，在电脑和安卓机上显示正常，ios上显示NANlet date = '2019-05-16 12:00'console.log(new Date().getTime(date))// 电脑上：1557979200000// 安卓上：1557979200000// ios上： NAN解决...
2019-05-16 11:02:55
1679
原创 Vue简短代码实现文字首尾无缝跑马灯效果
Vue精简代码实现文字首尾无缝跑马灯效果写在前面效果图子组件代码父组件代码写在前面由于HTML自带的marquee标签无法做到上一条文本和下一条文本无缝衔接，所以结合网上的资源自己写了一个，代码不多，仅能横向滚动，可滚动重复滚动一条或多条文本，字数不限制，若想要实现纵向滚动可使用vux组件库的marquee组件。效果图gif图展示出来看起来很卡，实际不卡子组件代码<templa...
2019-05-09 20:15:36
5693
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人