低代码可视化-uniapp开关选择组件-低码生成器

diygwcom2024-11-15 10:06

开关（Switch）选择组件是一种用户界面元素，允许用户在两种状态（通常是开/关、是/否、启用/禁用等）之间进行切换。这种组件在移动应用、桌面软件、网页以及物联网设备中广泛应用。以下是对开关Switch选择组件的详细介绍：

一、基本概念

开关Switch选择组件通常由一个滑块和一个滑道组成。滑块是用户可以拖动的部分，而滑道是背景。用户可以通过拖动滑块或点按开关来改变其状态。

二、主要属性

  1. 状态：
    • 表示开关的当前状态，通常是一个布尔值（true/false或1/0）。
  2. 状态改变回调：
    • 当开关状态发生变化时调用的回调函数。
    • 该函数通常接收一个新的状态值作为参数。
  3. 启用/禁用：
    • 控制开关是否可用。
    • 当设置为禁用状态时，用户无法更改开关的状态。
  4. 文本标签：
    • 在某些实现中，可以为开关的打开和关闭状态设置文本标签。
    • 这些标签通常用于提供更清晰的指示或说明。
  5. 颜色（colors）：
    • 自定义开关的颜色，包括滑块和滑道的颜色。
    • 某些框架允许为开关的不同状态（打开/关闭）设置不同的颜色。

三、组件扩展

基于uview类型的u-switch我们增加了有效文本、无效文本及颜色。扩展组件如下。

<template>
	<view
		class="u-switch"
		:class="[valueCom? 'u-switch--on' : '', disabled ? 'u-switch--disabled' : '']"
		@tap="onClick"
		:style="[switchStyle]"
	>
		<view
			class="u-switch__node node-class"
			:style="nodeStyle"
		>
			<u-loading
				:show="loading"
				class="u-switch__loading"
				:size="size * 0.6"
				:color="loadingColor"
			/>
		</view>
		<view v-if="activeText || inactiveText" class="u-switch__text" :class="{'u-switch__text-end':!valueCom}" >
			<text v-if="!valueCom" class="u-switch__text--inactive"  :style="{color:inactiveTextColor}">{{ inactiveText }}</text>
			<text v-else class="u-switch__text--active" :style="{color:activeTextColor}">{{ activeText }}</text>
		</view>
	</view>
</template>

<script>
/**
 * switch 开关选择器
 * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
 * @tutorial https://www.uviewui.com/components/switch.html
 * @property {Boolean} loading 是否处于加载中（默认false）
 * @property {Boolean} disabled 是否禁用（默认false）
 * @property {String Number} size 开关尺寸，单位rpx（默认50）
 * @property {String} active-color 打开时的背景色（默认#19be6b）
 * @property {Boolean} inactive-color 关闭时的背景色（默认#ffffff）
 * @property {Boolean | Number | String} active-value 打开选择器时通过change事件发出的值（默认true）
 * @property {Boolean | Number | String} inactive-value 关闭选择器时通过change事件发出的值（默认false）
 * @event {Function} change 在switch打开或关闭时触发
 * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
 */
export default {
	name: "u-switch",
	emits: ["update:modelValue", "input", "change"],
	props: {
		// 通过v-model双向绑定的值
		value: {
			type: [Number, String, Boolean],
			default: false
		},
		modelValue: {
			type: [Number, String, Boolean],
			default: false
		},
		// 是否为加载中状态
		loading: {
			type: Boolean,
			default: false
		},
		// 是否为禁用装填
		disabled: {
			type: Boolean,
			default: false
		},
		// 开关尺寸，单位rpx
		size: {
			type: [Number, String],
			default: 50
		},
		// 打开时的背景颜色
		activeColor: {
			type: String,
			default: "#19be6b"
		},
		// 关闭时的背景颜色
		inactiveColor: {
			type: String,
			default: "#ffffff"
		},
		// 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06)
		vibrateShort: {
			type: Boolean,
			default: false
		},
		// 打开选择器时的值
		activeValue: {
			type: [Number, String, Boolean],
			default: true
		},
		// 关闭选择器时的值
		inactiveValue: {
			type: [Number, String, Boolean],
			default: false
		},
		activeText: {
			type: String,
			default: ''
		},
		activeTextColor: {
			type: String,
			default: "#ffffff"
		},
		inactiveText: {
			type: String,
			default: ''
		},
		inactiveTextColor: {
			type: String,
			default: "#999999"
		},
	},
	data() {
		return {
			switchWidth:this.size,
		};
	},
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		},
		switchStyle() {
			let style = {};
			style.fontSize = this.size + "rpx";
			style.backgroundColor = this.valueCom ? this.activeColor : this.inactiveColor;
			style.width = this.$u.addUnit(this.switchWidth*2);
			return style;
		},
		loadingColor() {
			return this.valueCom ? this.activeColor : null;
		},
		nodeStyle(){
			const style = {};
			style.width = this.$u.addUnit(this.size);
			style.height = this.$u.addUnit(this.size);
			style.transform = `translateX(${this.valueCom ? this.switchWidth - this.size/2 : 0}px)`;
			return style;
		}
	},
	methods: {
		onClick() {
			if (!this.disabled && !this.loading) {
				// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
				if (this.vibrateShort) uni.vibrateShort();
				this.$emit("input", this.valueCom==this.activeValue ? this.inactiveValue : this.activeValue);
				this.$emit("update:modelValue", this.valueCom==this.activeValue ? this.inactiveValue : this.activeValue);
				// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
				this.$nextTick(() => {
					this.$emit("change", this.valueCom==this.activeValue ? this.inactiveValue : this.activeValu);
				});
			}
		},
		updateSwitchWidth() {
			let textLength = Math.max(this.activeText.length,this.inactiveText.length)
			this.switchWidth = Math.max(textLength*12+10+this.size/2, this.size)
		}
	},
	mounted() {
		this.updateSwitchWidth();
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-switch {
	position: relative;
	/* #ifndef APP-NVUE */
	display: inline-block;
	/* #endif */
	box-sizing: initial;
	width: 2em;
	height: 1em;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 1em;
	transition: background-color 0.3s;
	font-size: 50rpx;
	&__text {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
		font-size: 24rpx;
		&-end{
			justify-content: flex-end;
		}
		&--inactive {
			color: #999999;
			white-space: nowrap;
			text-align: right;
		}
	
		&--active {
			color: #fff;
			white-space: nowrap;
		}
	}
}

.u-switch__node {
	@include vue-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 100%;
	z-index: 1;
	background-color: #fff;
	background-color: #fff;
	box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1),
		0 3px 3px 0 rgba(0, 0, 0, 0.05);
	box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1),
		0 3px 3px 0 rgba(0, 0, 0, 0.05);
	transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
	transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05),
		-webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
	transition: transform cubic-bezier(0.3, 1.05, 0.4, 1.05);
	transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
}

.u-switch__loading {
	@include vue-flex;
	align-items: center;
	justify-content: center;
}

.u-switch--on {
	background-color: #1989fa;
}

.u-switch--on .u-switch__node {
	transform: translateX(100%);
}

.u-switch--disabled {
	opacity: 0.4;
}
</style>

四、可视化设计

拖动开关组件进设计区。

保存源码至本地查看效果

<template>
	<view class="container container329152">
		<u-form-item class="diygw-col-24" label="开关" prop="switch">
			<view class="flex diygw-col-24">
				<u-switch :size="44" :activeValue="1" :inactiveValue="0" inactiveTextColor="#000000" activeTextColor="#ffffff" v-model="switched" slot="right"></u-switch>
			</view>
		</u-form-item>
		<u-form-item class="diygw-col-24" label="开关" prop="switch1">
			<view class="flex diygw-col-24">
				<u-switch :size="44" activeText="有效" inactiveText="无效" :activeValue="1" :inactiveValue="0" inactiveTextColor="#000000" activeTextColor="#ffffff" v-model="switch1" slot="right"></u-switch>
			</view>
		</u-form-item>
		<u-form-item class="diygw-col-24" label="开关" prop="switch2">
			<view class="flex diygw-col-24">
				<u-switch :size="44" activeText="男" inactiveText="女" :activeValue="1" :inactiveValue="0" inactiveTextColor="#000000" activeTextColor="#ffffff" v-model="switch2" slot="right"></u-switch>
			</view>
		</u-form-item>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				listNum: 1,
				list: {
					code: 200,
					msg: '获取数据成功',
					data: [
						{
							title: '标题1',
							remark: '描述1',
							id: 1,
							attr: {
								title: '标题1'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题2',
							remark: '描述2',
							id: 2,
							attr: {
								title: '标题2'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题3',
							remark: '描述3',
							id: 3,
							attr: {
								title: '标题3'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题4',
							remark: '描述4',
							id: 4,
							attr: {
								title: '标题4'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题5',
							remark: '描述5',
							id: 5,
							attr: {
								title: '标题5'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题6',
							remark: '描述6',
							id: 6,
							attr: {
								title: '标题6'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题7',
							remark: '描述7',
							id: 7,
							attr: {
								title: '标题7'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题8',
							remark: '描述8',
							id: 8,
							attr: {
								title: '标题8'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题9',
							remark: '描述9',
							id: 9,
							attr: {
								title: '标题9'
							},
							img: 'https://php.diygw.com/logo.png'
						},
						{
							title: '标题10',
							remark: '描述10',
							id: 10,
							attr: {
								title: '标题10'
							},
							img: 'https://php.diygw.com/logo.png'
						}
					]
				},
				switched: 1,
				switch1: 1,
				switch2: 1
			};
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			this.headerBackgroundStyle = this.headerBackgroundStyle || { background: 'none' };
			if (scrollTop <= 80) {
				const opacity = scrollTop / 100;
				const color = `rgba(255, 255, 255, ${opacity})`;
				this.headerBackgroundStyle.background = color;
			} else {
				this.headerBackgroundStyle.background = '#ffffff';
			}
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				await this.listApi();
			},
			// 列表数据 API请求方法
			async listApi(param) {
				let thiz = this;
				param = param || {};

				//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
				if (param.refresh || typeof param != 'object') {
					this.listNum = 1;
				}

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = 'https://php.diygw.com/article.php';
				let http_data = {
					pageNum: this.listNum,
					pageSize: 10,
					sctdown: param.sctdown || this.sctdown
				};
				let http_header = {};

				let list = await this.$http.post(http_url, http_data, http_header, 'json');

				let datarows = list.rows;
				if (http_data.pageNum == 1) {
					this.list = list;
				} else if (datarows) {
					let rows = this.list.rows.concat(datarows);
					list.rows = rows;
					this.list = list;
				}
				if (datarows && datarows.length > 0) {
					this.listNum = this.listNum + 1;
				}
				this.globalData.isshow = true;
				console.log(http_data.sctdown);
			}
		},
		onPullDownRefresh() {
			// 列表数据 API请求方法
			this.listNum = 1;
			this.listApi();

			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			// 列表数据 API请求方法
			this.listApi();
		}
	};
</script>

<style lang="scss" scoped>
	.container329152 {
	}
</style>
相关推荐
用户48062260414157 小时前
使用uniapp开发微信小程序-框架搭建
微信小程序·uni-app
TttHhhYy9 小时前
uniapp+vue开发app，蓝牙连接，蓝牙接收文件保存到手机特定文件夹，从手机特定目录（可自定义），读取文件内容，这篇首先说如何读取，手机目录如何寻找
开发语言·前端·javascript·vue.js·uni-app
Funky_oaNiu9 小时前
uniapp实现按钮防重复点击（防抖）完整解决方案
uni-app
原克技术10 小时前
uniapp验证码
uni-app
web150850966411 天前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光2 天前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined2 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie2 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛112 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端3 天前
uni-app框架核心/常用API梳理一（数据缓存）
前端·uni-app
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍