• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

布局部分:

<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 的宽度 等于们数据中心 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;
 
    /* 网格布局 */
    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,
                    // 关键点,同时用来动态关联  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}`;
            // 获取颜色的函数,可以随意更改数值,不过上方颜色过渡更加自然
        },
        getHappiness: function () {
            let mood;
            // 将val值与所有表情“物理绑定”
            if (this.val == 0) {
                mood = " 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue做一个简单的随机点名册发布时间:2022-02-05
下一篇:
vue中的生命周期及钩子函数发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap