zoukankan      html  css  js  c++  java
  • Vue.extend()

    作用:将ui组件转为js组件

    利用Vue.extend()封装一个toast组件

    1、components/MyToast/index.vue

    <template>
      <div class="container" v-if="show">
        <div>{{ text }}</div>
      </div>
    </template>
    
    <script>
    export default { name: 'Toast' }
    </script>
    
    <style scoped>
    .container {
      position: fixed;
      top: calc(50% - 20px);
      left: calc(50% - 50px);
      width: 100px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.8);
      border-radius: 10px;
      box-sizing: border-box;
    }
    </style>

    components/MyToast/index.js

    import Vue from 'vue'
    import Toast from './index.vue'
    
    const ToastConstructor = Vue.extend(Toast)
    
    function showToast(text, duration = 2000) {
      const toastDOM = new ToastConstructor({
        el: document.createElement('div'),
        data() {
          return {
            text: text,
            show: true
          }
        }
      })
      document.body.appendChild(toastDOM.$el)
      const timer = setTimeout(() => {
        toastDOM.show = false
        toastDOM.$el.parentElement.removeChild(toastDOM.$el)
        clearTimeout(timer)
      }, duration)
    }
    
    function toastRegistry() {
      Vue.prototype.$myToast = showToast
    }
    
    export default toastRegistry

    2、main.js

    import toastRegistry from '@/components/MyToast'
    Vue.use(toastRegistry)

    3、使用

    <button @click="$myToast('123',1500)">按钮</button>

    https://www.cnblogs.com/wuqilang/p/12359571.html

    封装Loading组件-JS组件

    vue基于vant的popup组件封装confirm弹框

  • 相关阅读:
    20171121
    20171117
    20171106
    20171031
    20171024
    20170924
    20170721
    商品的分类
    会员价格的修改
    会员价格删除
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15116496.html
Copyright © 2011-2022 走看看