两种方式覆盖css样式
2021-11-01 14:41:32

两种方式覆盖css样式

step1:

<template>
  <div>
    <h1>{{ date + '	' + e4 }}</h1>
    <v-dialog v-model="dialogIncorrectInfo" max-width="580">
      <v-card>
        <v-date-picker v-model="date"
                       locale="zh-cn">
        </v-date-picker>
        <v-time-picker
            v-model="e4"
            format="24hr"
        ></v-time-picker>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              class="primary"
              @click="btnSure">确定
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-btn @click="login" class="btn btn-indigo">Login</v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      e4: '11:15',
      dialogIncorrectInfo: false
    };
  },
  methods: {
    login() {
      this.dialogIncorrectInfo = true;
    },
    btnSure() {
      this.dialogIncorrectInfo = false;
      console.log(this.date);
      console.log(this.e4);
    }
  }
};
</script>
<style>
.v-time-picker-title {
  justify-content: flex-start !important;
  height: 56px;
}

</style>

step2:

<template>
  <div>
    <h1>{{ date + '	' + e4 }}</h1>
    <v-dialog v-model="dialogIncorrectInfo" max-width="580">
      <v-card>
        <v-date-picker v-model="date"
                       locale="zh-cn">
        </v-date-picker>
        <v-time-picker
            v-model="e4"
            format="24hr"
        ></v-time-picker>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              class="primary"
              @click="btnSure">确定
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-btn @click="login" class="btn btn-indigo">Login</v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      e4: '11:15',
      dialogIncorrectInfo: false
    };
  },
  methods: {
    login() {
      this.dialogIncorrectInfo = true;
    },
    btnSure() {
      this.dialogIncorrectInfo = false;
      console.log(this.date);
      console.log(this.e4);
    }
  }
};
</script>
<style scoped>
::v-deep .v-time-picker-title {
  justify-content: flex-start;
  height: 56px;
}

</style>

end