ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

uniapp 自定义组件

2021-09-04 15:58:31  阅读：188  来源： 互联网

标签：uniapp prize 自定义 no color text list num 组件


先上图我们已抽奖为例：
在这里插入图片描述

1. 完整代码：

<template>
	<view class="content">

		<view class="base_all_center " style="width: 90vw; height: 90vw; border-radius: 5px;z-index: 10; background-image: url(../../static/img_cj_back.png);
			 background-repeat:no-repeat;background-size: 100% 100%;">
			<view class="base_column" style="width: 80%; height: 80%;">
				<!-- 第一行 -->
				<view class="base_row base_cell">
					<view class="base_all_center base_column cell_child" :style="{'background-color':color_one}">
						<image :src="list_prze[0].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[0].prize_text}}</text>
					</view>

					<view style="width: 5%; height: 100%;"></view>

					<view class="base_all_center base_column cell_child" :style="{'background-color':color_two}">
						<image :src="list_prze[1].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[1].prize_text}}</text>
					</view>

					<view style="width: 5%; height: 100%;"></view>

					<view class="base_all_center base_column cell_child" :style="{'background-color':color_three}">
						<image :src="list_prze[2].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[2].prize_text}}</text>
					</view>
				</view>


				<!-- 第二行 -->
				<view style="width: 100%; height: 5%;"></view>
				<view class="base_row base_cell">
					<view class="base_all_center base_column cell_child" :style="{'background-color':color_eight}">
						<image :src="list_prze[7].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[7].prize_text}}</text>
					</view>

					<view style="width: 5%; height: 100%;"></view>

					<view class="base_all_center base_column cell_child"
						style="background-color:#FF3A58; border-radius: 5px;" @click="luckDraw()">
						<text style="color: #FFFFFF; font-size: 26px;">抽奖</text>
					</view>

					<view style="width: 5%; height: 100%;"></view>

					<view class="base_all_center base_column cell_child" :style="{'background-color':color_four}">
						<image :src="list_prze[3].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[3].prize_text}}</text>
					</view>
				</view>

				<!-- 第三行 -->
				<view style="width: 100%; height: 5%;"></view>
				<view class="base_row base_cell">
					<view class="base_all_center base_column cell_child" :style="{'background-color':color_seven}">
						<image :src="list_prze[6].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[6].prize_text}}</text>
					</view>

					<view style="width: 5%; height: 100%;"></view>

					<view class="base_all_center base_column cell_child" :style="{'background-color':color_six}">
						<image :src="list_prze[5].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[5].prize_text}}</text>
					</view>

					<view style="width: 5%; height: 100%;"></view>

					<view class="base_all_center base_column cell_child" :style="{'background-color':color_five}">
						<image :src="list_prze[4].prize_img" class="cell_img"></image>
						<text class="cell_text">{{list_prze[4].prize_text}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyLuckDraw", // 控件名称
		props: { // 可配置的数据
			// 支持的数据类型
			// String
			// Number
			// Boolean
			// Function
			// Object
			// Array
			// Symbol

			time_once: { // 切换一个所需时间单位ms
				type: Number,
				default: 40
			},

			num_win: { // 中奖号码
				type: Number,
				default: 1
			},

			num_count: { // 一共转动几次
				type: Number,
				default: 7
			},

			is_random: { // 是否随机中间
				type: Boolean,
				default: true
			},

			list_prze: { // 数据
				type: Array
			}
		},

		data() {
			return {
				num_row: 1, // 第几个被选中了
				num_now_count: 0, // 当前转了几次
				num_select_win: 0, // 抽中

				text_prize: '', // 抽中的奖品

				color_no: "#FFFFFF", // 没有选择颜色
				color_yes: "#FF9900", // 选中的颜色

				color_one: "#FF9900",
				color_two: "#FFFFFF",
				color_three: "#FFFFFF",
				color_four: "#FFFFFF",
				color_five: "#FFFFFF",
				color_six: "#FFFFFF",
				color_seven: "#FFFFFF",
				color_eight: "#FFFFFF",
				color_nine: "#FFFFFF",

			}
		},
		onLoad() {

		},
		methods: {
			// 抽奖
			luckDraw() {
				this.num_select_win = this.num_win;

				if (this.num_select_win < 1) { // 中奖号小于1
					return;
				}

				if (this.list_prze.length < 8) { // 没有实物信息
					return;
				}

				this.setPrizeText(); // 设置中奖文字

				this.num_row = 1; // 初始化选中
				this.num_now_count = 0;

				this.startRow();
			},

			// 设置中奖文字
			setPrizeText() {
				if (this.is_random) { // 是否随机中间
					this.num_select_win = 1 + (Math.floor(Math.random() * this.list_prze.length));
				}

				console.log("随机：", this.num_select_win)

				switch (this.num_select_win) {
					case 1:
						this.text_prize = this.list_prze[0].prize_text; // 当前抽中的物品
						break;
					case 2:
						this.text_prize = this.list_prze[1].prize_text; // 当前抽中的物品
						break;
					case 3:
						this.text_prize = this.list_prze[2].prize_text; // 当前抽中的物品
						break;
					case 4:
						this.text_prize = this.list_prze[3].prize_text; // 当前抽中的物品
						break;
					case 5:
						this.text_prize = this.list_prze[4].prize_text; // 当前抽中的物品
						break;
					case 6:
						this.text_prize = this.list_prze[5].prize_text; // 当前抽中的物品
						break;
					case 7:
						this.text_prize = this.list_prze[6].prize_text; // 当前抽中的物品
						break;
					case 8:
						this.text_prize = this.list_prze[7].prize_text; // 当前抽中的物品
						break;
				}
			},

			/**
			 * 开始抽奖
			 */
			startRow() {
				let that = this;
				setTimeout(() => {
					that.selectCell(); // 调用颜色方法
				}, that.time_once);
			},

			/**
			 * 选中cell
			 */
			selectCell(position) {
				this.num_row++; // 当前选中的第几个
				this.num_now_count++; // 当前转了几个
				switch (this.num_row) {
					case 1:
						this.color_one = this.color_yes;
						this.color_two = this.color_no;
						this.color_three = this.color_no;
						this.color_four = this.color_no;
						this.color_five = this.color_no;
						this.color_six = this.color_no;
						this.color_seven = this.color_no;
						this.color_eight = this.color_no;

						break;
					case 2:
						this.color_one = this.color_no;
						this.color_two = this.color_yes;
						this.color_three = this.color_no;
						this.color_four = this.color_no;
						this.color_five = this.color_no;
						this.color_six = this.color_no;
						this.color_seven = this.color_no;
						this.color_eight = this.color_no;

						break;
					case 3:
						this.color_one = this.color_no;
						this.color_two = this.color_no;
						this.color_three = this.color_yes;
						this.color_four = this.color_no;
						this.color_five = this.color_no;
						this.color_six = this.color_no;
						this.color_seven = this.color_no;
						this.color_eight = this.color_no;

						break;
					case 4:
						this.color_one = this.color_no;
						this.color_two = this.color_no;
						this.color_three = this.color_no;
						this.color_four = this.color_yes;
						this.color_five = this.color_no;
						this.color_six = this.color_no;
						this.color_seven = this.color_no;
						this.color_eight = this.color_no;

						break;
					case 5:
						this.color_one = this.color_no;
						this.color_two = this.color_no;
						this.color_three = this.color_no;
						this.color_four = this.color_no;
						this.color_five = this.color_yes;
						this.color_six = this.color_no;
						this.color_seven = this.color_no;
						this.color_eight = this.color_no;

						break;
					case 6:
						this.color_one = this.color_no;
						this.color_two = this.color_no;
						this.color_three = this.color_no;
						this.color_four = this.color_no;
						this.color_five = this.color_no;
						this.color_six = this.color_yes;
						this.color_seven = this.color_no;
						this.color_eight = this.color_no;

						break;
					case 7:
						this.color_one = this.color_no;
						this.color_two = this.color_no;
						this.color_three = this.color_no;
						this.color_four = this.color_no;
						this.color_five = this.color_no;
						this.color_six = this.color_no;
						this.color_seven = this.color_yes;
						this.color_eight = this.color_no;

						break;
					case 8:
						this.color_one = this.color_no;
						this.color_two = this.color_no;
						this.color_three = this.color_no;
						this.color_four = this.color_no;
						this.color_five = this.color_no;
						this.color_six = this.color_no;
						this.color_seven = this.color_no;
						this.color_eight = this.color_yes;

						this.num_row = 0;
						break;
					default:
						this.num_row = 0;
						break;
				}

				if (this.num_now_count < (this.num_count * 8) + (this.num_select_win - 1)) { // 一共转动7次
					this.startRow(); // 再次调用抽奖
				} else {
					console.log("执行了")
					this.onSuccess();
				}

			},

			// 抽奖成功
			onSuccess() {
				this.$emit("MySuccess", {
					"data": this.text_prize
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 水平，垂直居中 */
	.base_all_center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 垂直居中 */
	.base_center_vertical {
		display: flex;
		align-items: center;
	}

	/* 水平居中 */
	.base_center_horizontal {
		display: flex;
		justify-content: center;
	}

	/* 垂直布局 */
	.base_column {
		display: flex;
		flex-direction: column;
	}

	/* 横向布局 */
	.base_row {
		display: flex;
		flex-direction: row;
	}

	/* ******************************* */
	/* 一行cell */
	.base_cell {
		width: 100%;
		height: 30%;
	}

	/* 单个cell */
	.cell_child {
		width: 30%;
		height: 100%;
		border-radius: 5px;
	}

	/* cell 文字 */
	.cell_text {
		font-size: 12px;
		color: #000000;
	}

	/* cell图片 */
	.cell_img {
		width: 60%;
		height: 60%;
		border-radius: 3px;
	}
</style>

使用方法

	<MyLuckDraw :num_win="num_win" :list_prze="list_prize" @MySuccess="f_MySuccess" >
	</MyLuckDraw>

	<view v-if="is_dialog_show" class="base_dialog base_all_center" @click="closeDialog()">

		<view class="base_all_center"
			style="width: 75%; height: 40%; background-color: #FFFFFF; border-radius: 10px;">
			<text style="font-size: 20px; color: #000000;">您抽中了：{{text_prize}}</text>
		</view>

	</view>
</view>

完整的代码已经给出了。接下来就是分析了。

1.封装控件需要：暴露名称，提供参数，增加事件（只有第一个也可以）如图所示：

在这里插入图片描述
props中支持的参数类型有： String ; Number ; Boolean ; Function ; Object ; Array ; Symbol这几种。
下面是具体的参数类型：type 是数据类型，default 是默认值，如果不需要可省略defalut。

控件中的事件传递

例如抽奖结束了需要返回抽中的信息，就需要在控件中定义了，如下图所示：
在这里插入图片描述
如果没有返回值可以不写{}中的内容。

如何使用组件？

1.导入控件；2使用组件
在这里插入图片描述
做完这两步，就可以在页面中随意使用该组件了：
图中标的已经很清楚了，这里不再赘述了。
在这里插入图片描述
当组件MyLuckDraw中的onSuccess()方法执行后，index.vue 绑定的f_MySuccess()方法便会执行。
在这里插入图片描述

看不懂的话，就跟着敲一遍就行了，一遍不行再来一遍~
完结，撒花~

标签：uniapp,prize,自定义,no,color,text,list,num,组件
来源： https://blog.csdn.net/m0_37792384/article/details/120100569

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有