uniapp产品规格弹窗组件

Vue.js实现动态规格弹窗组件实例

最新推荐文章于 2024-11-15 16:08:32 发布

原创

最新推荐文章于 2024-11-15 16:08:32 发布 · 647 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #开发语言

本文详细介绍了如何在Vue应用中创建并使用Mypopup组件，包括全局注册、子组件模板编写、props传递以及数据绑定和事件处理。展示了如何通过watch和methods来控制组件状态和响应用户操作。

1.效果在这里插入图片描述
2.创建一个Mypopup组件

3.全局组件使用（打开main.js添加以下代码）

import Mypopup from '@/components/Mypopup/Mypopup.vue'
Vue.component('Mypopup',Mypopup)

4.子组件

<template>

	<!-- 规格-模态层弹窗 -->
	<view v-if="newSpecClass=='show'">
	<view class="popup spec" :class="newSpecClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
		<!-- 遮罩层 -->
		<view class="mask"></view>
		<view class="layer attr-content" @click.stop="stopPrevent">
			<!-- 关闭图标 -->
			<view class="closeIcon">
				<u-icon name="close" color="#666" size="20" @click="close"></u-icon>
			</view>
			<view class="a-t">
				<image src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg">
				</image>
				<view class="right">
					<text class="price">¥328.00</text>
					<text class="stock">库存：188件</text>
					<view class="selected">
						已选：
						<text class="selected-text" v-for="(sItem, sIndex) in newSpecSelected" :key="sIndex">
							{
  
  {sItem.name}}
						</text>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in specList" :key="index" class="attr-list">
				<text>{
  
  {item.name}}</text>
				<view class="item-list">
					<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id"
						:key="childIndex" class="tit" :class="{selected: childItem.selected}"
						@click="selectSpec(childIndex, childItem.pid)">
						{
  
  {childItem.name}}
					</text>
				</view>
			</view>
			<!-- 数量 -->
			<view class="count">
				数量
				<view>
					<u-number-box v-model="newCartNum" @change="valChange" :min="1">
					</u-number-box>
				</view>
			</view>
			<button class="btn