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

ops/2024/11/17 6:21:39/

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

一、基本概念

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

二、主要属性

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

三、组件扩展

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

<template><viewclass="u-switch":class="[valueCom? 'u-switch--on' : '', disabled ? 'u-switch--disabled' : '']"@tap="onClick":style="[switchStyle]"><viewclass="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},// 开关尺寸，单位rpxsize: {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 VUE3return this.value;// #endif// #ifdef VUE3return 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>


http://www.ppmy.cn/ops/134354.html

相关文章

arkUI：水果选择与管理：基于 ArkUI 的长按编辑功能实现

arkUI：水果选择与管理：基于 ArkUI 的长按编辑功能实现

水果选择与管理&#xff1a;基于 ArkUI 的长按编辑功能实现 1 主要内容说明2 相关内容2.1 相关内容2.1.1 源码1内容的相关说明2.1.1.1 数据结构与状态管理2.1.1.2 添加水果功能2.1.1.3 水果列表展示2.1.1.4 长按进入编辑模式2.1.1.5 复选框的多选功能2.1.1.6 删除水果功能2.1.1…
阅读更多...
Github客户端工具github-desktop使用教程

Github客户端工具github-desktop使用教程

文章目录 1.客户端工具的介绍2.客户端工具使用感受3.仓库的创建4.初步尝试5.本地文件和仓库路径5.1原理说明5.2修改文件5.3版本号的说明5.4结合码云解释5.5版本号的查找 6.分支管理6.1分支的引入6.2分支合并6.3创建测试仓库6.4创建测试分支6.5合并分支6.6合并效果查看6.7分支冲…
阅读更多...
当 push 成为一场冒险：走进 C++ List 的世界

当 push 成为一场冒险：走进 C++ List 的世界

公主请阅 1.list的相关常用接口emplace_back和push/back的区别insert关于find函数的返回值&#xff1a; splicesort---升序和降序1. 数组或 vector的正序和逆序排序正序&#xff08;升序&#xff09;排序逆序&#xff08;降序&#xff09;排序 2. list 容器中的排序正序&#x…
阅读更多...
Oracle 11g rac 集群节点的修复过程

Oracle 11g rac 集群节点的修复过程

Oracle 11g rac 集群节点的修复过程 目录 Oracle 11g rac 集群节点的修复过程一、问题的产生二、修复过程1、执行 roothas.pl 命令2、执行 root.sh 命令3、查看集群信息4、查看节点2的IP地址5、查看节点2的监听信息 一、问题的产生 用户的双节点 Oracle 11g rac 集群&#xff…
阅读更多...
接上篇-使用 element-plus 优化UI界面

接上篇-使用 element-plus 优化UI界面

使用 element-plus 可以让我们更容易创建一个精美且功能丰富的UI界面。接下来&#xff0c;我们将优化 GroupManagement.vue 组件&#xff0c;使用 element-plus 的表格、按钮、对话框等组件来实现一个更专业的小组管理页面。 优化后的 GroupManagement.vue 代码 1. 安装 elem…
阅读更多...
为什么用SQL而不是Excel+VBA？

为什么用SQL而不是Excel+VBA？

SQL主要服务数据库 SQL服务的是MySQL、Oracle、SQL Sever、Hive等各大数据库&#xff0c;它们都需要SQL来管理、定义。题主理解的SQL只限于查询数据、清洗数据&#xff0c;这些当然ExcelVBA都能做到&#xff0c;任何编程语言都能做到&#xff0c;但事实是SQL是数据库的管理工具…
阅读更多...
Android 配置默认输入法

Android 配置默认输入法

1.背景 最近有个国内的项目&#xff0c;预制了输入法apk&#xff0c;但是无法调出软键盘。原因是没有配置默认输入法&#xff0c;本文主要记录下如何配置默认输入法。 2.代码设置 设置默认输入法需要配置Settings.Secure.ENABLED_INPUT_METHODS和Settings.Secure.DEFAULT_IN…
阅读更多...
比ChatGPT更酷的AI工具

比ChatGPT更酷的AI工具

相较于寻找比ChatGPT更酷的AI工具&#xff0c;这听起来似乎是个挑战&#xff0c;因为ChatGPT已经以它强大的综合性能在AI界大名鼎鼎。然而&#xff0c;每个工具都有其独特的优势&#xff0c;特别是在特定的应用场景下&#xff0c;其他AI工具可能会展现出与ChatGPT不同的魅力。接…
阅读更多...
最新文章

Copyright @ 2022~2023