vue使用計算屬性完成動態(tài)滑竿條制作
更新時間：2022年01月24日 14:35:17 作者：huxiaoxiao.
這篇文章主要介紹了vue使用計算屬性完成動態(tài)滑竿條制作，文章圍繞計vue算屬制作動態(tài)滑竿條的相關代碼完成內(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,
// 關鍵點，同時用來動態(tài)關聯(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值大于五十之后，邊框的變化，可以省略或者不綁定，不關鍵
},
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>
最終樣式：
到此這篇關于vue使用計算屬性完成動態(tài)滑竿條制作的文章就介紹到這了,更多相關vue使用計算屬制作動態(tài)滑竿條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue路由--網(wǎng)站導航功能詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要給大家介紹了關于vue2中watch用法的相關資料,通過watch監(jiān)聽器,我們可以實時監(jiān)控數(shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進行相應的操作,需要的朋友可以參考下2023-09-09
最近在做商城類的項目，需要使用到客服系統(tǒng)，用戶選擇的騰訊IM即時通信，所以本文主要介紹了vue實現(xiàn)集成騰訊TIM即時通訊，感興趣的可以了解一下2021-06-06
本文主要介紹了Element-plus側邊欄踩坑的問題解決,主要解決了el-menu直接嵌套el-menu-item菜單,折疊時不會出現(xiàn)文字顯示和小箭頭無法隱藏的問題,具有一定的參考價值,感興趣的可以了解一下2023-08-08
Vue+jsPlumb實現(xiàn)連線效果(支持滑動連線和點擊連線)
jsPlumb 是一個比較強大的繪圖組件，它提供了一種方法，主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實現(xiàn)連線效果，同時支持滑動連線和點擊連線，感興趣的可以了解一下2023-01-01
這篇文章主要介紹了vue.js使用v-if實現(xiàn)顯示與隱藏功能,結合簡單實例形式分析了使用v-if進行判斷實現(xiàn)元素的顯示與隱藏功能,需要的朋友可以參考下2018-07-07
基于Vue中this.$options.data()的this指向問題
這篇文章主要介紹了基于Vue中this.$options.data()的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
props指父組件往子組件中傳入?yún)?shù)，這篇文章主要為大家介紹了vue3中props的原理與使用，文中的示例代碼講解詳細，感興趣的可以了解一下2023-05-05
vue3+elementui-plus實現(xiàn)一個接口上傳多個文件功能
這篇文章主要介紹了vue3+elementui-plus實現(xiàn)一個接口上傳多個文件,先使用element-plus寫好上傳組件，然后假設有個提交按鈕，點擊上傳文件請求接口，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue豎向步驟條方式,具有很好的參考價值,希望對大家有所幫助,2023-12-12