vue-flexible-components

Vue component based on mobile flexible. Js

Preface:

  • The current mobile Vue project is hand-pickedlib-flexibleUsed and adaptedpx2remFrom motion to REM. For lib-Flexible and PX2REM configuration, goVue – cli configuration is flexible.
  • Due to the use of REM adaptation, many existing mobile terminal UI frameworks can not cooperate with it well, often need to change the STYLE of UI framework, deviating from the original intention of using UI framework to achieve rapid development.
  • In order to reuse the components of the future project, and improve the ability to develop reusable components, especially in the usual projectCommon, simpleCarry the components out separately.
  • This is a small white, on the quality of the code, the degree of difficulty, reuse, far less than you big masterwork, for light spray. At the same time, I would appreciate your comments and suggestions.
  • GitHub address: vue-flexible-components

Toast — display box

  • Results show

     

  • The code analysis

    Div contains ICONS and text descriptions, which constitute a simple DOM structure. It uses props to define variable values, uses computed attributes to parse the values passed in, watches the pop-up display, and uses the. Sync modifier to achieve bidirectional data binding. At the same time, it sends events to the parent component using $emit. Facilitate the parent component to listen for callbacks.

    • Dom structure

      <transition name="fade">
    <div class="Toast" v-if="toastShow">
        <div
            class="box"
            :style="positionTop"
        >
            <span
                :class="iconClass"
                :style="iconBg"
                v-if="iconIsShow"
            ></span>
            <p
                v-if="message"
            >{{message}}</p>
        </div>
    </div>
</transition>
Copy the code

    • Props data

      Props: {message: {// Prompt contenttype: String,}, toastShow: {// whether to displaytype: Boolean,
        default: false}, iconClass: {// background imagetype: String,}, iconImage: {// custom background image}, duration: {// timertype: Number, default: 1500}, position: {// Position of the pop-up boxtype: String,
        default: '50%'}},Copy the code

    • computed

      Computed: {// Used to determine the location of a display boxpositionTop() {
        return{top: this.position}}, // customize the background image sent by the parent componenticonBg() {
        if (this.iconImage) {
            return {
                backgroundImage: `url(${this.iconImage}) `}}else {
            return; }}, // is used to determine whether icon is displayediconIsShow() {
        if (this.iconClass == 'success') {
            return true;
        } else if (this.iconClass == 'close') {
            return true;
        } else if (this.iconClass == 'warning') {
            return true;
        } else if (this.iconImage) {
            return true;
        } else {
            return false; }}},Copy the code

    • watch

      watch: {
    toastShow() {// Listen for the toast display and send events to the parent componentif (this.toastShow) {
            if (this.duration < 0) {
                this.$emit('toastClose');
            } else {
                setTimeout(()=>{
                    this.$emit('update:toastShow'.false// Use.sync to achieve bidirectional data binding this.$emit('toastClose');
                }, this.duration)
            }
        }
    }
}
Copy the code

  • Directions for use

     

    • Component address:src/components/Toast.vue(Not NPM, can only be manually downloaded)

    • Download and place in your own project — import importing components — register components in components — use

    • props

      props instructions type An optional value The default value
      toastShow Control display box Display and hide. Need to addThe sync modifierFor details, see the example Boolean false

      true      		 false
      message Prompt information String
      iconClass Icon small icon String success

      warning

      close
      iconImage Custom small ICONS (images require introduction)
      duration Timer (ms) : controls the time displayed in the frame. If the value is negative, the scheduled task is not executed Number 1500
      position Frame position (from top) String ‘50%’

    • $emit

      $emit instructions parameter
      toastClose Popbox close callback

    • The sample

      // The default effect is only the prompt <toast message ='Default information'
      :toastShow.sync = 'isShow1'ToastClose = toastClose = toastClose = toastClose = toastClose = toastClose = toastClose = toastClose = toastClose = toastClose Child component changes parent component state) // Add its own small icon <toast message ='success'
      iconClass = 'success'
      :toastShow.sync = 'isShow2'
  ></toast>
Copy the code
      // Custom type <toast message ='Custom'
        position = '70%'
        :duration = '1'// A negative value indicates that the scheduled task is not executed, and you can close it as required :iconImage='bg'ToastShow = toastShow = toastShow = toastShow = toastShow = toastShow'isShow5'// No need to sync @toastClose = because it needs to be manually closed'isClose5'// Listen to the callback, manually close, see below ></toast>data() {
        return {
            this.isShow5 : true.bg: require('.. /assets/logo.png'}}, // the image must be used in}},isClose5() {
        setTimeout(()=>{
            this.isShow5 = false; }}, 2000)Copy the code

     

  • conclusion

The first time to encapsulate Vue components, nervous, although it is a very simple component, to my hands is also the problem. However, I enjoy this process very much, because I always believe that ability is improved in continuous exploration, no setbacks, how can progress!

At the same time, I would also like to invite you to put forward your opinions and suggestions on the above issues, wish me a helpful hand, very grateful!

Other components will also be available on GitHubvue-flexible-componentsUpdate in succession, please pay attention to.