logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

Vue Element UI 自定义描述列表组件

效果图写在前面写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格。像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个。实现哪些功能1、每行的高度根据改行

#javascript#html
Vue中使用contenteditable属性撸一个可以自动手动换行的输入框

写在前面有时候页面上需要一个类似于微信中发送消息的输入框,即可以实现:默认只有一行文字高度,用户输入超过自动换行,用户也可以点击Enter键盘换行,当输入的内容清空后,输入框又恢复成一行的高度,原生的输入框input和文本框textarea无法实现以上功能,所以就自己写了一个,采用HTML5的contenteditable属性,可以完美实现:1、自动换行及手动换行;2、双向绑定;3、类似于...

Vue封装mescroll组件

写在前面搜罗全网,终于找到一个好用的Vue滑动组件,包括上拉加载,下拉刷新等一大堆好用的方法,他就是mescroll组件,由于很多个页面都需要用到mescroll组件,所以自己把他封装成了一个组件,方便自己使用mescroll组件<template><div class="mescroll-wrap"><mescroll ref="mescrol...

#前端
创建完整的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// 支持的模板预设包括:van

Vue简短代码实现文字首尾无缝跑马灯效果

Vue精简代码实现文字首尾无缝跑马灯效果写在前面效果图子组件代码父组件代码写在前面由于HTML自带的marquee标签无法做到上一条文本和下一条文本无缝衔接,所以结合网上的资源自己写了一个,代码不多,仅能横向滚动,可滚动重复滚动一条或多条文本,字数不限制,若想要实现纵向滚动可使用vux组件库的marquee组件。效果图gif图展示出来看起来很卡,实际不卡子组件代码<templa...

#前端
Vue3.2 setup语法糖、Composition API、状态库Pinia归纳总结

起初 Vue3.0 暴露变量必须 return 出来,template中才能使用; Vue3.2 中 只需要在 script 标签上加上setup 属性,组件在编译的过程中代码运行的上下文是在 setup() 函数中。所有ES模块导出都被认为是暴露给上下文的值,并包含在setup() 返回对象中。一、Vue文件结构<template>// Vue2中,template标签中只能有一个根

文章图片
#vue.js#javascript
Vue Element UI 自定义描述列表组件

效果图写在前面写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格。像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个。实现哪些功能1、每行的高度根据改行

#javascript#html
vue-quick-calendar—Vue超实用日历组件(带示例图,注释超详细~)

效果图效果图如下,支持标记日期、点击日期、切换月份,复制即用,本示例为PC端,移动端请自行修改样式哦~一、Calendar组件代码,预处理器使用SCSS<template><section class='m-calendar' :style="dateStyle"><!-- 切换月份 --><header class='changeMonth'>&l

#html
Vue自定义全局弹窗组件

写在前面页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了效果图弹窗组件新建一个弹窗的组件——popup.vue<template><transition name='fade'><!-- 蒙版 -->...

#前端
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="(

文章图片
#动画#css#vue.js
    共 12 条
  • 1
  • 2
  • 请选择