javascript 如何避免使用typescript的vue中的硬编码颜色

jfewjypa 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(105)

我在vue中有一个使用typescript的组件，其中有一个选择颜色的函数：

chooseColor() {
      return (
        {
          color1: '#67213a',
          color2: '#909aaa',
        }[this.type] || '#67213a'
      );
    },

我也有一个color.scss函数，我在这里定义了相同的颜色：

$color1: '#67213a',
$color2: '#909aaa',

那么，如何在函数中避免硬编码颜色呢？

JavaScript

来源：https://stackoverflow.com/questions/75212690/how-to-avoid-hard-coded-colors-in-vue-using-typescript

1条答案

按热度按时间

am46iovg1#

这应该行得通：

:root {
  --color1: #67213a;
  --color2: #909aaa;
  }

<body>
    <div id="root">
        <div :style="{backgroundColor:`var(${chosen})`}">
            something
        </div>
        <button @click="setColor('--color1')">setColor</button>
    </div>

    <script type="module">
        import Vue from "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.esm.browser.js"
        const vue = new Vue({
            el: "#root",
            data() {
                return {
                    chosen: '--color2',
                }
            },
            methods: {
                setColor(color) {
                    this.chosen = color
                },
            },
        })
    </script>
</body>

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何避免使用typescript的vue中的硬编码颜色

1条答案

相关问题

热门标签

最新问答