uniapp动态修改样式_Vue如何动态修改CSS变量

Dear 丶 2022-10-13 05:25 2147阅读 0赞

想要动态修改css样式就得能动态的给<style></style>赋值，可是<style></style>里面又写不了变量（有可能可以但是我不会。。），所以想了个这种办法，通过给模板文件的:style动态复制从而间接的修改<style></style>里面的变量

那接下来的就简单了，将red换成data里面的变量，把:style传过去的color变量调用起来

<template>
       <div :style="{'--color':color}">
         <div class="title color">测试</div>
       </div>
     </template>
     <script>
     export default {
       data () {
         return {
           color: 'red'
         }
       }
     }
     </script>
     <style lang="less" scoped>
      .color{
        color: var(--color) !important;
      }
      .title{
        color:blue;
      }
     </style>

案例

<template>
      <members-list
          title="已报名"
          :membersList="membersList" :finished="finished" :loading="loading"
          :showFollowBtn="applets !== 3"
          @listLoadMore="onLoadList"
          class="vant-list-wrap"
          :style="{
            '--scrollheight':calcScrollHeight
          }"
      />
    </template>
    
    <script>
    import { mapState } from "vuex";
    export default {
      computed: {
        ...mapState(["applets"]),
    
        calcScrollHeight(){
          // #ifdef MP-WEIXIN
          let { windowHeight } = this.systemInfo;
          if (this.StatusBar > 20) return `${ windowHeight - this.StatusBar - 44}px`
          return `${ windowHeight - this.StatusBar - 44}px`
          // #endif
          // #ifndef MP-WEIXIN
          return '0px';
          // #endif
        },
      },
      data() {
        return {
          membersList: [],
          pageNo: 0,
          totalCount: 0,
          loading: false,
          finished: false,
          systemInfo:{},
        };
      },
      mounted(){
        // #ifdef MP-WEIXIN
        let that = this;
        wx.getSystemInfo({
          success: function (res) {
            that.systemInfo = res
          },
        });
        // #endif
      },
      methods: {
        onLoadList() {
          if (!this.finished) {
            this.loading = true;
            let actId = this.$route.query.id;
            this.pageNo += 1;
            this.getActMembersList(this.pageNo, 12, actId);
          }
        },
        getActMembersList(pageNo, pageSize, actId) {
          this.$axios
            .post("/social-cms-app/frontend/activity/actSign/queryByPage", {
              pageNo: pageNo,
              pageSize: pageSize,
              actId: actId,
            })
            .then(({ data }) => {
              this.loading = false;
              if (!data) { // 话题禁用时为null
                this.finished = true;
                return;
              }
              else {
                let list = data.list || [];
                this.membersList.push(...list);
                console.log("getmembersList");
                console.log(data);
                this.totalCount = data.totalCount;
                if (this.membersList.length >= this.totalCount) {
                  this.finished = true;
                }
              }
            });
        },
      }
    };
    </script>
    
    <style lang="scss" scoped>
    // #ifdef MP-WEIXIN
    .page{
      height: 100vh;
      overflow: hidden;
    }
    .vant-list-wrap{
      ::v-deep .page{
        // height: calc(100vh - 128px);
        padding-bottom: 0;
      }
      ::v-deep .members-list{
        height: var(--scrollheight)!important;
        padding: 0!important;
        van-list{
          scroll-view{
            height: var(--scrollheight)!important;
            .member{
              width: calc(100vw - 40px);
              margin: 0 auto;
              padding: 0 20px;
              border: none;
              position: relative;
            }
            .member::after{
              content: "";
              position: absolute;
              height: 1px;
              background: #F7F8FA;
              width: calc(100vw - 40px);
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
    }
    // #endif
    </style>

### 如果想要px不被编译，这使用 --startuspx 动态变量,通过:style方式避过css编译 ###