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

文章目录

- Slider滑块
- Select选择器
- Antd选择
- [Antd input 分、元转换](#Antd input 分、元转换)

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="元"
/>