使用vue3+ts封装一个Slider滑块组件

创建一个名为 Slider.vue 的文件

<template><div class="slider-container"><inputtype="range":value="value"@input="handleInput"@change="handleChange"/><div class="slider-value">{{ value }}</div></div>
</template><script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';// 定义 props
const props = defineProps<{modelValue: number;min: number;max: number;step: number;
}>();// 定义 emits
const emit = defineEmits<{(e: 'update:modelValue', value: number): void;
}>();// 响应式引用当前值
const value = ref(props.modelValue);// 处理输入事件
const handleInput = (event: Event) => {const newValue = Number((event.target as HTMLInputElement).value);value.value = newValue;emit('update:modelValue', newValue);
};// 处理 change 事件
const handleChange = () => {// 这里可以添加额外的逻辑,比如验证或格式化值
};
</script><style scoped>
.slider-container {width: 100%;display: flex;flex-direction: column;align-items: center;
}input[type='range'] {width: 100%;
}.slider-value {margin-top: 10px;font-size: 1.2em;
}
</style>

在这个组件中,使用了 Vue 3 的 <script setup> 语法,它允许我们在单文件组件中使用 Composition API,而不需要额外的 setup 函数。我们使用 defineProps 来定义组件的 props,使用 defineEmits 来定义组件可以触发的事件。

组件的 props 包括:

  • modelValue:滑块的当前值。
  • min:滑块的最小值。
  • max:滑块的最大值。
  • step:滑块的步长。

组件触发的事件是 update:modelValue,它会在滑块的值改变时被触发,并传递新的值。

在模板中,使用了一个 <input> 元素来创建滑块,并使用 v-model 来绑定滑块的值。我们还添加了一个 handleInput 方法来处理滑块的输入事件,并在值改变时更新 value 引用和触发事件。

可以将这个组件导入到其他 Vue 组件中

<template><div><Sliderv-model="sliderValue":min="0":max="100":step="1"/><p>Slider value: {{ sliderValue }}</p></div>
</template><script setup lang="ts">
import { ref } from 'vue';
import Slider from './Slider.vue';const sliderValue = ref(50);
</script>

关注微信公众号温暖前端,不定期分享前端知识点和前端资料↓↓↓

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24747.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

泛化能力的理解

第一个解释&#xff1a; 大模型泛化能力简介 泛化&#xff08;Generalisation&#xff09;可以理解为一种迁移学习的能力&#xff0c;大致可以理解为把从过去的经验中学习到的表示、知识和策略应用到新的领域&#xff0c;是大模型最被需要的能力。 在NLP的上下文中&#xff0c;…

React Hooks路由传参

场景&#xff1a;如何把想要的参数带到跳转过去的页面里呢&#xff1f;很简单 上代码&#xff1a; 在你需要跳转的页面上 引入 Link用来跳转使用 Link跳转并携带参数 然后需要什么参数就带什么过去喽 这里record里面存的就是我的数据 我只需要id和state然后到你跳转过去的页面…

【Mtk Camera开发学习】06 MTK 和 Qcom 平台支持通过 Camera 标准API 打开 USBCamera

本专栏内容针对 “知识星球”成员免费&#xff0c;欢迎关注公众号&#xff1a;小驰行动派&#xff0c;加入知识星球。 #MTK Camera开发学习系列 #小驰私房菜 Google 官方介绍文档&#xff1a; https://source.android.google.cn/docs/core/camera/external-usb-cameras?hlzh-…

http和https数据传输与协议区分

目录 1. 数据传输安全性2. 端口号3. URL 前缀4. SSL/TLS 证书5. 性能6. SEO 和用户信任7. 应用场景总结 HTTP&#xff08;HyperText Transfer Protocol&#xff09;和 HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是用于在客户端&#xff08;如浏览器&…

【JavaScript】内置对象 - 字符串对象 ④ ( 根据索引位置返回字符串中的字符 | 代码示例 )

文章目录 一、根据索引位置返回字符串中的字符1、charAt 函数获取字符2、charCodeAt 函数获取字符 ASCII 码3、数组下标获取字符 String 字符串对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String 一、根据索引位置返回…

十七、【源码】一级缓存

源码地址&#xff1a;https://github.com/mybatis/mybatis-3/ 仓库地址&#xff1a;https://gitcode.net/qq_42665745/mybatis/-/tree/17-first-level-cache 一级缓存 MyBatis 的一级缓存用于减少在同一个 SqlSession 内的重复查询&#xff0c;适用于需要在单个会话内多次查…

Windows下对于Qt中带 / 的路径的处理

在Windows下&#xff0c;如果你想使用操作系统的分隔符显示用户的路径&#xff0c;请使用 toNativeSeparators()。 请看以下代码&#xff1a; void Player::on_playBtn_clicked() {if (this->m_url.isEmpty()) {openMedia();if (this->m_url.isEmpty())return;}qDebug(…

介绍单例模式

描述 保证一个类只有一个实例&#xff0c;并且提供一个全局访问点 场景&#xff1a; 重量级的对象&#xff0c;不需要多个实例&#xff0c;如线程池&#xff0c;数据库连接池 实现 1. 懒汉模式 延迟加载的方式 只有在真正使用的时候&#xff0c;才开始实例化线程安全问题…

widerface人脸检测数据集VOC+YOLO格式16094张1类别

为了更好研究人脸检测数据集&#xff0c;特将widerface人脸检测数据集转成VOCYOLO格式&#xff0c;以方便进行yolo系列训练。这里将widerface拆分成2个版本,即A版本和B版本&#xff0c;两个版本不存在重叠可以合并训练 。拆分方式不是随便拆分的&#xff0c;而是根据数据集标注…

C++基础三:类和对象的细节原理

目录 类和对象以及this指针: 概念 构造函数 拷贝构造函数和赋值运算符重载函数(深拷贝) memcpy 实现string 构造的初始化列表 常方法: 指向类成员的指针 类和对象以及this指针: 概念 面向对象四大特性:抽象:抽象是一种将对象的共同特征提取出来并定义成一个通…

【介绍下什么是Kubernetes编排系统】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

Mysql的脏读、幻读、不可重复读

简介&#xff1a;MySQL的事务并发指的是多个异步任务同时操作同一个表所造成的一些异常。而且这些异常都与“读”有关系&#xff0c;即跟select关键字有关系。 1、脏读 A事务的查询select读取了其他B、C、D等事务没有进行commit的数据&#xff0c;但是B、C、D等事务可能并没有进…

基于springboot开发的Java MES制造执行系统源码,全套源码,一款数字化管理平台源码 云MES系统源码

基于springboot开发的Java MES制造执行系统源码&#xff0c;全套源码&#xff0c;一款数字化管理平台源码 云MES系统源码 MES系统源码相关技术&#xff1a; ​技术架构&#xff1a;springboot vue-element-plus-admin 开发语言&#xff1a;Java 开发工具&#xff1a;idea 前…

分享一个用python写的本地WIFI密码查看器

本章教程&#xff0c;主要分享一个本地wifi密码查看器&#xff0c;用python实现的&#xff0c;感兴趣的可以试一试。 具体代码 import subprocess # 导入 subprocess 模块&#xff0c;用于执行系统命令 import tkinter as tk # 导入 tkinter 模块&#xff0c;用于创建图形用…

俄罗斯服务器租用攻略:选择优质服务器,开启海外市场新征程

随着国际贸易的不断发展&#xff0c;俄罗斯作为一个重要的贸易伙伴备受关注。许多企业和公司为了开拓海外市场&#xff0c;选择将业务拓展到俄罗斯&#xff0c;而在这个过程中&#xff0c;租用一台优质的服务器成为了必须面对的问题。俄罗斯作为一个经济发展迅速的国家&#xf…

使用vue3+ts封装一个自动补全输入框Autocomplete组件

创建一个名为 Autocomplete.vue 的文件&#xff0c;在这个组件中&#xff0c;使用了 Vue 3 的 Composition API&#xff0c;包括 ref、watch、onMounted 等。组件接收 placeholder、debounce 和 clearable 作为 props&#xff0c;并根据这些 props 来渲染输入框和下拉菜单 <…

图论第7天

今天去打了会羽毛球。最近还是有点累啊&#xff0c;今天尽量效率 1971. 寻找图中是否存在路径 第一步是先整init 第二步先把该关联的关联 第三步判断是否有路 class Solution { private:int nMax 200005;vector<int>father vector<int>(nMax,0);void init(i…

【Linux】进程间通信之匿名管道

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

TypeScript未知泛型——unknown和any

在 TypeScript 中&#xff0c;如果你想要表示一个泛型变量&#xff0c;但你不知道或不关心它具体是什么类型&#xff0c;你可以使用 any 类型。然而&#xff0c;any 类型会绕过类型检查&#xff0c;这可能不是你想要的。为了保持类型安全性&#xff0c;TypeScript 提供了一个特…

Day50 动态规划part09

LC198打家劫舍 偷前一家或者偷前两家和这家&#xff1a;dp[i] Math.max(dp[i-2]nums[i],dp[i-1]);代码 LC213打家劫舍II&#xff08; 未掌握&#xff09; 解题思路&#xff1a;因为成环了&#xff0c;所以首位元素一定是两者只能选择一个或者两者都不选三种情况&#xff1…