我目前正在進行一個包含Vue.js的項目，我需要開發一個日期選擇器。為此，我決定使用v-calendar包。

我已經能夠實現該組件，并且開箱即用。然而，我正在嘗試一些定制，如樣式(遵循文檔)，但它只是在某些情況下不起作用，我不知道為什么。

這個想法是為了達到這個目的:

我已經可以通過setupCalendar設置頁眉樣式了。然而，當我試圖將樣式應用于內容時，它不會改變。 在文檔中進一步搜索后，我注意到他們將樣式作為屬性傳遞，我試圖復制它，但沒有成功。

我還想知道，是否可以將接收到的由父組件繼承的$attrs提交到輸入中？目前，我使用輸入道具一個一個地傳遞，但是有更好的方法嗎？

現在是這樣的:

<template>
    <date-picker
        :attributes="attributes"
        v-model="date"
        :input-props="{
            id: $attrs.id,
            name: $attrs.name,
            class: 'input--default color--white',
            autocomplete: 'nope',
            readonly: true
        }"
    >
    </date-picker>
</template>

<script>
    // packages
    import { setupCalendar, DatePicker } from 'v-calendar'
    import 'v-calendar/lib/v-calendar.min.css';

    setupCalendar({
        locale: 'pt-PT',
        themeStyles: {
            wrapper: {
                fontSize: '17px',
                lineHeight: '21px',
                boxShadow: '5px 5px 10px 1px rgba( 0, 0, 0, .10 )',
            },
            header: {
                color: '#f7890b',
                textTransform: 'capitalize'
            },
            weekdays: {
                color: '#ededed'
            },
        },
         attributes: [{
            contentStyle: {
                color: '#ff4d4d', // Red
                fontWeight: 600,
                fontSize: '10px',
            },
            popover: { color: 'yellow', },
            highlight: {
                backgroundColor: 'purple',
            },
        }]

    });

    export default {
        inheritAttrs: false,
        components: {
            DatePicker
        },
        data () {
            return {
                date: null,
                attributes: [{
                    contentStyle: {
                        color: '#ff4d4d', // Red
                        fontWeight: 600,
                        fontSize: '10px',
                    },
                    popover: { color: 'yellow', },
                    highlight: {
                        backgroundColor: 'purple',
                    },
                }]
            }
        }
    }
</script>

<style>

</style>

如果使用vue-datepicker，您可以更改CSS樣式，將這些樣式添加到您的。css或者在你的視圖里面& ltstyle & gt...& lt/style & gt；

這里有一個元素的例子。我已經使用它將輸入更改為Bootstrap樣式:

body {
  font-family: "Helvetica Neue Light", Helvetica, sans-serif;
  padding: 1em 2em 2em;
}
input,
select {
  padding: 0.75em 0.5em;
  font-size: 100%;
  border: 1px solid #ccc;
  width: 100%;
}

select {
  height: 2.5em;
}

.example {
  background: #f2f2f2;
  border: 1px solid #ddd;
  padding: 0em 1em 1em;
  margin-bottom: 2em;
}

code,
pre {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #bbb;
  display: block;
  background: #ddd;
  border-radius: 3px;
}

.settings {
  margin: 2em 0;
  border-top: 1px solid #bbb;
  background: #eee;
}

h5 {
  font-size: 100%;
  padding: 0;
}

.form-group {
  margin-bottom: 1em;
}

.form-group label {
  font-size: 80%;
  display: block;
}

//v-calendar支持這種樣式，我們可以這樣使用它。

將它放在模板標記中:

將它放在腳本標記中:

從& quot導入日歷v-calendar/lib/components/calendar . UMD & quot；；

分配數據變量時:

屬性:[

{
      highlight: {
        style: {
          borderRadius: '6px',
          border: '2px solid #1982EF'
        },
      },
      dates: new Date()
    },
    {
      dot: {
        style: {
          backgroundColor: '#53af52',
          marginBottom: '3px',
        },
      },
      dates: [],
    },
    {
      dot: {
        style: {
          backgroundColor: '#f2a000',
          marginBottom: '3px',
        },
      },
      excludeDates: null,
    },
    {
      content: {
        style: {
          display:'none !important'
        },
      },
      excludeDates: null,
    }
  ],

這些屬性被傳遞給v-calendar組件作為處理樣式的道具。