Question

我目前正在一个包含vuejs的项目中，我需要开发一个日期选择器。为此，我决定使用以下软件包v-calendar

我已经能够立即实现该组件并按预期工作，但是我正在尝试一些自定义功能，例如样式（遵循文档），但是在某些情况下它无法正常工作，可以不知道为什么。这个想法是为了实现这一点：

我已经能够通过setupCalendar设置标题样式，但是，当我尝试将样式应用于内容时，它不会改变。在文档中进行了进一步搜索之后，我注意到它们将样式作为属性传递，我尝试将其复制到没有成功。

我还想知道，是否可以将父组件继承的$ attrs提交到输入中？目前，我正在使用input-props一对一传递，但我想知道是否有更好的方法。

现在是这样的：

有什么建议吗？

<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>

Answer 1

如果使用vue-datepicker，则可以更改css样式，将此样式添加到您的.css或<style> ...</style>内的视图中

这里是元素的示例，我已经使用它来更改输入的自举样式

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;
}

vue-如何更改包装v-calendar的样式

1 个答案: