[Project Actual combat] Secondary packaging components developed by Vue Project (I)

This is the 16th day of my participation in Gwen Challenge

Mentioned “column – efficiency tools” series, from the development tools, version control tool, interface debugging tools to develop the specification, and then to blog build tools and so on, of course, there are many tools we need to explore slowly, working tools, used in the study were introduced one by one, a habit, improve the development efficiency, reduce the number of bugs, etc. “Interface debugging tool — Insomnia”, “Efficiency Tool” — optimize beautiful and comfortable development environment, “Efficiency tool” — next generation interface simulation tool — Mock Service worker… -, -, record to improve the daily code word happiness [measurement can be used] self-use efficiency tools, continue to update, record only for reference, as needed to eat, insufficient, welcome all the big men give advice, supplement and improve, welcome to share

• To do a good job, he must sharpen his tools. Practice promotes the development of science and technology.

• This article and subsequent articles will share some of the tools and functions used in daily development, summary styles, CodeStyle, code snippets, and more. For the new students who have just joined the team, we can quickly follow the team’s development specifications and quickly integrate into the project development, thus improving our work efficiency, reducing redundant codes, improving code quality and reducing bugs.

• Here we continue to share some code snippets -Vue component encapsulation: VUe-Components

Vue custom Components encapsulate Vue Components

When using Vue series of open projects, it is basically writing pages, writing business, and customized packaging components to meet various needs according to business requirements. Simple packaging is not so difficult, several packaging components based on iView UI, while learning some packaging component methods for reference.

1. Rate Component secondary encapsulation

The e requirement here is very simple, replace the star with our own nice looking icon,

If it is not that difficult, then it is necessary to explore the relevant API in depth: for example, n methods of component value transfer,

// XRate.vue <template> <Rate v-bind="$attrs" v-on="$listeners" custom-icon="iconfont icon-star" /> </template> <script>  import { Rate } from "iview"; export default { name: "XRate", components: { Rate, }, }; </script>Copy the code

2. Secondary packaging of Drawer components

The super simple package listed here needs to be analyzed in detail and developed again for functional iteration and upgrade

Effect picture: Level-1

level-2

<template> <div class='x-drawer'> <Drawer v-bind="$attrs" v-on="$listeners"> <! - left left slot content left left - > < template > < slot > < / slot > < / template > <! -- Slot content: <! -- trigger --> <div class="x-drawer-trigger-wrapper"> <slot name="trigger"></slot> </div> </Drawer> </div> </template> <script> import { Drawer } from "iview"; export default { name: "XDrawer", props: {}, components: { Drawer, }, data() { return {}; }, mounted() {}, methods: {}, }; </script> <style lang="scss" scoped> </style>Copy the code

Use the import component && registration

<button @click="showDrawer">According to the drawer</button>

<Drawer v-model="isShow"
        placement="left"
        :closable="true"
        width="512"
        title="first-level-drawer">
  <p>first drawer > Some contents...</p>
  <button @click="showInnerDrawer">Display second drawer</button>
  <template v-slot:trigger>
    <xn-button icon='edit'>{{ taobao }}</xn-button>
  </template>
</Drawer>
<Drawer v-model="innerShow"
        placement="left"
        :closable="true"
        title="second-level drawer">
  This is second-level-drawer.
</Drawer>
Copy the code

3. XDate Indicates the date for encapsulating components

utils: utils/date-range.js

// utils/date-range.js
export { getYearMonthDay, getDate, getFullYear }

const getYearMonthDay = (date) = > {
  let year = date.getFullYear()
  let month = date.getMonth()
  let day = date.getDate()
  return { year, month, day }
}
const getDate = (year, month, day) = > {
  return new Date(year, month, day)
}

function getFullYear(date) {
  return date.getFullYear()
}
Copy the code

<template> <! <div class="x-date" V-click-outside > <input type="text" :value="formatDate"> <div class="pannel" v-if="isVisible"> <div class="pannel-nav"> <span @click="prevYear">&lt; </span> <span @click="prevMonth">&lt; &lt; < / span > < span > {{time. Year}}, < / span > < span > {{time. The month + 1}} on < / span > < span @ click = "nextMonth" > & gt; &gt; </span> <span @click="nextYear">&gt; </span> </div> <div class="pannel-content"> <div class="week"> <span class="cell" v-for="week in weekDays" :key="week"> {{ week }} </span> </div> <div class="days"> <! - directly listed a list of 6 * 7 -- -- > < div v - for = "I in 6:" key = "I" > <! <span class="cell cell-days" @click="chooseDate(visibleDays[(i-1)*7+(j-1)]))" :class="[ {notCurrentMonth: !isCurrentMonth(visibleDays[(i-1)*7+(j-1)])}, {today: isToday(visibleDays[(i-1)*7+(j-1)])}, {select: isSelect(visibleDays[(i-1)*7+(j-1)])} ]" v-for="j in 7"> {{ visibleDays[(i-1) * 7 + (j - 1)].getDate() }} </span> </div> </div> <div class="pannel-footer"> yesterday, today and tomorrow </div> </div> </template> <script> import * as utils from ".. /.. /utils/date-range"; export default { name: "XDate", data() { let { year, month } = utils.getYearMonthDay(this.value); Return {isVisible: false, / / date display control panel weekDays: [" day ", "a", "2", "three", "four", "five", "six"], time: year, month, attach}; }, props: { value: { type: Date, default: new Date(), }, }, directives: { clickOutside: Bind (EL, bindings,vnode) {// context // console.log(bindings,vnode) // bind events to documents, Let handler = (e) => {if (el.contains(e.target)) {// Check if the current panel is displayed if (! vnode.context.isVisible) { vnode.context.focus(); // console.log("focus"); } } else { if (vnode.context.isVisible) { vnode.context.blur(); // console.log("blur"); } } // console.log('e.target', e.target) }; el.handler = handler; document.addEventListener("click", handler); }, unbind(el) { document.removeEventListener("click", el.handler); }, }, }, methods: { focus() { this.isVisible = true; }, blur() { this.isVisible = false; }, isCurrentMonth(date) {// date is the same as this.value let {year, month } = utils.getYearMonthDay(utils.getDate(this.time.year, this.time.month, 1)); let { year: y, month: m } = utils.getYearMonthDay(date); return year === y && month === m; }, isToday(date) { let { year, month, day } = utils.getYearMonthDay(new Date()); let { year: y, month: m, day: d } = utils.getYearMonthDay(date); return year === y && month === m && day === d; }, chooseDate(date) { console.log("chooseDate", date); this.time = utils.getYearMonthDay(date); this.$emit("input", date); this.blur(); // Close panel}, isSelect(date) {let {year, month, day} = utils.getYearMonthDay(this.value); let { year: y, month: m, day: d } = utils.getYearMonthDay(date); return year === y && month === m && day === d; }, prevYear() { let y = utils.getDate(this.time.year, this.time.month,1) y.setFullYear(y.getFullYear() - 1) this.time = utils.getYearMonthDay(y) }, prevMonth() { let d = utils.getDate(this.time.year, this.time.month,1) d.setMonth(d.getMonth() - 1) this.time = utils.getYearMonthDay(d) }, nextMonth(){ let d = utils.getDate(this.time.year, this.time.month,1) d.setMonth(d.getMonth() + 1) this.time = utils.getYearMonthDay(d) }, nextYear(){ let y = utils.getDate(this.time.year, this.time.month,1) y.setFullYear(y.getFullYear() + 1) this.time = utils.getYearMonthDay(y) } }, mounted() { // console.log(this.visibleDays); }, computed: {visibleDays() {let {year, month} = utils.getYearMonthDay(utils.getDate(this.time.year, this.time.month, 1) ); Let currentFirstDay = utils. GetDate (year, month, 1); Let week = currentFirstday.getday (); // Let startDay = currentFirstDay-week * 60 * 60 * 1000 * 24; // let arr = []; for (let i = 0; i < 42; i++) { arr.push(new Date(startDay + i * 60 * 60 * 1000 * 24)); } return arr; }, formatDate() { let { year, month, day } = utils.getYearMonthDay(this.value); // getFullYear getMonth getDate return `${year}-${month + 1}-${day}`; ,}}}; </script> <style lang="scss"> .x-date { margin-bottom: 21px; .pannel { box-sizing: border-box; padding: 5px; width: 32 * 7 + 12px; position: absolute; margin-top: 10px; background: #fff; border: 1px solid pink; &-nav { height: 30px; display: flex; justify-content: space-around; span { cursor: pointer; user-select: none; line-height: 30px; } } &-content { color: #000; .week { .cell:first-child, .cell:last-child { color: red; } } .cell { box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-weight: bold; } .cell-days:hover { border: 1px solid pink; } .notCurrentMonth { color: gray; } .today { background: red; color: #fff ! important; } .select { color: red; border: 1px solid red; } } } } </style>Copy the code

---

Of course, there are a lot of useful tools. Here are some examples for reference only.

Did you get it?

Welcome to comment on your secret tools and share your handy productivity tools with everyone =, =

Today’s announcement:

Continue to update share some accumulation codes/utils/components/styles etc

Stay tuned for the next post! hahah~