简单的绑定发布事件

在绑定事情之前,我们需要对我们的需求进行分析;判断我们是否需要同时存在条件。

发布动态的时候,分为以下三种情况:

① 输入了标题,没有图片,可以发布动态
②输入了图片,没有标题,也可发布动态
③如果只输入图片,或者标题,无法发布,需要两者都同时具备,才可以发布动态

目录

一、实现思路

二、实现步骤

        ①view部分展示

        ②JavaScript 内容

        ③css中样式展示

三、效果展示

四、小结 + 注意事项


一、实现思路

        1、将标题内容布局完成,给div中的发布绑定事件

二、实现步骤

        ①view部分展示

        

<template><view class="public"><view class="upload-imgs"><view style="padding: 32rpx 0;color: #333;font-weight: bold;">内容</view><!-- 图片的数量--><!-- <view style="color: #999;">{{ fileList.length }}/6</view> --></view><view><view class="goods-desc"><!-- 文本域  articleContent:绑定--><u--textarea v-model="articleContent" placeholder="请输入我的想法..." border="none" height="100"maxlength="-1" fontSize="28rpx" class="u--textarea"></u--textarea></view></view><!-- 上传图片 fileList:图片列表 --><view class="imgs-list"><u-upload :fileList="fileList" name="1" :maxCount="9" previewImage width="70px" height="70px"@afterRead="afterRead" @delete="deletePic" multiple :capture="['album', 'camera']" accept="image":sizeType="['camera','album']"><image src="../../static/other/upload-default.png" mode="aspectFill"style="width: 70px;height: 70px"></image></u-upload></view></view><!-- 发布按钮--><view class="company-btn"><view class="talk-btn" @click="talk">发布</view></view>
</template>

        ②JavaScript 内容

        此文件由于效果展示冲突的原因,部分内容已注释,如需看效果,则可取消注释观看!

<script>import {send} from '@/XXX/XXX/XXX.js'  //引入js的内容export default {data() {return {articleContent: '',fileList: [],}},methods: {// 输入内容 绑定了发布async talk() {/*无论是标题文字为空,还是图片数量为0,都不可执行*//* 标题内容为为空 则不执行*/// if (this.articleContent === '' || this.articleContent === null) {//if (this.articleContent == '') {// 	uni.showToast({// 		title: '请输入内容!',// 		icon: 'error',// 		duration: 2000,// 	});// 	return;// }/*如果没有图片,请上传图片 if (this.fileList.length <= 0) 图片数量为0或者小于0 都不可执行*/// if (this.fileList.length <= 0) {// 	uni.showToast({// 		title: '请上传图片!',// 		icon: 'error',// 		duration: 2000,// 	});// 	return;// }/* if (this.fileList.length > 0 || this.articleContent !== '')图片为0 或者 标题内容为空,都可以执行发布,但是必须有一方,有内容,负责展示错误*/if (this.fileList.length > 0 || this.articleContent !== '') {let arr = this.fileList.map(v => v.img);let data = {articleContent: this.articleContent,articleImg: arr}// console.log(this.articleContent);// console.log(this.fileList)let res = await send(data);console.log(res, 'res')// 发布的内容 // if (res.code === 200) {uni.showToast({//title:res.msg,title: '发布成功',icon: 'success',duration: 2000,});// 同步执行,提示框还没有弹出就跳转了setTimeout(() => {uni.switchTab({url: '/pages/circle/circle'})}, 2000)} else {uni.showToast({title: '出错了~',icon: 'error',duration: 2000,});}},async afterRead(event) {// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式let lists = [].concat(event.file)let swiperListLen = this.fileList.lengthlists.map((item) => {this.fileList.push({...item,status: 'uploading',message: '上传中',})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)// console.log('result: ',result);let item = this.fileList[swiperListLen]this.fileList.splice(swiperListLen, 1, Object.assign(item, {status: 'success',message: '',url: result.urlTotal,img: result.urlImg}))swiperListLen++}// console.log(this.fileList,'fileList')},// 删除图片deletePic(event) {this.fileList.splice(event.index, 1)},uploadFilePromise(url) {let thta = thisreturn new Promise((resolve, reject) => {let a = uni.uploadFile({url: config.baseUrl + '/app/upload/image',  //上传图片的接口filePath: url,name: 'file',fileType: 'image',header: {'content-type': 'multipart/form-data'},success: (res) => {console.log('res: ', res);let data = JSON.parse(res.data)console.log('data: ', data);let urls = data.data.path //let img = data.data.urllet urlObj = {urlTotal: urls,urlImg: img}// console.log("dataxxx", url) console.log(thta.fileList, 'aaa');resolve(urlObj)},fail(err) {console.log(err);}});})},},}
</script>

        ③css中样式展示

                由于效果展示,所以page背景颜色被修改了,方便查看效果

<style>page {background-color: #f5f5f5;}
</style>
<style lang="scss" scoped>.public {background-color: #fff;padding: 24rpx;margin: 24rpx;border-radius: 8rpx;.upload-imgs {display: flex;align-items: center;justify-content: space-between;}.imgs-list {padding-bottom: 32rpx;display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;margin: 0 auto;}}.company-btn {position: fixed;bottom: 0;left: 0;z-index: 100;right: 0;display: flex;align-items: center;justify-content: center;height: 55px;background-color: #fff;padding-bottom: env(safe-area-inset-bottom); //适配 iPhone X 以上的手机.talk-btn {width: 640rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #f51515;border-radius: 80rpx;color: #fff;letter-spacing: 2rpx;}}
</style>

三、效果展示

  1. ① 输入了标题,没有图片,可以发布动态
  2. ②输入了图片,没有标题,也可发布动态
  3.  if (this.fileList.length > 0 || this.articleContent !== '') {  //发布  }

                 

  1. ③如果只输入图片,或者标题,无法发布,需要两者都同时具备,才可以发布动态
    1.   if (this.articleContent === '' ||  this.fileList.length <= 0) {  //发布  }

                    

四、小结 + 注意事项

       

  1. 提前的div中给我们需要执行的条件赋值
  2. 在js中使用定义好的对象或者数据值
  3. 判断我们需要的条件,进行组合;如果成功则执行,反之;

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

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

相关文章

清空缓存区的方法

fflush(文件指针) fflush()用于刷新相应文件的缓存区。 使用getchar()函数来清空标准输入缓存区 上面的fflush是一个函数,有些编译器不一定支持,这时候我们可以自己实现清空标准输入缓存区的操作。 代码示例: 使用scanf()的高级特性来清空标准输入缓存区 上面代码的意思是: …

GO 的 socks5代理 编写

这里学习一下 socks5 代理的编写 网上有很多 学习一下 go 语言实战入门案例之实现Socks5 - 知乎 滑动验证页面 socks5协议原理学习-腾讯云开发者社区-腾讯云 (tencent.com) 首先我们要了解一下socks5的代理方式 socks5 是基于 认证建立连接转发数据 所形成的代理 我们只…

Wireshark统计和可视化

第一章&#xff1a;Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧&#xff1a;过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较 第二章&#xff1a;网络协议分析 2.1 网络协议分析&#xff1a;TCP、UDP、ICMP等 2.2 高级协议分析&#xff1a;HTTP…

LLMs推理框架总结

总结一下这些框架的特点&#xff0c;如下表所示&#xff1a; LLM推理有很多框架&#xff0c;各有其特点&#xff0c;下面分别介绍一下表中七个框架的关键点&#xff1a; vLLM&#xff1a;适用于大批量Prompt输入&#xff0c;并对推理速度要求高的场景&#xff1b;Text generat…

P1011 [NOIP1998 提高组] 车站 ---Java

主打一个枚举找规律... 站台123456...上车ababa2b2a3b3a5b下车bbaba2b2a3b人数aa2a2ab3a2b4a4b 上车这一行: 观察a的系数&#xff08;假设是dx[i]&#xff09;可知: dx[i] dx[i-1] dx[i-2] b的系数&#xff08;假设是dy[i]&#xff09;可知: dy[i] dy[i-1] dy[i-2] 人数…

黑豹程序员-vue3获取拖动div后的坐标

<script lang"ts" setup> import {ref, reactive, onMounted} from vuelet startclientX ref(0) // 元素拖拽前距离浏览器的X轴位置 let startclientY ref(0) //元素拖拽前距离浏览器的Y轴位置 let elLeft ref(770) // 元素的左偏移量 let elTop ref(220) …

android的bundle的常用函数(ChatGPT)

在 Android 中&#xff0c;Bundle 是一个用于保存和传递数据的容器类&#xff0c;它被广泛用于在不同组件&#xff08;如 Activity、Fragment&#xff09;之间传递数据。以下是一些 Bundle 中常用的函数&#xff1a; putXXX 系列方法&#xff1a; 用于将各种类型的数据放入 Bun…

C语言-> 文件操作(函数满屏)

系列文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,数据结构,函数-CSDN博客 目的&#xff1a;学习文件操作&#xff0c;即…

林杰:程序员依然是草根跨越阶级的最佳途径之一 | 程客有话说

《程客有话说》是我们最新推出的一个访谈栏目&#xff0c;邀请一些国内外有趣的程序员来分享他们的经验、观点与成长故事&#xff0c;尝试建立一个程序员交流与学习的平台&#xff0c;也欢迎大家推荐朋友或自己来参加我们的节目&#xff0c;一起加油。 本期我们邀请的程序员林…

2023-12-19 二叉搜索树的最小绝对差和二叉搜索树的众数和二叉树的最近公共祖先

二叉搜索树的最小绝对差 关键信息&#xff1a;二叉搜索树表明了树有序的&#xff01;遇到在二叉搜索树上求什么最值啊&#xff0c;差值之类的&#xff0c;就把它想成在一个有序数组上求最值&#xff0c;求差值 # Definition for a binary tree node. # class TreeNode: # …

微信私域管理工具如何帮助企业提升销售业绩?

现如今&#xff0c;微信已经从社交通讯软件&#xff0c;慢慢被默认为常规办公软件&#xff0c;工作沟通、业务洽谈、网络会议等都在微信上进行&#xff0c;完全变成职场首选的社交工具。 但受限于微信平台&#xff0c;许多公司在微信私域营销方面面临诸多挑战。 微信私域管理工…

调用第三方http接口 hutool工具类

1、引入依赖 <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.8.0.M2</version> </dependency>2、请求组装 String params"<BSXml>" " <MsgHeader>&…

Leetcode—16.最接近的三数之和【中等】

2023每日刷题&#xff08;六十四&#xff09; Leetcode—16.最接近的三数之和 实现代码 class Solution { public:int threeSumClosest(vector<int>& nums, int target) {sort(nums.begin(), nums.end());int s 0;int diff INT_MAX / 2;int n nums.size();int a…

四级作文考前积累(个人蒟蒻向)

观点类 With the giant leap of the economy,nowdays the youngsters have different opinions upon gratuation Some think that....,while others think that.... Personally ,i perfer the former,the letter. The following reasons can account for my preference. Fi…

计算机试题

选择题 在计算机中&#xff0c;RAM代表什么&#xff1f; A) Random Access MemoryB) Read-Only MemoryC) Real-time Access MemoryD) Remote Access Memory答案&#xff1a;A) Random Access Memory TCP和UDP之间的主要区别是什么&#xff1f; A) TCP是面向连接的&#xff0c;U…

光伏收益计算工具:助力可再生能源发展的关键

随着全球对可再生能源需求的不断增加&#xff0c;光伏发电作为清洁、可再生的能源形式&#xff0c;越来越受到人们的关注。然而&#xff0c;要评估光伏系统的经济效益和投资回报&#xff0c;需要一个准确的光伏收益计算工具。 光伏收益计算工具是一种专门用于计算光伏系统发电量…

Ridge Lasso Regression解决线性回归的过拟合(Overfitting)(基于波士顿房价预测)

目录 介绍&#xff1a; 1、过拟合 2、Lasso regression 3、 Ridge regression 4、 Lasso regression 和 Ridge regression一定优于LinearRegression吗 一、 Linear Regression 二、Ridge Regression 三、Lasso Regression 四、Ridge Regression和Lasso Regression 五、…

Linux常用命令详解

文章目录 Linux常用命令详解一、Shell&#xff08;执行的任务—翻译&#xff09;二、Linux命令1、Linux命令的分类内部命令与外部命令的区别命令执行过程 2、Linux命令行的格式通用的命令行使用格式 3、编辑Linux命令行的辅助操作4、获得命令帮助的办法内部命令help命令的“--h…

100GPTS计划-AI写作VersatileWriter

地址 https://chat.openai.com/g/g-zHErU9z9m-versatile-writer https://poe.com/VersatileWriterGPT 测试 翻译:要求将给定的英语语句翻译成中文。 总结:给出一段文本,要求进行概括和总结。 问答:根据给定段落,提出相关问题并给出答案。 推理:给出前提,进行多步推理并得…

2024吃透软件测试面试最全八股文攻略,一周学完让你面试少走99%的弯路

1. 请自我介绍一下(需简单清楚的表述自已的基本情况&#xff0c;在这过程中要展现出自信&#xff0c;对工作有激情&#xff0c;上进&#xff0c;好学) 面试官您好&#xff0c;我叫###&#xff0c;今年26岁&#xff0c;来自江西九江&#xff0c;就读专业是电子商务&#xff0c;…