前端uniapp图片select联动文本切换

图片

代码

<template>

	<!-- 这个是uniapp的下拉框 -->
	<uni-data-select v-model="pay_type" :localdata="range" @change="handleSelectChange"></uni-data-select>

	<!-- 图片 -->
	<image :src="dynamicImage" mode="" @click="getImg"></image>


	<!-- 文字 -->
	{{rangeModelData}}凭证
</template>

<script>
	export default {
		data() {
			return {
				// 用于绑定el-select的值
				dynamicImage: '',
				// 用于显示动态绑定的图像
				imgArr: [], // 取值imgArr[0] 接口获取下来的，一共两个图片路径


				// 动态绑定文字切换
				rangeModelData: '',
				rangeModelList: ['微信', '支付宝'],
			};
		},
		mounted() {
			/* 获取图片 两条路径*/
			this.getConsumptionsNumber();
		},
		methods: {
			// 获取图片 两条路径
			getConsumptionsNumber() {
				let self = this;
				self.loading = true;
				uni.showLoading({
					title: '加载中'
				})
				self._get(
					'balance.plan/index', {
						pay_source: self.getPlatform()
					},
					function(data) {
						// 获取收款码图片
						console.log(data.data.settings, '获取图片');
						// push到数组里面data的 imgArr[],一共两条图片路径
						self.imgArr.push(data.data.settings.poster_path, data.data.settings.zfb_poster_path)
						console.log(self.imgArr, 'self.imgArr地址');
					}
				);
			},
			handleSelectChange(newValue) {
				// 图片切换 在这里根据选项的值(newValue)来设置dynamicImage的值 // 例如，根据选项值加载不同的图像
				if (newValue === 1) {
					this.dynamicImage = this.imgArr[0];
				} else if (newValue === 2) {
					this.dynamicImage = this.imgArr[1];
				}
				// 文字切换
				if (newValue === 1) {
					this.rangeModelData = this.rangeModelList[0];
				} else if (newValue === 2) {
					this.rangeModelData = this.rangeModelList[1];
				}
			}
		},
		watch: {
			//  进入页面立即执行 图片首次加载数组第一张显示图片
			"imgArr": {
				handler: function(o, n) {
					console.log(o, n);
					this.dynamicImage = this.imgArr[0];
				},
				deep: true, // 深度监听
				immediate: true, // 立即执行
			},
			// 进入页面立即执行 文字首次加载数组第一个文字
			"rangeModelList": {
				handler: function(o, n) {
					console.log(o, n);
					this.rangeModelData = this.rangeModelList[0];
				},
				deep: true, // 深度监听
				immediate: true, // 立即执行
			},
		}
</script>

<style>
</style>








<template>
	<el-select v-model="selectedValue" @change="handleSelectChange">
		<!-- 添加el-option选项 -->
		<el-option label="选项1" value="option1"></el-option>
		<el-option label="选项2" value="option2"></el-option> <!-- 添加更多选项 -->
	</el-select>
	<img :src="dynamicImage" alt="动态图像">
</template>

<script>
	export default {
		data() {
			return {
				selectedValue: '',
				// 用于绑定el-select的值 
				dynamicImage: '',
				// 用于显示动态绑定的图像
			};
		},
		methods: {
			handleSelectChange(newValue) {
				// 在这里根据选项的值(newValue)来设置dynamicImage的值 // 例如，根据选项值加载不同的图像 
				if (newValue === 'option1') {
					this.dynamicImage = '路径/到/选项1的图像.png';
				} else if (newValue === 'option2') {
					this.dynamicImage = '路径/到/选项2的图像.png';
				} // 添加更多选项的处理逻辑 } }
			}
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132