z-base-ui

Appearance

ZPiezometer ​

压力计，类似于进度条一样的东西，作用像温度计那种随数值发生变化。

基础用法 ​

10
<template>
  <div class="box">
    <z-piezometer width="20px" height="150px" :value="10"></z-piezometer>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.box {
  margin-left: 124px;
}
</style>

起始值 ​

通过 min 和 max 设置最小值和最大值

0
<template>
  <div class="box">
    <z-piezometer width="20px" height="150px" :min="0.8" :max="10"></z-piezometer>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.box {
  margin-left: 124px;
}
</style>

刻度 ​

通过 mark 设置文本标记

0
20
40
60
80
100
10
mark为number时，每隔n * mark步，添加一个标记
🤣
80
10
mark为数组时，自定义标记
<template>
  <div class="box">
    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="20"></z-piezometer>
      <div>mark为number时，每隔n * mark步，添加一个标记</div>
    </div>

    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="mark"></z-piezometer>
      <div>mark为数组时，自定义标记</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import { IPiezometerMark } from "@d7ee/z-base-ui/dist/types/components/ZPiezometer"

const num = ref(10);

const mark = ref<IPiezometerMark[]>([
  {label: '🤣', value: 30},
  {label: '80', value: 80},
]);

setInterval(() => {
  num.value = Math.floor(Math.random() * 100);
}, 1000);
</script>

<style lang="less" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>

自定义样式内容，通过 mark 结合 tick 插槽实现自定义mark样式

0
20
🙄
60
80
💖
10
<template>
  <div class="box">
    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="20">
        <template #tick="{label}">
          <div v-if="label === 40">🙄</div>
          <div v-else-if="label === 100">💖</div>
        </template>
      </z-piezometer>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const num = ref(10);

setInterval(() => {
  num.value = Math.floor(Math.random() * 100);
}, 1000);
</script>

<style lang="less" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>

刻度位置 ​

通过 position 设置刻度停靠位置

0
20
40
60
80
100
10
left
0
🤠
40
💦
80
100
0
20
💜
💦
80
100
sides
🤣
80
10
right
<template>
  <div class="box">
    <div>
      <z-piezometer position="left" width="20px" height="280px" :value="num" :mark="20"></z-piezometer>
      <div>left</div>
    </div>

    <div>
      <z-piezometer position="sides" width="20px" height="280px" :value="num" :mark="20">
        <template #tick="{type, label}">
          <div v-if="type === 'left' && label === 20">🤠</div>
          <div v-if="type === 'right' && label === 40">💜</div>
          <div v-if="label === 60">💦</div>
        </template>
      </z-piezometer>
      <div>sides</div>
    </div>


    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="mark"></z-piezometer>
      <div>right</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import { IPiezometerMark } from "@d7ee/z-base-ui/dist/types/components/ZPiezometer"

const num = ref(10);

const mark = ref<IPiezometerMark[]>([
  {label: '🤣', value: 30},
  {label: '80', value: 80},
]);

setInterval(() => {
  num.value = Math.floor(Math.random() * 100);
}, 1000);
</script>

<style lang="less" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>

指针 ​

使用 cursor 插槽可自定义指针样式。

0
20
40
60
80
100
10
幽灵指针
0
20
40
60
80
100
🧑‍🚀
自定义指针
<template>
  <div class="box">
    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="20" ghost></z-piezometer>
      <div>幽灵指针</div>
    </div>

    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="20">
        <template #cursor>
          <div class="size">🧑‍🚀</div>
        </template>
      </z-piezometer>
      <div>自定义指针</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const num = ref(10);

setInterval(() => {
  num.value = Math.floor(Math.random() * 100);
}, 1000);
</script>

<style lang="less" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.size  {
  font-size: 18px;
}
</style>

自定义色彩 ​

通过 strokeColor 设置进度条颜色，当你使用该属性时，指针的背景色会跟随进度条一同变化,指针背景变化请参考色彩同步。

当 strokeColor 为数组时，value <= item.value，颜色为item.color

0
20
40
60
80
100
10
单色
0
20
40
60
80
100
10
多色
<template>
  <div class="box">
    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="20" stroke-color="#f06292"></z-piezometer>
      <div>单色</div>
    </div>

    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="20" :stroke-color="strokeColor"></z-piezometer>
      <div>多色</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import { IPiezometerStroke } from "@d7ee/z-base-ui/dist/types/components/ZPiezometer"

const num = ref(10);

const strokeColor:IPiezometerStroke[] = [
  {value: 20, color: "#303030"},
  {value: 40, color: "#fdd835"},
  {value: 60, color: "#c792ea"},
  {value: 100, color: "linear-gradient(to bottom, #9575cd, #42a5f5)"},
]

setInterval(() => {
  num.value = Math.floor(Math.random() * 100);
}, 1000);
</script>

<style lang="less" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.size  {
  font-size: 18px;
}
</style>

色彩同步 ​

使用 sync-cursor 启用色彩跟随。

注意：在1.0.32版本以前，指针的色彩默认跟随进度，在1.0.32版本及其以后被取消了，需要您手动开启。

0
20
40
60
80
100
10
<template>
  <div class="box">
    <div>
      <z-piezometer width="20px" height="280px" :value="num" :mark="20" :stroke-color="strokeColor" sync-cursor></z-piezometer>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import { IPiezometerStroke } from "@d7ee/z-base-ui/dist/types/components/ZPiezometer"

const num = ref(10);

const strokeColor:IPiezometerStroke[] = [
  {value: 20, color: "#303030"},
  {value: 40, color: "#fdd835"},
  {value: 60, color: "#c792ea"},
  {value: 100, color: "linear-gradient(to bottom, #9575cd, #42a5f5)"},
]

setInterval(() => {
  num.value = Math.floor(Math.random() * 100);
}, 1000);
</script>

<style lang="less" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.size  {
  font-size: 18px;
}
</style>

API 属性 ​

属性名说明类型默认值
value默认值，使用v-model:value绑定number0
max最大值number100
min最小值number0
ghost幽灵指针，在1.2.11后被废除boolean—
mark刻度标记，详见刻度number | IPiezometerMark[]—
markColor刻度标签文本颜色string—
width宽度string—
height高度string—
radius柱体圆角string—
position刻度停靠位置sides | left |right |noneright
strokeColor进度条颜色string |IPiezometerStroke[]—
cylinderStyle柱体样式Object—
bg柱体背景色string—
syncCursor指针背景与进度背景一致，version >= 1.0.32booleanfalse

slot 插槽 ​

slotName说明参数
tick刻度function(value, label, type)
cursor游标指针function(value, color)

类型声明 ​

typescript
interface IPiezometerMark {
  // 显示内容
  label: string,
  // 数值
  value: number
}

interface IPiezometerStroke {
  // 值 <= value时，进度条颜色为color
  value: number,
  // 色值
  color: string
}