uni-app自定义组件（数据传递、自定义弹框、自定义图片选择）
效果图：
自定义组建的步骤：
1.在项目中创建目录：components
2.新建组件.vue 文件 例如：AddImgs.vue
3.组件文档结构
实例：
4.使用组件
实例：
5.接下来，我将其中图片选择的自定义组件代码粘贴出来
（1）.子组件：
<template name="AddImgs">
<view class="content">
<view class="image-wrap">
<block v-for="(itemImg ,index) in imageList">
<view class="item">
<image class="q-image" :src="itemImg" mode="scaleToFill" @click="previewImage(index)">
</image>
<!-- 移除图片的按钮 -->
<view class="q-image-remover">
<image class="deldete" src="../static/img_exit.png" @click="btnDeleteImg(index)"
mode="widthFix"></image>
</view>
</view>
</block>
<!-- 添加图片图标 -->
<view class="item" @click="btnAddImgs">
<image class="q-image" src="../static/add_img1.png" mode="scaleToFill">
</image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "AddImgs",
data() {
return {
imageList: [], //最终选中图片总数
tempImgList: [] //选中图片的临时文件数组
};
},
props: {
endImgList: {
type: Object,
value: {}
}
},
methods: {
// 选择图片
btnAddImgs: function() {
var _this = this
uni.chooseImage({
count: 9, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', "camera"], //从相册选择 、使用相机
success(res) {
console.log("++res++ " + JSON.stringify(res.tempFilePaths))
_this.tempImgList = res.tempFilePaths
_this.imageList = _this.imageList.concat(_this.tempImgList)
_this.endImgList.list = _this.imageList
}
})
},
// 删除图片
btnDeleteImg: function(index) {
var _this = this
uni.showModal({
title: "删除",
content: "是否删除该选中的图片！",
confirmText: "删除",
success(res) {
if (res.confirm) { //删除
_this.imageList.splice(index, 1)
_this.endImgList.list = _this.imageList
}
}
})
},
// 图片预览
previewImage: function(index) {
var _this = this
uni.previewImage({
current: index,
urls: _this.imageList,
indicator: "number"
})
}
}
}
</script>
<style>
.deldete {
width: 28rpx;
position: absolute;
top: -56rpx;
right: 4rpx;
}
.q-image-remover {
width: 0;
height: 0;
border-top: 66rpx solid #bfde85;
border-left: 66rpx solid transparent;
position: absolute;
top: 0;
right: 0;
}
.q-image {
height: 220rpx;
width: 100%;
}
.item {
position: relative;
height: 220rpx;
width: 30%;
margin-left: 2.5%;
margin-top: 20rpx;
}
.image-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 95%;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
</style>
（2）.父组件：
<template>
<view>
<addImgs :endImgList="endImgList"></addImgs>
<view class="show-imgs">
<image class="img" v-for="imgurl in curImgsList" :src="imgurl" mode="scaleToFill"></image>
</view>
<button class="button" @click="btnShowContent">提交数据</button>
</view>
</template>
<script>
import addImgs from "../../components/AddImgs.vue"
export default {
components: {
// 注册自定义组件
addImgs
},
data() {
return {
endImgList: {},
curImgsList: []
}
},
methods: {
btnShowContent: function() {
var _this = this
// 监听选择图片路径
console.log("选择图片的个数 index = " + _this.endImgList.list.length)
console.log("选择图片的路径集合 endImgList = " + JSON.stringify(_this.endImgList))
_this.curImgsList = this.endImgList.list
}
}
}
</script>
<style>
.img {
width: 30%;
margin-left: 2.5%;
height: 220rpx;
margin-top: 20rpx;
}
.show-imgs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 20rpx;
}
.button {
width: 94%;
margin-left: 3%;
margin-top: 20rpx;
background-color: #007AFF;
color: white;
font-size: 36rpx;
position: fixed;
bottom: 30rpx;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
page {
background-color: #FFFFFF;
}
</style>
最后两Demo下载地址贴出来，用得到的伙伴可以去下载，直接运行看效果
uni-app自定义组件（数据传递、自定义弹框、自定义图片选择）相关推荐
- 七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- 组件、局部的组件、表行组件、组件数据传递
组件:基础的基础 知识点 组件(Component,Portlet) 组件 组件就是页面上的一小块区域内容,完成一个小的页面功能,请参照视频第六课. 综合例 <div id="myAp ...
- vue 同页面不同组件数据传递
不用 vuex 同页面不同组件数据传递,用vuex的这篇文章可以忽略! 直接举例: 一个页面有两个组件,其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递 ...
- vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
- angular 自定义组件_如何创建Angular 6自定义元素和Web组件
angular 自定义组件 by Prateek Mishra 通过Prateek Mishra 如何创建Angular 6自定义元素和Web组件 (How to create Angular 6 C ...
- SwiftUI 跨组件数据传递
Python实战社群 Java实战社群 长按识别下方二维码,按需求添加 扫码关注添加客服 进Python社群▲ 扫码关注添加客服 进Java社群▲ 作者: Cyandev, iOS 和 MacOS 开 ...
- Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
- react中父子组件数据传递，子组件之间的数据传递
首先有三个js文件,index.js(父组件) baseForm.js(子组件) etable.js(子组件) 在index.js中定义一个arr数组,传给BaseForm组件 import Reac ...
- 利用layer实现MVC页面数据互交提示弹框
需求说明: 一个表单页面,点击提交之后,进入后台进行一系列数据交互,然后将交互信息返回至页面中,并以弹框形式展示 应用场景: 添加.修改.删除数据后,返回数据操作是否成功,以及一些其他信息 前期准备: ...
最新文章
- 2010年5月blog汇总:OpenExpressApp、其他
- 全球最大中文单体模型来了！2600亿参数，AI产业规模化应用可期
- 日期DatePicker与时间TimePicker控件
- AD4003 VHDL设计及仿真
- python中反斜杠b_Python bytes 反斜杠转义问题解决方法
- 自动检测技术学习心得体会_国培计划（2020）—学校管理团队信息化领导力提升培训心得体会...
- 枚举变量的重定义问题
- kvm最小磁盘大于等于5G
- QTP自动化测试—用户登录
- [NOI2016]优秀的拆分
- java学习视频 java常用23种设计模式
- [算法]详解关键路径算法
- 一款多核架构GPU IP有多达33种配置！Imagination要守住移动市场攻向云端
- 2、SpringBoot接口Http协议开发实战8节课（7-8）
- 趣闻-如何下载知乎视频
- CSV文件打开乱码解决方法
- 【狂神说Java】视频笔记
- autocad.net通过支持文件搜索路径查找文件
- Android 基础知识系列之 Intent 常用方法
- PHP基础篇 php接口interface到底有什么用？