uniapp-vue3-微信小程序-按钮组wo-btn-group
采用uniapp-vue3实现, 是一款支持高度自定义的按钮组组件,支持H5、微信小程序(其他小程序未测试过,可自行尝试)
可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=15012
- 使用示例
<template><view><view class="name">按钮组组件: wo-btn-group</view><view class="card"><view class="header">默认样式(包括disabled禁用):</view><view class="content"><woBtnGroup :default-value="state.value" @change="onChange"></woBtnGroup></view></view><view class="card"><view class="header">按钮形状:椭圆(默认)、方形、圆形</view><view class="content"><view class="box"><view class="title">默认椭圆:</view><woBtnGroup :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><view class="title">方形:</view><woBtnGroup :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><view class="title">圆形(圆形无边框):</view><woBtnGroup :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view></view></view><view class="card"><view class="header">轮廓:</view><view class="content"><view class="box"><woBtnGroup outline :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><woBtnGroup outline :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><woBtnGroup outline :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view></view></view><view class="card"><view class="header">自定义颜色:</view><view class="content"><view class="box"><woBtnGroup outline :color="'orange'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><woBtnGroup :color="'orange'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view></view></view><view class="card"><view class="header">自定义边框:</view><view class="content"><view class="box"><view class="title">无边框:</view><woBtnGroup :border-obj="state.borderStyle1" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><view class="title">虚线边框:</view><woBtnGroup outline :border-obj="state.borderStyle2" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><view class="title">圆角幅度:</view><woBtnGroup outline :border-obj="state.borderStyle3" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box"><view class="title">边框宽度:</view><woBtnGroup :border-obj="state.borderStyle4" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view></view></view><view class="card"><view class="header">自定义暗黑模式:</view><view class="content"><view class="box dark1"><woBtnGroup :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box dark1"><woBtnGroup :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box dark dark-border"><woBtnGroup :shape="'round'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box dark dark-border"><woBtnGroup :border-obj="state.borderStyle1" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box dark dark-border1"><woBtnGroup :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view><view class="box dark dark-border1"><woBtnGroup :border-obj="state.borderStyle1" :shape="'space'" :default-value="state.value" :options="state.options" @change="onChange"></woBtnGroup></view></view></view></view>
</template><script setup lang="ts">
import woBtnGroup from './woBtnGroup.vue'
import { reactive } from 'vue';const state = reactive({borderStyle1: {isShow: false,size: '4rpx',style: 'dashed',radius: '70rpx'},borderStyle2: {isShow: true,size: '4rpx',style: 'dashed',radius: '70rpx'},borderStyle4: {isShow: true,size: '12rpx',style: 'solid',radius: '70rpx'},borderStyle3: {isShow: true,size: '4rpx',style: 'solid',radius: '16rpx'},value: 1,options: [{label: '按钮1',value: 1,},{label: '按钮2',value: 2,disabled: true},{label: '按钮3',value: 3,},{label: '按钮4',value: 4,},{label: '按钮5',value: 5,},],
});
const onChange = (e: any) => {console.log('点击按钮:', e);
};
</script><style scoped>
.flex-center {display: flex;justify-content: center;align-items: center;
}
.name {font-weight: bold;padding: 40rpx 0 10rpx 20rpx;
}
.title {padding-bottom: 10rpx;
}
.box {margin: 20rpx
}
.dark1 {background-color: black;color: #fff;border-radius: 70rpx;
}
.dark {background-color: black;color: #fff;
}
.dark-border {padding: 10rpx;border-radius: 70rpx;border: 6rpx solid #3370FF;
}
.dark-border1 {padding: 10rpx;border: 6rpx solid #3370FF;
}
.card {background: #f1f1f1;margin: 40rpx 10rpx;padding: 30rpx;border-radius: 12rpx;
}
.header {font-size: 26rpx;display: flex;align-items: center;margin-bottom: 30rpx;
}
.content {font-size: 24rpx;/* padding-bottom: 20rpx; *//* background-color: black; *//* color: #fff; */
}
/* .btn-border {font-size: 28rpx;border: 4rpx solid #3370FF;padding: 4rpx;border-radius: 70rpx;
} */
</style>
相关文章:
uniapp-vue3-微信小程序-按钮组wo-btn-group
采用uniapp-vue3实现, 是一款支持高度自定义的按钮组组件,支持H5、微信小程序(其他小程序未测试过,可自行尝试) 可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id15012 使用示例 <template><vie…...
mysql查询当天,近一周,近一个月,近一年的数据
1.mysql查询当天的数据 select * from table where to_days(时间字段) to_days(now()); 2.mysql查询昨天的数据 select * from table where to_days(now( ) ) - to_days( 时间字段名) 1 3.mysql查询近一周的数据 SELECT * FROM table WHERE date(时间字段) > DATE_SU…...
Python快速入门教程
文章目录: 一:软件环境安装 1.软件环境 2.运行第一个程序 二:语法基础 1.注释 2.变量 3.数学运算 4.数据类型 5.数据输入input 6.逻辑运算 7.程序控制结构 7.1 if选择 7.1.1 条件语句if else 7.1.2 嵌套语句 7.1.3 多条件判断…...
注释的重要性:代码的明晰之道
注释是程序员在编写代码时常常遇到的问题。有人声称不写注释就是在耍流氓,这引发了广泛的讨论。本文将探讨注释的重要性以及它对于代码的可读性和维护性的影响,同时提供一些关于如何写好注释的建议。 在软件开发领域,写代码不仅仅是为了满足功…...
将 vue2+ElementU 项目打包成安卓app
目标:将vue项目打包成安卓app 工具:HbuilderX 1.在HbuilderX中创建一个 5App 项目 创建好的app项目目录 2.将vue项目打包 2.1 在 vue.config.js 中添加公共路径(解决打包后的app图片不显示问题) module.exports defineConfig(…...
sop作业指导书怎么做?sop标准作业指导书用什么软件做?
自标准作业程序sop这个概念引入市场以来,现代生产企业纷纷开始打造自己的标准作业程序sop,然而在这个过程中,因为缺乏经验或者缺少相应的技术人员,导致遇到重重困难,其中最重要的一环sop作业指导书怎么做就难倒了不少企…...
计算机网络 | 应用层
计算机网络 | 应用层 计算机网络 | 应用层应用层概述网络应用模型客户/服务器模型(Client/Server,C/S)P2P模型(Peer-to-Peer) 域名系统(DNS) 参考视频:王道计算机考研 计算机网络 参…...
IP地址定位技术对企业的影响有哪些?
IP地址定位技术是一种用于确定互联网用户地理位置的技术,它将IP地址映射到具体的地理坐标。这项技术对于多个领域具有重要性,具有广泛的影响,包括以下几个方面: 1. 改善广告和市场营销:IP地址定位技术使广告商能够更精…...
【SA8295P 源码分析 (一)】52 - 答疑之 QNX 创建镜像、Android修改CMDLINE
【SA8295P 源码分析】52 - 答疑之 QNX 创建镜像、Android修改CMDLINE 一、QNX 侧创建 img 镜像二、QNX 侧指定只编译某一个版本三、Android定制修改selinux权限,user版本采用enforcing,userdebug版本permissive系列文章汇总见:《【SA8295P 源码分析 (一)】系统部分 文章链接…...
跨境商城源码部署(多商户入驻,一键铺货,快速部署)
现如今,互联网的快速发展为商业带来了前所未有的机遇,跨境电商作为其中的热门领域,吸引了众多企业和创业者的关注。而通过部署跨境商城源码,您将获得多商户入驻、一键铺货等功能,轻松拥有一家生意蓬勃发展的跨境商城。…...
videojs和videojs-markers
文章目录 videojs安装使用videojs常用选项video.js特定选项 videojs-markers安装使用说明方法 videojs video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频,以及YouTube和Vimeo(通过插件),Video.js 自动检测浏览器…...
铜死亡+多组机器学习+WGCNA+分型
今天给同学们分享一篇铜死亡多组机器学习WGCNA分型的生信文章“Machine learning screening for Parkinsons disease-related cuproptosis-related typing development and validation and exploration of personalized drugs for cuproptosis genes”,这篇文章于20…...
vite 使用本地 ip + localhost 访问服务
vite 使用本地 ip localhost 访问服务 在 vite.config.js 中,如果未配置 server.host,默认服务将以 localhost 进行启动,此时我们可以通过 localhost:port 或 127.0.0.1:port 进行应用访问。 import { resolve } from path function pathRes…...
postman和jmete接口测试的用法与区别
前言 前阶段做了一个小调查,发现软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中,有高手,自然也会有小白,但有一点我们无法否认,就是每一个高手都是从小白开始的,所以今天我们就来谈谈一大…...
Go语言基础之包
包(package) Go语言中支持模块化的开发理念,在Go语言中使用包(package)来支持代码模块化和代码复用。一个包是由一个或多个Go源码文件(.go结尾的文件)组成,是一种高级的代码复用方案…...
Switch模拟器-Ryujinx(龙神模拟器)安装教程
Ryujinx是由gdkchan带领团队运用C#语言创建并发布在GitHub平台的Switch开源模拟器. 系 统 要 求 内存8 GB RAM及以上 显卡支持Vulkan、OpenGL版本4.5及以上 64位系统 Windows 10 RS4(Redstone 4,版本 1803)或更高版本 软 件 教 程 第一…...
从Github中下载部分文件
我们经常回去Github中下载代码,但仓库中存在很多project代码。但我们如果只需要某一个或几个项目的代码,此时应该如何操作呢? 这里介绍两款工具,可以从仓库中下载部分文件的小工具: DownGit 和 GitZip 1. DownGit downGit 国内镜…...
webrtc安全性 加密方式
媒体加密与通信安全 有各种不同的做法会让实时通信软件暴露在安全隐患中。其中需要特别值得注意的是在信息传输的过程中截取未加密的媒体或者数据。这可以发生在浏览器到浏览器之间或者浏览器到服务器之间的通信过程中,第三方可以窃取到所有发送的数据。但是在数据加…...
【2023年11月第四版教材】软考上机考试操作指南(注意事项)
软考上机考试操作指南(注意事项) 1 考试注意事项2 获取<font color=blue>模拟作答系统1.1 方式1:绑定资源下载1.2 方式2:百度网盘下载1.3 方式3:官方下载1.4 说明3 模拟作答系统使用方法3.1 注意事项3.2 解压压缩文件3.3 运行软件3.4 考试科目选择3.5 登录3.6 阅读考…...
在vs code中创建一个名为 “django_env“ 的虚拟环境报错?!以下方法可以解决
# vs code 终端窗口中运行: mkvirtualenv django_env # 拓展: mkvirtualenv django_env 是一个命令,用于创建一个名为 "django_env" 的虚拟环境。虚拟环境是一种用于隔离不同Python项目所需依赖的工具。通过创建虚拟环境&#x…...
C++产生未定义的行为的原因分析
前言 最近一直在做QT开发,编程环境是VS2017和QT5.11.2 经常遇到的问题就是,在VS中调试程序,前面都是正常运行的,但是当关闭窗口,退出程序的时候,VS会抛出一个异常 “未加载ntdll.pdb,触发了一…...
C++ Qt QString类用法介绍
QString 是 Qt 框架中的一个重要类,用于处理 Unicode 字符串。它提供了大量的功能,方便开发者处理、查询和操作字符串。以下是 QString 的一些常用功能和示例: 构造和初始化 QString s1; // 默认构造函数,创建一个空字符串 QStr…...
亚马逊测评关于IP和DNS的问题
最近不少人询问了关于IP和DNS的问题,在此进行一些科普。 当客户端试图访问一个网站时,首先会向其所在的ISP的DNS服务器进行查询。如果ISP的DNS服务器没有相关缓存,则会向上级DNS服务器进行查询。 一些诸如CDN之类的服务,可能会为…...
新增Node.js运行环境、新增系统缓存清理功能,1Panel开源面板v1.7.0发布
2023年10月16日,现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.7.0版本。 在这个版本中,1Panel新增Node.js运行环境;新增系统缓存清理功能;应用安装时支持选择远程数据库。此外,我们进行了40多项功能更新和…...
【SA8295P 源码分析 (一)】60 - QNX Host 如何新增 android_test 分区给 Android GVM 挂载使用
【SA8295P 源码分析】60 - QNX Host 如何新增 android_test 分区给 Android GVM 挂载使用 一、QNX 侧:创建分区、配置下载、配置透传1.1 修改分区表,新增 android_test 分区,大小为 2GByte1.2 下载 android_test.img 镜像1.3 配置 /dev/disk/android_test_a 分区透传到 Andr…...
天津滨海新区城市轨道交通电能管理系统方案与实施方案
【摘要】:介绍天津滨海新区轨道交通项目建设电能管理系统的系统架构、功能组成和实施方案。在借鉴其他城市轨道交通项目电能管理系统的基础上,结合天津滨海新区轨道交通建设的具体情况,对系统组网方案、测量表计设置原则、与通风空调节能系统和照明节能系…...
torch.cat 使用小节
torch.cat 使用小节 torch.cat 要求在所指定拼接维度之外的所有维度都要匹配,例如 import torch v1 torch.tensor([[1, 2, 3], [4, 5, 6], [4, 5, 6]]) # 3*3 v2 torch.tensor([[3, 6, 8]]) # 1*3 torch.cat([v1, v2], dim1)运行之后会报错 Sizes of tensors…...
Java:SpringBoot整合Spring Batch示例
目录 文档基础概念Tasklet方式示例Chunk方式示例参考文章 文档 https://docs.spring.io/spring-batch/docs/4.3.9/reference/html/index.html 基础概念 JobLauncher:作业启动器,启动作业的入口。对应的实现类为SimpleJobLauncher。Job:作业…...
Windows + Msys 下编译 TensorFlow 2.14
安装基本工具 pacman -S --needed zip unzip patch diffutils git 下载安装 Windows 版本 bazel 6.1.2,复制到 C:/Windows/system32 目录下,改名为 bazel.exe wget https://github.com/bazelbuild/bazel/releases/download/6.1.2/bazel-6.1.2-window…...
百度发布全新 AI 互动式搜索:百度简单搜索
本心、输入输出、结果 文章目录 百度发布全新 AI 互动式搜索:百度简单搜索前言主要能力 相关资料能力介绍 百度搜索升级发文告用户如何获取百度简单搜索百度简单搜索的定位百度简单搜索在 APP 上面的体验讨论和点评我们关注的几个问题 弘扬爱国精神 百度发布全新 AI…...
VUE开发记录
记录vue开发中遇到的问题 - 2023/10/16 问题:项目element-ui表单中,input点击需要打开弹框,弹框选择值后回填到input,但是此时elementUI的校验出错(值存在却校验为空) 解决方法: this.employee…...
2023年中国乳胶制品产量、需求量及市场规模分析[图]
乳胶泛指聚合物微粒分散于水中形成的胶体乳液,又称胶乳。习惯上将橡胶微粒的水分散体称为胶乳,而将树脂微粒的水分散体称为乳液。以乳胶为原料制成的制品称乳胶制品,常见的如海绵、手套、玩具、胶管等。 我国乳胶制品细分主要分为避孕套、乳胶…...
手撕Vue-数据驱动界面改变上
经过上一篇的介绍,已经实现了监听数据的变化,接下来就是要实现数据变化后,界面也跟着变化,这就是数据驱动界面改变。 想要实现数据变化之后更新UI界面,我们可以使用发布订阅模式来实现,先定义一个观察者类,…...
for循环中循环一次提交一次 insert update 关闭事务 spring springboot mybatis
省流: 在方法上直接加如下注解: Transactional(propagation Propagation.NOT_SUPPORTED) public void t1(){//业务代码 } 正文: 在测试的时候,有时候会希望在for循环中,代码循环一次就提交一次事务。 方法一&#…...
VS2010 C语言内嵌汇编语言程序
VS2010 C语言内嵌汇编语言程序 2021年7月28日席锦 在visual studio 2010中C语言使用内联汇编写代码 ,它的格式有两种, 一种是__asm 直接接汇编指令语句,比如:__asm int 3 // 软件中断 另一种是加上花括号,类似于一个函数&…...
【TES720D】青翼科技基于复旦微的FMQL20S400全国产化ARM核心模块
板卡概述 TES720D是一款基于上海复旦微电子FMQL20S400的全国产化核心模块。该核心模块将复旦微的FMQL20S400(兼容FMQL10S400)的最小系统集成在了一个50*70mm的核心板上,可以作为一个核心模块,进行功能性扩展,特别是用…...
css 左右滚轮无缝衔接
最近的项目有做到一个功能 类似跑马灯或者公告栏那种 有文字 也有列表的 所以 写了两种 第一种公告栏文字是用的js 第二种图文类型是用的css 两种方法 记录一下 第一种 纯文字滚动 其实也是根据js去计算dom的宽度 通过js去给css赋值 <div class"div1"><div …...
Hadoop分布式文件系统-HDFS
1.介绍 HDFS (Hadoop Distributed File System)是 Hadoop 下的分布式文件系统,具有高容错、高吞吐量等特性,可以部署在低成本的硬件上。 2.HDFS 设计原理 2.1 HDFS 架构 HDFS 遵循主/从架构,由单个 NameNode(NN) 和多个 DataNode(DN) 组成:...
专业图表绘制软件 OmniGraffle Pro mac v7.22.1中文版软件介绍
OmniGraffle Pro mac是一款Mac平台上的专业绘图软件,主要用于创建各种图形,包括流程图、组织结构图、网络拓扑图、UI原型等。该软件提供了强大的绘图工具和丰富的样式库,可以让用户快速创建出高质量的图形,并支持导入和导出各种常…...
Git 本地文件合并和恢复
前记: git svn sourcetree gitee github gitlab gitblit gitbucket gitolite gogs 版本控制 | 仓库管理 ---- 系列工程笔记. Platform:Windows 10 Git version:git version 2.32.0.windows.1 Function: Git 本地文件合并和恢复…...
记录git仓库pr没有显示贡献者的问题,以及如何提交一个pr(简)
git config --global --list # 查看全局配置(适用于所有仓库)的信息,可以添加 --global 标志git config --list # 查看你的Git配置git config user.name # 显示您的Git用户名。同样,可以替换 user.name 为其他配置项名称来查看特定…...
入侵检测代码
在人工智能中有个入侵检测:当检测到的目标位于指定区域内才算是入侵,思路很简单,判断相关坐标即可: from matplotlib import pyplot as plt, patches from shapely.geometry import Polygon, Pointdef is_intrusion(target_box, …...
数字孪生技术如何提高化工生产安全性?
随着科技的不断进步,数字孪生技术已经渗透到了各个领域,为化工行业带来了翻天覆地的变革。这一技术的应用不仅在生产效率方面发挥了积极作用,还在安全性、创新、环保和可持续性等多个方面作出了巨大的贡献。 化工行业常常涉及危险品和复杂的生…...
PHP 如何查看php函数源码
一、在git找到php对应的版本 找到对应的分支版本可以下载也可以在线直接查看 通过这个地址 https://github.com/php/php-src 二、下面已shuffle函数举例,版本为7.4 找到对应的版本进入 点击ext,这个文件夹里面是存放函数的目录 在文件夹里搜不到stu…...
前端web自动化测试:selenium怎么实现关键字驱动
要做 ui 自动化测试,使用关键字驱动可以说是必须会的一种测试方式,它既可以在纯代码的自动化程序中运行,也可以在测试平台中使用。 使用纯代码方式时,自动化工程师先写好一个通用的程序,其他手工测试人员只需要把执行…...
C++标准模板(STL)- 类型支持 (数值极限,min,lowest,max)
数值极限 提供查询所有基础数值类型的性质的接口 定义于头文件 <limits> template< class T > class numeric_limits; numeric_limits 类模板提供查询各种算术类型属性的标准化方式(例如 int 类型的最大可能值是 std::numeric_limits<int>::m…...
国际SPEC CPU创榜以来整机最高纪录!浪潮信息八路服务器TS860G7刷新权威算力基准评测性能
近日,国际标准性能评估组织SPEC发布新一轮SPEC CPU2017通用算力性能测试榜单,浪潮信息八路服务器TS860G7以3940分获得SPEC CPU创榜以来整机性能最佳成绩,打破了单系统服务器性能世界纪录,较之前的测试最高分提升10%。 SPEC CPU201…...
【linux】重定向+缓冲区
重定向缓冲区 1.重定向1.1重定向本质1.2重定向接口1.3重定向分类1.3.1>输出重定向1.3.2>>追加重定向1.3.3<输入重定向 2.理解 >, >>, <3.如何理解linux下一切皆文件4.缓冲区4.1理解缓冲区问题4.1.1为什么要有缓冲区4.1.2缓冲区刷…...
【vim 学习系列文章 10 -- vim 将代码中空格高亮显示方法】
文章目录 vim 高亮空格使用背景如何配置vim 可以自动显示空格呢?vim highlight 命令使用介绍vim 空白行的处理vim match 命令详细介绍 vim 高亮空格使用背景 开发人员在编写代码之后,在review通过之后会将代码推到服务器然后merge,但是有些代…...
吴恩达深度学习笔记
B站看的视频,课太长了,180多节,但搬运的没有作业练习,最好找个能练习的 1,假设模型时,以前(2011版机器学习)用西塔代表参数组成的向量,现在用w代表参数组成的向量,b代表西塔0&#x…...