Vue 3 脚本样式的绑定百分比

问题描述 投票:0回答:0

我想用两种颜色给表格的一个单元格上色,使得它的左右部分有不同的颜色。但是,我无法动态更改左右颜色的部分。

我首先尝试通过写作风格

<style lang="scss" scoped>
table {
  th, td {
    $color_right: 50%;
    $color_left: 50%;
    background: linear-gradient(to right, blue $color_right, white $color_left);
  }
}
</style>

这按预期工作,因此单元格被着色为纯蓝色和纯白色。

但是,我很难从脚本中更改

$color_right
。 我试过的是

<script>
import { ref } from "vue";

export default {
    data() {
        return {
            color_portion: ref(0.5),
        }
    }
}
</script>

<style lang="scss" scoped>
@function number($string) {
  // Matrices
  $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  $numbers: 0 1 2 3 4 5 6 7 8 9;

  // Result
  $result: 0;

  // Looping through all characters
  @for $i from 1 through str-length($string) {
    // Do magic
  }

  @return $result;
}

table {
  th, td {
    $color_right: percentage(number(v-bind(color_portion))); // want it to be color_portion%
    $color_left: 50%; // will change to 1 - $color_right
    background: linear-gradient(to right, blue $color_right, white $color_left);
  }
}
</style>

不幸的是,

$color_right
在我看到的应用程序中似乎被评估为只是一个数字。 有什么方法可以使用
v-bind
和百分比吗?

css vue.js sass vuejs3 vuetify.js
© www.soinside.com 2019 - 2024. All rights reserved.