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文件可先不建
<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>
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
import promptHint from './packages/hint/index.js'
const install = function(Vue) {
Vue.component(promptHint.name, promptHint)
Vue.prototype.$hint = promptHint.installHint
}
export default install
import Prompt from '../node_modules/rty-prompt-dialog/index.js'
Vue.use(Prompt)
测试成功
npm init
npm publish
发布成功
import Prompt from 'rty-prompt-dialog'
this.$hint('hello Vue!')