Vue自定义弹窗组件(二)发包测试

字数 116阅读 993

参考 参考

新建一个vue项目并运行
vue init webpack rty-prompt-dialog  //新建一个vue脚手架空项目
npm install 
npm run dev
删除不必要代码(可选)写一个按钮方法
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="hintPress">hint</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Vue prompt-dialog!'
    }
  },
  methods: {
    hintPress() {
      this.$hint('hello Vue!')
    }
  },
}
</script>
修改helloword
模拟已发包组件

在node_modules中新建rty-prompt-dialog文件(模拟已发布包,最后会提交发布)

目录结构
目录结构

package.json文件可先不建

main.vue
<template>
  <div class="prompt_hint" v-if="isShow">
    {{message}}
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'prompt-hint',
    data () {
      return {
        message: '',
        time: 2000,
        isShow: true
      }
    },
    mounted () {
      this.close()
    },
    methods: {
      close () {
        var this_ = this
        window.setTimeout(function() {
          this_.isShow = false
        }, this.time);
      }
    }
  }
</script>

<style type="text/css">
  .prompt_hint{
    position: fixed;
    padding: 10px 20px;
    color: #fff;
    background: #5F6161;
    border-radius: 4px;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100
  }
</style>
hint/index.js
import Vue from 'vue'
import Hint from './src/main.vue'

Hint.installHint = function(options) {
  if (options === undefined || options === null) {
    options = {
      message: ''
    }
  } else if (typeof options === 'string' || typeof options === 'number') {
    options = {
      message: options
    }
  }
  var hint = Vue.extend(Hint)

  var component = new hint({
    data: options
  }).$mount()
  document.querySelector('body').appendChild(component.$el)
}

export default Hint
rty-prompt-dialog/index.js
import promptHint from './packages/hint/index.js'

const install = function(Vue) {
  Vue.component(promptHint.name, promptHint)
  Vue.prototype.$hint = promptHint.installHint
}
export default install
引入临时包main.js
import Prompt from '../node_modules/rty-prompt-dialog/index.js'
Vue.use(Prompt)
测试成功
测试成功--发正式包引入
npm init 
npm publish
查看已发布的包
发布成功
正确的引入main.js
import Prompt from 'rty-prompt-dialog'
使用
this.$hint('hello Vue!')