vue使用計算屬性完成動態(tài)滑竿條制作

更新時間：2022年01月24日 14:35:17 作者：huxiaoxiao.

這篇文章主要介紹了vue使用計算屬性完成動態(tài)滑竿條制作，文章圍繞計vue算屬制作動態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下

布局部分：

<div id="slider">
        <!-- 主要動畫效果：字體和進度條以及表情隨情緒程度百分比變化 -->
        <label for="range" :style="{'color':getHappinessColor}">情緒程度: {{val}}%</label>
<!-- 滑動桿的顏色應該與預先設置好的顏色進行綁定，顏色可隨意更改 -->
        <!-- 情緒程度的值也應該隨val值變動 -->
        <input type="range" name="" id="range" min="0" max="100" v-model="val">
 
<!-- 滑動桿的值應該與val綁定，val寫入了計算屬性,為了與下方滑動桿填充顏色的范圍同步 -->
        <div class="slider outer">
 <!-- 讓我們label 的寬度 等于們數(shù)據(jù)中心 val 的寬度,這樣就會隨著滑動桿的運動帶動label 運動,達到更改表情的效果  -->
        <label for="" class="slider inner" :style="{'width':val+'%',
        'border-radius':greaterThanFifty}">
                <span :style="{'right':getPlacement}">{{getHappiness}}</span>
            </label>
        </div>
    </div>

樣式部分：

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
:root {
    /* 全局css變量 */
    --yellow: #ffd100;
    --orange: #ff6a13;
    --darkGray: #53565a;
    --midGray: #888b8d;
    --white: #fff;
  }
*,*::after,*::before{
    color: var(--darkGray);
    box-sizing: border-box;
}
html,body {
      width: 100%;
      height: 100%;
}
body{
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--white);
}
#slider{
    /* 局部css變量 */
    --roundness: 20px;
    width: 100%;
    max-width: 600px;
    outline: 1px dashed red;
    padding: 4vh;
 
    /* 網(wǎng)格布局 */
    display: grid;
    justify-content: stretch;
}
#slider>label{
    width: 100%;
    font-size: 1.5em;
    padding: 0 0 0.5em;
    margin: auto;
}
#slider input{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    height: calc(var(--roundness) * 2);
    cursor: pointer;
}
#slider .outer{
    width: 100%;
    height: var(--roundness);
    background-color: var(--midGray);
    border-radius: var(--roundness);
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    z-index: 0;
    margin: auto;
    grid-row: 2/3;
    grid-column: 1/2;
}
 
#slider input:focus + .outer {
    outline: 1px dashed var(--orange);
  }
 
#slider label.inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--white);
    background: linear-gradient(to left, var(--yellow), var(--orange));
    border-top-left-radius: var(--roundness) !important;
    border-bottom-left-radius: var(--roundness) !important;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.5, 0.4, 0.2, 1);
    text-align: right;
    font-size: calc(var(--roundness) * 2);
    line-height: 1;
  }
  #slider label.inner span {
    position: absolute;
    right: -2px;
    top: calc(50% - var(--roundness) * 2);
    top: calc(var(--roundness) * -.3);
    transition: inherit;
  }

Vue 部分：

<script src="./js/vue.js"></script>
    <script>
        let a = new Vue({
            el:"#slider",
            data() {
                return {
                    val: 70,
                    // 關(guān)鍵點，同時用來動態(tài)關(guān)聯(lián)  1：情緒百分比，2：顯示出來的文本表情
                }
            },
            mounted() {
                this.val = Math.floor(Math.random() * 101)
            },
            computed: {
        getPlacement: function () {
            return `${(-0.009 * ((this.val * -1) + 104))}em`;
            // 獲取位置，因為是計算屬性，相當于是與val綁定了，給最下方的span綁定后就等于與上方與val綁定的width，進行“綁定”
        },
        greaterThanFifty: function () {
            return this.val > 50 ? `var(--roundness)` : `0`;
            // val值大于五十之后，邊框的變化，可以省略或者不綁定，不關(guān)鍵
        },
        getHappinessColor: function () {
            return `rgba(255, ${106 + (103 / 100 * this.val)}, ${(Math.floor(this.val * -1 / 7.692)) + 13}`;
            // 獲取顏色的函數(shù)，可以隨意更改數(shù)值，不過上方顏色過渡更加自然
        },
        getHappiness: function () {
            let mood;
            // 將val值與所有表情“物理綁定”
            if (this.val == 0) {
                mood = "??"
            } else if (this.val < 10) {
                mood = "??"
            } else if (this.val < 20) {
                mood = "??"
            } else if (this.val < 30) {
                mood = "??"
            } else if (this.val < 40) {
                mood = "??"
            } else if (this.val < 50) {
                mood = "??"
            } else if (this.val < 60) {
                mood = "??"
            } else if (this.val < 70) {
                mood = "??"
            } else if (this.val < 80) {
                mood = "??"
            } else if (this.val < 90) {
                mood = "??"
            } else if (this.val < 100) {
                mood = "??"
            } else if (this.val == 100) {
                mood = "??"
            }
            return mood;
        }
    }
        })
    </script>

最終樣式：