【Vue】element plus Slider小数组件设置顺滑程度

Lucky_Turtle2026-05-26 16:32

文章目录

Slider滑块

ts 复制代码 
<template>
  <div class="simple_slider_container">
    <div v-if="title" :style="{ fontSize: fontSize, width: titleWidth }">{{ prop.title }}</div>
    <el-slider
      v-model="sliderValue"
      :max="prop.max * Math.pow(10, prop.precision)"
      :min="prop.min * Math.pow(10, prop.precision)"
      :format-tooltip="(val) => val / Math.pow(10, prop.precision)"
      style="margin-left: 10px"
    />
    <div :style="{ fontSize: fontSize, minWidth: '45px', textAlign: 'center' }">{{ data }}</div>
    <el-icon v-if="prop.setDefaultButton" class="simple_slider_refresh" @click="setDefault">
      <RefreshRight />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// 计算属性：转换真实值 ↔ 滑块原始值
import { onMounted } from 'vue'

const sliderValue = computed({
  get() {
    // 真实值 → 滑块值（乘以10）
    return data.value * Math.pow(10, prop.precision)
  },
  set(val) {
    // 滑块值 → 真实值（除以10）
    data.value = val / Math.pow(10, prop.precision)
  },
})

const prop = defineProps({
  defaultValue: {
    type: Number,
    default: 0,
  },
  setDefaultButton: {
    type: Boolean,
    default: true,
  },
  max: {
    type: Number,
    default: 100,
  },
  min: {
    type: Number,
    default: 0,
  },
  name: {
    type: Number,
    default: 0,
  },
  title: String,
  fontSize: {
    type: String,
    default: '16px',
  },
  titleWidth: {
    type: String,
    default: '6rem',
  },
  precision: {
    type: Number,
    default: 0,
  },
})

const data = defineModel()

const setDefault = () => {
  data.value = prop.defaultValue
}

onMounted(() => {
  if (data.value == null) {
    data.value = prop.defaultValue
  }
})
</script>

<style scoped lang="less">
.simple_slider_container {
  width: 100%;
  display: flex;
  align-items: center;
}

.simple_slider_refresh {
}

.simple_slider_refresh:hover {
  cursor: pointer;
}
</style>

Select选择器

ts 复制代码 
<template>
  <div class="simple_slider_container">
    <div v-if="title" :style="{ fontSize: fontSize, width: titleWidth }">{{ prop.title }}</div>
    <el-select v-model="data" style="width: 150px">
      <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

const prop = defineProps({
  defaultValue: {
    type: Number,
    default: 0,
  },
  options: {
    type: Array,
    default: () => [],
  },
  title: String,
  fontSize: {
    type: String,
    default: '16px',
  },
  titleWidth: {
    type: String,
    default: '6rem',
  },
})

const data = defineModel()

onMounted(() => {
  if (data.value == null) {
    data.value = prop.defaultValue
  }
})
</script>

<style scoped lang="less">
.simple_slider_container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

Antd选择

js 复制代码 
<template>

  <FormSearch v-model:value="queryParam"
              :columns="boutiqueSolutionSearchArgs"
              @on-search="getList" />

  <a-table
      ref="sTableRef"
      :columns="columns.filter(i=>i.dataIndex !== 'action')"
      :data-source="list"
      :loading="loading"
      :pagination="false"
      :row-selection="rowSelection"
      :rowKey="record => record.solutionId"
      bordered>
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'boutiqueSolutionState'">
        {{ text  === "LAUNCHED" ? "上架" : "下架"  }}
      </template>
    </template>
    <template #footer>
      <div style="display:flex;justify-content: flex-end;">
        <a-pagination v-model:current="pageNum"
                      v-model:page-size="pageSize"
                      :total="total"
                      show-quick-jumper
                      @change="onChange"/>
      </div>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import {boutiqueSolutionSearchArgs, columns} from "@/views/solution";
import {
  pageSolution
} from "@/api/solution";
import {onMounted, ref} from "vue";
import {FormSearch} from "@/components";
// const emits = defineEmits(["selectSolutionIdList"]);

let sTableRef = ref()
const queryParam = ref<any>({ueVersion: "V5_5"});
let list = ref()
const selectedSolutionIdList = defineModel()
const loading = ref(false)

const rowSelection = ref({
  selectedRowKeys: selectedSolutionIdList,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
    console.log(selectedRowKeys)
    selectedSolutionIdList.value=selectedRowKeys
    // emits('selectSolutionIdList', selectedSolutionIdList.value)
  },
});

// 获取列表
const getList = async () => {
  const param = {pageNum: pageNum.value, pageSize: pageSize.value, ...queryParam.value};

  const res = await pageSolution(param);
  list.value = res.data.list;
  total.value = res.data.total;
};

const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const onChange = (pageNumber: number) => {
  loading.value = true
  getList().finally(() => {loading.value=false})
};



onMounted(async () => {
  loading.value = true
  await getList().finally(() => {loading.value=false})
})


</script>


<style lang="less" scoped>

</style>
js 复制代码 
<template>

  <FormSearch v-model:value="queryParam"
              :columns="boutiqueSolutionSearchArgs"
              @on-search="getList"/>

  <a-table
      ref="sTableRef"
      :columns="columns.filter(i=>i.dataIndex !== 'action')"
      :data-source="list"
      :loading="loading"
      :pagination="false"
      :row-selection="rowSelection"
      :rowKey="record => record.solutionId"
      bordered>
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'boutiqueSolutionState'">
        {{ text === "LAUNCHED" ? "上架" : "下架" }}
      </template>
    </template>
    <template #footer>
      <div style="display:flex;justify-content: flex-end;">
        <a-pagination v-model:current="pageNum"
                      v-model:page-size="pageSize"
                      :total="total"
                      show-quick-jumper
                      @change="onChange"/>
      </div>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import {boutiqueSolutionSearchArgs, columns} from "@/views/solution";
import {
  pageSolution
} from "@/api/solution";
import {onMounted, ref} from "vue";
import {FormSearch} from "@/components";
// const emits = defineEmits(["selectSolutionIdList"]);

let sTableRef = ref()
const queryParam = ref<any>({ueVersion: "V5_5"});
let list = ref()
const selectedSolutionIdList = ref()
const selectedSolutionRow = ref([])
const loading = ref(false)

const rowSelection = ref({
  selectedRowKeys: selectedSolutionIdList,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
    console.log(selectedRowKeys)
    selectedSolutionIdList.value = selectedRowKeys
    // emits('selectSolutionIdList', selectedSolutionIdList.value)
  },
  onSelect: (record: any, selected: boolean, selectedRows: []) => {
    // console.log("==============1",selectedRows);
    selectedSolutionRow.value.push(selectedRows)
  },
  onSelectAll: (selected: boolean, selectedRows: any[], changeRows:  []) => {
    selectedSolutionRow.value.push(selectedRows)
  },
  preserveSelectedRowKeys: true // 关键：否则翻页就清空
});

// 获取列表
const getList = async () => {
  const param = {pageNum: pageNum.value, pageSize: pageSize.value, ...queryParam.value};

  const res = await pageSolution(param);
  list.value = res.data.list;
  total.value = res.data.total;
};

const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const onChange = (pageNumber: number) => {
  loading.value = true
  getList().finally(() => {
    loading.value = false
  })
};


onMounted(async () => {
  loading.value = true
  await getList().finally(() => {
    loading.value = false
  })
})


</script>


<style lang="less" scoped>

</style>

Antd input 分、元转换

js 复制代码 
<a-input-number
    v-model:value="goodsState.price"
    :formatter="(value: number) => value / 100"
    :max="999999"
    :min="0"
    :parser="(value: number) => value * 100"
    :precision="2"
    style="width: 100%"
    suffix="元"
/>
相关推荐
竹林8181 天前
用 Pinata + IPFS 存 NFT 元数据踩了三天坑，我总结了这份完整的前端实现方案
javascript
林希_Rachel_傻希希1 天前
web性能优化之延迟加载图片和<inframe>
前端·javascript·面试
maxmaxma1 天前
Konva 从入门到实践 - day1
前端
火星校尉1 天前
一场数据基建与消费场景的跨界实验
java·前端·数据库·python·php
W是笔名1 天前
python_let`s try it 6___BMI计算器
java·前端·python
risc1234561 天前
Lucene80DocValuesConsumer 五种类型源码阅读顺序
java·服务器·前端
小米渣的逆袭1 天前
Chrome Extension Script World（ISOLATED / MAIN）原理与适用场景
前端·javascript·chrome
微信开发api-视频号协议1 天前
Codex++安全边界探秘：从模型能力到风险防御
前端·安全·微信·企业微信
想你依然心痛1 天前
AtomCode 在前端开发中的实战体验：React + TypeScript 项目开发实录
前端·react.js·typescript
疯狂的魔鬼1 天前
精确计算容器剩余视口高度：useAutoContainerFullHeight 的工程实践
前端·css·typescript
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03AI科技热点日报 | 2026年07月01日04【AI】2026 年具身智能模型和世界模型总结052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？062026 年 AI 大模型 & AI 编程工具实战全总结072026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？082026 AI 编程工具选型横评：Cursor / Claude Code / Trae / Copilot 到底选谁（建议收藏·避坑版）09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析