vue
包含框架原理、最佳实践、经验分享
小唐童
用舍由时,行藏在我
展开
-
textArea高度自适应最优解决方案
问题:需求中form表单输入框需要根据输入内容动态调整输入框高度。方案:动态获取textarea元素的scrollHeight属性值,设置到textarea元素的style.height属性中。这里需要注意的是在获取scrollHeight属性值之前应将height设置为auto,否则获取的高度会受到元素padding等属性值的影响。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF原创 2021-08-14 20:50:29 · 1259 阅读 · 0 评论 -
关于v-if 和 v-for 同时用在同一个元素上的解决方案
vue实践关于v-if 和 v-for 同时用在同一个元素上的解决方案关于v-if 和 v-for 同时用在同一个元素上的解决方案对于v-if和v-for需要同时用到同一个元素上时,Vue官方文档是不建议我们这样做的,同时对于可能出现的情况给出了如下解决方案:为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。为了避原创 2021-07-20 12:24:47 · 1034 阅读 · 0 评论 -
VScode快速生成vue3代码模板
首先在vscode编辑器中打开,【文件】–>【首选项】–>【用户片段】–>【新代码片段】–> 取名vue.json 确定把下列代码放进去{ "Print to console": { "prefix": "vue3", "body": [ "<template>", " <div></div>", "</template>", "", "&..原创 2021-03-29 11:22:24 · 9612 阅读 · 3 评论 -
H5实现在线签名,解决页面滑动的问题
原理实现在线签名功能,主要是依托canvas技术。首先生成画布、初始画笔对象,然后为画布添加touch事件监听,通过事件触发绘制文字。保存时通过canvas的toDataURL方法生成base64图片文件进行下一步操作。基于vue的demo实现<template> <div class="page-content"> <header title="用户需求签名"> <button slot="right" @click="handel原创 2020-12-17 18:12:44 · 1895 阅读 · 3 评论 -
vue模拟原生页面跳转的最优解决方案
vue单页面应用模拟原生页面跳转的最优解决方案为实现APP内嵌H5开发页面与原生页面实现同样的跳转效果,我们利用Vue 提供了 <transition> 组件在单页面应用下来模拟原生的页面跳转。因为项目需要用<keep-alive> 包裹缓存不活动的组件实例,所以原有App.vue中代码是这样的: <template> <div id="app"> <keep-alive> <rou原创 2021-01-05 20:24:25 · 892 阅读 · 1 评论 -
基于vue-cropper插件实现图片截取上传组件封装
基于vue-cropper插件实现图片截取上传组件封装需求场景:后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用Ant Design Vue组件库搭配vue-cropper插件进行封装实现如下html<template> <div> <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-up原创 2020-07-23 17:15:03 · 711 阅读 · 0 评论