uniapp 使用第三方UI库 uview-plus

news2024/11/21 2:25:06

前言:开发uniapp时,有些功能,使用UI库提供的更加方便和简单。所以我就搜索uniapp 的UI库,根据网上和uniapp的插件市场,确定使用uviewUI库。 

uniapp项目使用的vue2   ----->  对应  uView

 uniapp项目使用vue3    ----->    对应 uview-plus

一、使用Album相册功能

我用这个功能开发类似动态、朋友圈 那种的列表。

使用起来,目前存在一个问题是,

我想实现的功能是,一排展示3张图片 或 2张图片时, 图片的大小可以自定义。

解决问题方式1:根据图片数量判断,设置multipleSize大小,但排列的方式会变得奇怪。

解决问题方式2:通过rowCount 控制一行展示图片的数量,就不能定义图片大小。

二、 picker  选择器

在使用u-picker时,uniapp app端 数据不显示,后来发现问题,它的数据格式是双层数组

 let columns = [ ['中国', '美国', '日本'] ];

三、input输入框 和 Textarea 文本域

在开发使用时,

第一,border="surround" 边框无法显示,

第二,使用下面例子,就会报value等未定义的错误,很奇怪,即使添加value属性也报错

<u--input
	    placeholder="请输入内容"
	    border="surround"
	    clearable
></u--input>
Property "value" was accessed during render but is not defined on instance.

后来我就用html的input输入框自己写样式

四、使用textarea

在开发时,模仿微信公众号文章的回复功能,具体功能描述如下

(1)通过手机软键盘回车,可以自增高
(2)限制增高的最大高度

 解决办法如下

<u--textarea 
    :style="{height: setTextAreaHeight+'rpx';overflow-y: 'auto'}" 
	@linechange="handleLinechange" 
	:autoHeight="true"
	v-model="replyContent" 
>
</u--textarea>

(1)通过autoHeight设置了自增高后,还要通过style来设置height高度,不然自增高和height默认高度会冲突,导致输入完内容后自增高就会变成默认高度

(2)给textarea设置 overflow-y: auto属性,这样限制自增高后,就会产生滚动条

(3)通过linechange事件,来设置自增高的高度 和 限制
 

let setTextAreaHeight = ref(40); //回复框的高度设置
	const handleLinechange = (e)=>{
		if(e.detail.height<=80){
			setTextAreaHeight.value = e.detail.height*2;
		}else{
			setTextAreaHeight.value = 160; //高度最终限制在160rpx,超出就会产生滚动条
		}
	}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408728.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

css3渐变色

作用&#xff1a;让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类&#xff1a;分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法&#xff1a;background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction…

Vue的事件处理,点击事件

目录 1、 v-on:click 绑定属性示例&#xff1a; 2、 v-on:click 绑定方法示例&#xff1a; 3、 v-on:click 绑定特殊变量示例&#xff1a; 4、事件处理的修饰符 按键修饰符&#xff1a; v-model表单修饰符&#xff1a; v-bind指令修饰符&#xff1a; 监听DOM事件使用的是v…

vue+mysql实现前端对接数据库

下载引入相关依赖 1、cnpm install --save mysql 2、cnpm install --save axios 3、cnpm install --save body-parser 4、cnpm install --save express 5、cnpm install --save crypto 在main中引入axios import Axios from axios Vue.prototype.$axios axios 配置连接…

使用python搭建一个简易的Web服务

介绍 简单的说&#xff0c;web服务器就是机器上监听了本地的IP和端口的一个进程&#xff0c;当有客户的请求进来时&#xff0c;它会响应客户的请求并返回相应的信息。客户端和服务端之间的通信基于HTTP协议&#xff0c;客户端可以是浏览器或者任何支持HTTP的应用。我们平时访问…

vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

1、自定义布局 查阅element ui的头像上传功能&#xff0c;发现是点击头像位置才可以上传&#xff0c;那我们可不可以点击头像外部的按钮来上传头像呢&#xff1f; element ui效果图&#xff1a; 目标效果&#xff1a; 在实…

OpenAI 成近期顶流团队?如何使用 OpenAI 和 Node.js 构建 AI 图像生成器?

摘要: 12月7号&#xff0c;知名人工智能研究机构 Open AI 在Youtub上发布视频介绍使用OpenAI 和 DALL-E 模型创建一个网络应用程序&#xff0c;该应用程序将根据输入的文本从头开始生成图像。https://www.youtube.com/watch?vfU4o_BKaUZE 前言&#x1f496; 大家好&#xff0…

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

文章目录1. 复现错误2. 分析错误3. 解决错误4. 其他方法解决该错误1. 复现错误 在搭建vue-cli环境&#xff0c;用nginx做代理服务器&#xff0c;访问时却显示&#xff1a;Invalid Host header。 2. 分析错误 知其然&#xff0c;知其所以然&#xff0c;我们在解决该问题之前&am…

支付宝手机网站H5支付

手机网站支付产品介绍 &#xff5c; 网页&移动应用 为方便商家在移动端网页应用中集成支付宝支付功能&#xff0c;支付宝提供了手机网站支付能力。 流程简介&#xff1a;商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块&#xff0c;商家网页会跳转…

【报错】npm install --save core-js/modules/es.array.push.js

代码写着写着&#xff0c;一运行突然就报了下面这么个错误 一开始没细看&#xff0c;以为是自己代码逻辑哪里写错&#xff0c;但是检查了一遍下来&#xff0c;好像没啥问题呀 然后后面就跟着执行了一下npm install --save core-js/modules/es.array.push.js 哦豁&#xff0c;还…

【自学前端】我只学这些够吗?好难

表弟也终于到了马上要大学毕业的时间&#xff0c;然后听说我在做前端开发工作&#xff0c;就想着能不能和我一起搞一搞。 我说这又不是小时候一起去地里抓兔子&#xff0c;说走就一起走&#xff0c;拿上工具一起走了&#xff0c;这得学啊。看着表弟期待的眼神&#xff0c;他问了…

【CTF】buuctf web 详解(持续更新)

buuctf web[HCTF 2018]WarmUp[极客大挑战 2019]EasySQL[极客大挑战 2019]Havefun[强网杯 2019]随便注[ACTF2020 新生赛]Include[SUCTF 2019]EasySQL[极客大挑战 2019]Secret File[ACTF2020 新生赛]Exec[极客大挑战 2019]LoveSQL[GXYCTF2019]Ping Ping Ping[极客大挑战 2019]Kni…

从零开始的「校园商铺」毕设全栈开发—开题报告

☕前言&#xff1a; 不知不觉已经在大学中度过了四年时光&#xff0c;春暖花开、桃红柳绿&#xff0c;又到了一年毕设季&#xff0c;恰逢〖新星计划2023〗活动正好有毕设相关的创作方向&#xff0c;号称两小时带我搞定毕设&#xff0c;像我这样喜欢白嫖&#xff08;&#x1f61…

【小程序从0到1】宿主环境|WXML|WXSS|JS逻辑交互

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…

cropperjs的简单使用

前言 最近发现了cropperjs&#xff0c;可以用于裁剪图片&#xff0c;特点来踩一下坑。 官方文档 参考文章&#xff1a; cropper.js 裁剪图片并上传&#xff08;文档翻译demo&#xff09; 1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端 可以仿gitee的头像上传…

JavaScript WebAPI

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录DOM 基本概念选中页面元素事件初识事件三要素操作元素获取/修改元素内容获取/修改元素属性获取/修改表单元素属性valuetype获取…

JS小知识,如何将 CSV 转换为 JSON 字符串

大家好&#xff0c;今天和大家聊一聊&#xff0c;在前端开发中&#xff0c;我们如何将 CSV 格式的内容转换成 JSON 字符串&#xff0c;这个需求在我们处理数据的业务需求中十分常见&#xff0c;你是如何处理的呢&#xff0c;如果你有更好的方法欢迎在评论区补充。一、使用 csvt…

手写防抖和节流函数

一、认识防抖debounce函数 我们用一副图来理解一下它的过程&#xff1a; 当事件触发时&#xff0c;相应的函数并不会立即触发&#xff0c;而是会等待一定的时间&#xff1b;当事件密集触发时&#xff0c;函数的触发会被频繁的推迟&#xff1b;只有等待了一段时间也没有事件触…

【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 上篇文章讲解了TypeScript部分高级类型 详细内容请阅读如下&#xff1a;&#x1f53d; 【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可…

nvm安装node,配置npm 、cnpm

nvm 是什么&#xff1f; nodejs的版本管理工具&#xff0c;为了解决node.js各种版本存在不兼容现象可以通过它安装和切换不同版本的node.js 重要&#xff1a;完全卸载本地node&#xff0c; 下载链接 卸载完成之后&#xff0c;点击nvm-setup.exe安装版&#xff0c;直接运行n…

不是吧,阿sir,还有人不会制作影院订票系统前端页面吗?(拿来就用)

影院订票系统前端页面&#x1f389;案例分析&#x1f389;详细设计✨座位数据与样式定义✨座位的事件处理及相关的代码✨监听与数据格式化✨电影信息展示&#x1f389;动态操作演示图&#x1f389;源码&#xff08;附图片素材&#xff09;引言&#xff1a;大家好&#xff0c;欢…