iview slider滑块再次封装及表单加减展示

最新推荐文章于 2025-01-03 11:06:55 发布

灰小小小熊

最新推荐文章于 2025-01-03 11:06:55 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_44883642/article/details/106520323

版权

本文介绍如何改造iview的slider组件，以满足特定样式需求，同时展示了如何实现滑块与表单值的实时同步。通过修改slider组件样式并编写独立的表单加减功能，达到了预期效果。示例代码和实际应用方法已给出，可用于参考和项目实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先展示一下需求要求实现的样子

用过iview的小伙伴们都知道，iview的滑块不是这个样子的，而且大部分的滑块都是圈圈点点，如下图所示

而且右边的表单也不是这样子的，肿么办，跟领导沟通完无果，我现在都怀疑，作为一个前端，是否还有权利去拒绝一些不好实现的地方，还是应该接受所有一切，有点矫情，哇哈哈哈，奈何，硬着头皮改吧，我这里是改了iview的slider的组件，从nodemodule里找到了slider的组件，改了一下样式部分然后实现了图一的效果，后面的表单加减号是单独写的，我先上一下slide.vue的修改后的代码，里面相关的依赖要靠你自己复制引入了，这里就不做过多赘述了

<template>
   <div :class="classes">
        <Input
            v-if="!range && showInput"
            :min="min"
            :size="inputSize"
            :max="max"
            :step="step"
            :value="exportValue[0]"
            :disabled="itemDisabled"
            :active-change="activeChange"
            @on-change="handleInputChange"></Input>
        <div
            :class="[prefixCls + '-wrap']"
            ref="slider" @click.self="sliderClick"
        >
            <input type="hidden" :name="name" :value="exportValue">
            <div
                :class="[prefixCls + '-bar']"
                :style="barStyle"
                @click.self="sliderClick"></div>
            <template v-if="showStops">
                <div
                    :class="[prefixCls + '-stop']"
                    v-for="item in stops"
                    :style="{ 'left': item +