vue使用计算属性完成动态心情滑竿条的制作

布局部分：

                  情绪程度: {     
      {val}}%                              
                            {     
      {getHappiness}}                      
     

样式部分：

*{     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;      /* 网格布局 */     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 部分：

最终样式：