vue 小项目总结 vant wangedtior

最新推荐文章于 2023-12-07 15:54:02 发布
原创 最新推荐文章于 2023-12-07 15:54:02 发布 · 267 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文主要分享了Vue开发中的常见问题及解决办法。包括div布局时margin-bottom失效、wangedtior样式重叠和加载渲染问题，针对这些问题分别给出了加空div、调整加载顺序等解决方法，还强调要保持代码整洁以方便维护。

1.  上一个div margin-bottom 失效 下面的div是position：fixed  底部固定的

 谷歌手机模式调试没有问题 真机失效  下面的列表总是被底部固定的评论框遮住 尝试padding-bottom 还是没有用

换一个思路 给加一个空的div设置一点点高度  在给上面的div加margin-bottom就成功了

2.   wangedtior样式问题  表情全部都重叠在一起 变成一个表情 是因为之前哪里加了position影响了布局  所以仔细一点

3.   wangedtior先在详情页定义一个没问题  后面又在首页定义一个 问题来了 加载不出来 没有渲染dom 就是两个div 也不能输入

原因是vue和wangedtior加载顺序的问题  所以可以设置一个settimeout的函数  等vue全部渲染完之后 再来创建wangedtior 就不会报错了

创建成功后还有一个报错 每次关闭在打开会重复创建所以会报错  需要定义一个状态 初始化才会创建

4.    保持代码整洁好维护 养成好习惯

再去监听DepartmentName和this.resData发生改变调用函数 更新placeholder

Exhalexujing
关注
精选资源
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码.zip
05-05
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码，较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目， 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作...
Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip
10-21
在这个“Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目”中，开发者利用这些技术来实现一个类似微信的移动记账应用程序，让用户可以在手机网页上方便地管理个人财务。 **Vue3.0**： Vue3.0是Vue.js框架的最新...
关于最近项目中使用vant的一些总结
火腿肠的博客
04-13 962
vantUi是有赞团队开发的一款针对于小程序及手机端的一款UI框架 使用时非常方便 但是其中一些bug也很多 把项目中遇到的坑及小tipes分享一下 供自己记忆同时也分享给大家 好好读文档 好好读文档 好好读文档 !important List 列表 list列表组件完全是全自动的 自动请求、自动删除loading、页面刷新自动更新。。。 总之在list中你只要做两件事： 在请求数据== 数据库数据 时给list一个finished状态 填写你所需要的请求函数 重用list导致的bug 在写如上代码
vue+vant移动项目总结（遇到的问题）
qq_39296854的博客
05-23 347
一、安装失败 sass 卸载 重新安装 二、移动端高斯模糊效果。 加兼容前缀-webkit-backdrop-filter: blur(5px); 三、预览功能 window.open(url),安卓可以预览，ios window.open失效问题。 判断一下，安卓机用window.open,ios 用 window.location.href. navigation(url) { let u = navigator.userAgent // android终端 let isAndroid
新建一个vue的vant项目
hjj_flowers的博客
01-06 3097
前提是已经安装了node.js. 首先得新建一个Vue项目：(这里只是一个大概的方法) 1.打开命令窗口，全局安装脚手架构建工具： npm install -g vue-cli 回车 2.命令行中运行命令 vue init webpack vantappdemo后回车（初始化一个完整版的项目） 。解释一下这个命令，这个命令的意思是初始化一个项目。最后的是项目名称自己根据项目内容来起 vue i...
从零搭建Vue-Vant项目
千月落
12-29 1120
在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。 1.安装 Vue Cli npm install -g @vue/cli 2.创建一个项目 vue create hello-world 3.安装 Vant 2 npm i vant -S main.js 加入下面代码 import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant) 4.增加路由模块 vue add r
vue中使用富文本编辑器 wangEditor
小白菜的博客
07-05 1158
一、 wangEditor 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费 http://www.wangeditor.com/index.html （1）、安装 npm install wangeditor 2、封装公用组件 editor.vue <template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar">
基于 Vue 2 + Vant UI 的移动端项目模板，集成了常用的开发配置和工具
12-25
基于Vue 2与Vant UI的移动端项目模板，是一个专门为移动端开发量身定做的解决方案，它结合了Vue.js这一流行的JavaScript框架和Vant UI这一轻量级的移动端组件库，旨在为开发者提供一个集成了常用开发配置和工具的...
精选资源
基于vite+vuex+vue-router+vant3.0的h5应用框架，开箱即用
06-21
【标题】: "基于vite+vuex+vue-router+vant3.0的h5应用框架，开箱即用" 这个标题所代表的知识点聚焦在一套现代化的前端开发框架组合，用于构建高效、便捷的H5（HTML5）应用程序。其中涉及到的核心技术包括： 1. **...
基于Vue2+VantUI组件的移动端商城完整项目
最新发布
10-27
基于Vue2框架和VantUI组件库所构建的移动端商城项目，就是这一追求的产物。 Vue2作为目前广泛使用的一个前端框架，以其轻量、灵活、高效的特点，成为许多前端项目的首选。它通过数据驱动和组件化的开发方式，使得...
vue的一个实战项目
06-16
vue的一个实战项目，比较适合初学者对原理的理解 也适合有一定项目经验的写法借鉴
WangEdtior富文本编辑器
pscool的博客
04-08 1234
WangEdtior官网，提供了vue2、vue3的安装方式>> vue2 安装wangEditor ArticleWang.vue
vue中使用wangEditor富文本编辑器
m0_46672972的博客
01-16 420
Vue中使用富文本编辑器
wangEeditor写入HTML,轻量级富文本编辑器wangEditor结合vue使用方法示例
weixin_30991735的博客
06-05 1145
1、安装使用npm下载： `npm install wangeditor`2、 创建实例(1)基本用法：import e from 'wangeditor'export default {name: 'editor',mounted () {var editor = new e('#editor')editor.customconfig.onchange = (html) => {this....
Vue3-wangeditor富文本编辑器的使用
weixin_43791884的博客
12-08 1529
wangeditor-vue3的使用
Vue中使用 WangEditor 编辑器的详细教程
qq_42704945的博客
08-08 8442
在富文本编辑器中，你可以通过自定义样式和配置来定制编辑器的外观和行为。以下是一个示例，展示了如何自定义编辑器的样式和配置：// 自定义编辑器的样式 editor . config . height = 400;// 配置编辑器的相关选项 editor . config . uploadImgServer = '/api/upload';// 初始化编辑器 editor . create();} , };
Wang Editor富文本编辑器Vue组件开发
lindaxia1026的博客
12-07 2662
vue2简单修改可使用的wangEditor组件分享
wangEditor富文本编辑器-vue使用链接
weixin_45529161的博客
12-01 801
官网 http://www.wangeditor.com/index.html 使用文档 http://www.wangeditor.com/doc/ github代码for vue https://github.com/wangeditor-team/wangEdior-with-vue 使用参考 https://www.jianshu.com/p/52852d39f869 https://www.cnblogs.com/zzz-knight/p/12156438.html ...
vue中使用wangeditor富文本编辑器
11-19 6798
需要知道富文本编辑器是所见即所得的文本编辑器，简单来说就是文本上面写的行内样式，那我们该怎样保存这些行内样式呢，在这里我是写成了组件的形式。return中写上如下代码，需要注意的时上传图片后，后端必须返回url图片的链接，否则编辑器中不会显示图片。研究一番发现弱国想要怎加或者修改编辑器的功能首先要获取这个功能的key。到这里其实基本功能已经实现了，那我们怎么保存，编辑器中的内容呢。这个时候编辑器的功能已经实现了 如下图。这个时候就可以看到每个功能的key了。就可以实现你想要的功能了，如下图。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值