我爱海鲸

uniapp学习之组件

我爱海鲸 2024-04-08 18:24:36 前端

简介vue3、组件、滑块验证、图形组件、mitt、组件之间的传值

1、相关组件的开发

首先我们在components中创建一个vue文件（注意创建同名文件夹）

z-input.vue组件

<template>
	<view>
		<input :maxlength="props.maxLength?props.maxLength:Infinity"  :value="content" @input="changeHd"   />
		<view v-if="props.maxLength">
		{{content.length}}/{{props.maxLength}}
		
		</view>
		<text v-if="content.length" @click="clear" >x</text>
	</view>
</template>

<script setup>
	import {ref,nextTick,defineEmits,defineExpose} from 'vue'
	const emits = defineEmits(["update:modelValue","clear","update"])
	 const props = defineProps({
		 // 长度
		 "maxLength":{
			 type:[Number,String],
			 default:"",
			 required: false
		 },
		 // 默认值
		 "modelValue":{
			 type:String,
			 default:"",
			 required: false
		 },
		 "value":{
			 type:String,
			 default:""
		 }
	 })
	 // 内容
	 var defaults = props.modelValue||props.value;
	 if(props.maxLength){
		 defaults = defaults.slice(0,props.maxLength);
	 }
	 // 默认值
	 const content = ref(defaults)
	 // 当表单发生变化时候
	 const changeHd = e=>{
		 // 获取表单截取的值
		 var str = e.detail.value.slice(0,props.maxLength)
		 // 更新第一次表单
		 content.value = e.detail.value;
		 emits("update:modelValue",content.value)
		 emits("update",content.value)
		 if(props.maxLength){
			 nextTick(()=>{
				// 第一次更新完更新第二次
				// content.value=str;
			})
		 }
			 
		
	 }
	 function clear(){
		 content.value = "";
		 emits("update:modelValue",content.value)
		 emits("clear",content.value)
	 }
	 // 暴露一个clear方法让父组件可以通过ref调用
	 defineExpose({
		 clear
	 })
 
</script>

<style lang="scss">

</style>

h-product-card.vue 组件

<template>
	<view class="largeCard">
		<image :src="largeCard.backgroundImage.url"></image>
		<view class="info">
			<view class="priceTitle">
				<view class="titles">{{largeCard.productName}}</view>
				<view class="price">￥{{largeCard.price.text}}</view>
				
			</view>
			<view class="btn"> 
				{{largeCard.buttonText.text}}
			</view>
		</view>
	</view>
</template>

<script setup>
 const {largeCard}  = defineProps({
	 "largeCard":{type:Object,default(){return({})}}
 })
</script>

<style lang="scss" scoped>
	.largeCard{
		padding: 20rpx;
		position: relative;
		image{
			width: 710rpx;
			height: 710rpx;
			border-radius: 12rpx;
		}
		.info{
			position: absolute;
			width:710rpx;
			left:10rpx;
			bottom: 50rpx;
			color:#fff;
			display: flex;;
			padding: 30rpx;
			justify-content: space-between;
			box-sizing: border-box;
		}
		.price{
			font-size: 20rpx;
		}
		.btn{
			color:#333;
			background-color: #fff;
			display: inline-block;
			padding: 0 30rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 64rpx;
		}
		
	}
</style>

然后再pages中创建一个页面进行调用：

<template>
	<view>
		 <view class="title">组件</view>
		 <z-input :max-length="10" v-model="msg"  ></z-input>
		 <z-input :max-length="10" 
		 :modelValue="msg" 
		 @update:modelValue="msg=$event"  ></z-input>
		 <z-input :value="'默认value'" ref="inpRef"></z-input>
		 <view>{{msg}}</view>
		 <button @click="clean">清除</button>
	</view>
</template>
<script setup>
import { ref } from "vue";
const msg = ref("你好uni-app")
const inpRef = ref();
function clean (){
	// 通过ref的方式调用子组件的clear方法
	// 子组件必须暴露clear ，父组件才能调用
	console.log(inpRef.value)
	inpRef.value.clear();
}

</script>

2023-09-13 start:

uniapp实现简易滑动验证码

end

2023-10-16 start:

数据选择组件：jp-select-plus

https://ext.dcloud.net.cn/plugin?id=14113

end

2023-10-17 start:

Vue3 setup语法糖的子组件调用父组件的函数

end

2023-11-14 start

滑动验证开源框架