javascript - vue-fullcalendar - css 类和换行符不起作用

Question

这里有人使用 Wanderxx 制作的 vue-fullcalendar 组件吗？

我在两件事上遇到了问题:

(1) css 类未应用[已解决]

我用这个计算函数填充了每个 eventData 对象:

  eventsArr: function(){
        let newArr = [];
        let arrEvents = this.transactions;
        for (let x in arrEvents){
          let eventData = new Object();
          if(arrEvents[x].Status == "Reserved"){
            let title = arrEvents[x].Product_name + " \n " + arrEvents[x].userData.Account_name;
            eventData.title = title;
            eventData.start = arrEvents[x].dateValid;
            eventData.end = arrEvents[x].dateValid;
            eventData.cssClass = 'RTW';
            newArr.push(eventData);
          }
          else if(arrEvents[x].Status == "Accepted"){
            let title = arrEvents[x].Product_Type + " \n " + arrEvents[x].userData.Account_name;
            eventData.title = title;
            eventData.start = arrEvents[x].dateFinish;
            eventData.end = arrEvents[x].datefinish;
            eventData.cssClass = 'mto';
            newArr.push(eventData);
          }
        }
        return newArr;
    }

正如您在 prop cssClass 中看到的那样，类 mto 在 css 部分中声明如下:

.mto{
  color: white;
  background-color: orange;
}

事件应以白色字体和橙色背景显示。但是它没有被应用并且样式保持与默认相同(与 RTW cssClass 相同的情况)。当我检查页面时，mto 类出现在标签中，所以我不知道哪里出错了。

(2) 换行符不起作用

其中一个 Prop 是title，在存储它之前，我先创建了一个变量并像这样存储它:

let title = arrEvents[x].Product_Type + " \n " + arrEvents[x].userData.Account_name;
eventData.title = title;

我的目标是将标题显示为两行。但它不起作用，它仍然看起来像这样:

我不希望它看起来像那样，我希望显示全名。我如何使其成为两层？

Answer 1

我无法使模块的演示正常工作，但在 css 上，事件元素已将属性 text-oveflow 设置为 ellipsis:

.full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
  ...
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

你将不得不覆盖它。
此外，如果您想让文本在两行(或更多行)上流动，您也将覆盖 white-space 属性。