帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

可拖动、触摸、调整大小的Vue布局组件(scheduler-lite)

帝国模板之家 2021-01-11 网页特效 评论

介绍

scheduler-lite是一款Vue.js动态,可调整大小,可拖动和启用触摸的布局组件。

使用方法

1.导入组件。

import schedulerLite from "./components/schedulerLite";

2. 在应用程序上创建一个布局。

<sc
  :schedule-data="scData"
  :setting="setting"
  @row-click-event="rowClickEvent"
  @date-click-event="dateClickEvent"
  @click-event="clickEvent"
  @add-event="addEvent"
  @move-event="moveEvent"
  @edit-event="editEvent"
  @delete-event="deleteEvent"
></sc>
export default {
  name: "App",
  components: {
    sc: schedulerLite
  },
  data: function() {
    return {
      scData: sampleData,
      setting: sampleSetting
    };
  },
  methods: {
    dateClickEvent(date) {
      console.log("------");
      console.log("DateClickEvent:");
      console.log("Date:" + date);
    },
    rowClickEvent(rowIndex, text) {
      console.log("------");
      console.log("RowClickEvent:");
      console.log("RowIndex:" + rowIndex);
      console.log("RowTitle:" + text);
    },
    clickEvent(startDate, endDate, text, other) {
      console.log("------");
      console.log("ClickEvent:");
      console.log("StartDate:" + startDate);
      console.log("EndDate:" + endDate);
      console.log("ContentText:" + text);
      if (other) {
        console.log("OtherData:");
        console.log(other);
      }
    },
    addEvent(rowIndex, startDate, endDate) {
      console.log("------");
      console.log("AddEvent:");
      console.log("RowIndex:" + rowIndex);
      console.log("StartDate:" + startDate);
      console.log("EndDate:" + endDate);
    },
    moveEvent(status, newStartDate, newEndDate) {
      console.log("------");
      console.log("MoveEvent:");
      if (status == 1) {
        console.log("NewStartDate:" + newStartDate);
        console.log("NewEndDate:" + newEndDate);
      } else {
        console.log("Not businessDay, can't move.");
      }
    },
    editEvent(newStartDate, newEndDate) {
      console.log("------");
      console.log("EditEvent:");
      console.log("NewStartDate:" + newStartDate);
      console.log("NewEndDate:" + newEndDate);
    },
    deleteEvent(row, index) {
      console.log("------");
      console.log("DeleteEvent:");
      console.log("Row:" + row);
      console.log("Index:" + index);
    },
    addNewRow() {
      let newTitle = "Room" + (this.scData.length + 1);
      this.scData.push({
        title: newTitle,
        noBusinessDate: [],
        businessHours: [
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          }
        ],
        schedule: []
      });
    }
  }
};

3. 自定义数据。

const sampleData = [
  {
    title: "Room1",
    noBusinessDate: ["2020/04/20"],
    businessHours: [
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      }
    ],
    schedule: [
      {
        text: "Mr.A reserved",
        start: "2020/04/21 06:00",
        end: "2020/04/22 01:00",
        data: {
          something: "something"
        }
      },
      {
        text: "Mr.B reserved",
        start: "2020/04/22 06:00",
        end: "2020/04/22 12:00",
        data: {
          something: "something"
        }
      }
    ]
  },
  {
    title: "Room2",
    noBusinessDate: [],
    businessHours: [
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      }
    ],
    schedule: [
      {
        text: "Mr.C reserved",
        start: "2020/04/20 12:00",
        end: "2020/04/20 17:00",
        data: {
          something: "something"
        }
      }
    ]
  },
  {
    title: "Room3",
    noBusinessDate: [],
    businessHours: [
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      }
    ],
    schedule: [
      {
        text: "Mr.D reserved",
        start: "2020/04/20 12:00",
        end: "2020/04/20 18:00",
        data: {
          something: "something"
        }
      }
    ]
  }
];
const sampleSetting = {
  startDate: "2020/04/20",
  endDate: "2020/04/26",
  weekdayText: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  unit: 60, // Minutes
  borderW: 1, // Px
  dateDivH: 25, // Px
  timeDivH: 25, // Px
  unitDivW: 25, // Px
  titleDivW: 20, // Percent
  rowH: 135 // Px
};
人生不要怕失败,因为失败连着成功。只有那些有勇气的人,才敢不断挑战人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言