使用Vue-cli搭建项目
如果你没有安装,则执行以下命令
npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create my-vue-library
新建一个lib文件来作为所有组件的源,这里我用自己封装的一个Dialog组件为例,这里我省去了样式
<template>
<transition name="dialog-fade">
<div class="qr-dialog_wrapper" v-show="visible" @click.self="handleClose">
<div class="qr-dialog" :style="{width, marginTop: top}">
<div class="qr-dialog_header">
<slot name="title">
<span class="qr-dialog_title">{{title}}</span>
</slot>
<div class="qr-dialog_headerbtn" @click="handleClose">
<i class="qr-icon-close"></i>
</div>
</div>
<div class="qr-dialog_body">
<slot></slot>
</div>
<div class="qr-dialog_footer" v-if="$slots.footer">
<slot name="foot">
<qr-button @click="handleClose">取消</qr-button>
<qr-button type="primary" @click="handleClose">确定</qr-button>
</slot>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'qrDialog',
components: {
},
props: {
title: {
type: String,
default: '提示'
},
width: {
type: String,
default: '50%'
},
top: {
type: String,
default: '15vh'
},
footer: {
type: Object
},
visible: {
type: Boolean,
default: false
}
},
methods: {
handleClose () {
this.$emit('update:visible', false)
}
}
}
</script>
那么我们真正用时,可以根据组件间通信,传入相关参数,插槽,方便使用
<template>
<div class="box1">
<div class="dialog">
<qr-button @click="visible = true">打开对话框</qr-button>
<qr-dialog width="25%" top="150px" :visible.sync="visible">
<template v-slot:title>
<h3>我是标题</h3>
</template>
<ul>
<li>我是内容1</li>
<li>我是内容2</li>
<li>我是内容3</li>
</ul>
<template v-slot:footer>
<qr-button>取消</qr-button>
<qr-button type="prinary">确定</qr-button>
</template>
</qr-dialog>
</div>
<div class="show">
<span @click='ShowMsg'>{{msg}}</span>
<div class="markdown-body" v-show="isShow" >
<dialog1-md></dialog1-md>
</div>
</div>
</div>
</template>
之后我们将所有封装组件打包,登录npm账号,通过npm publish发布,每次新上传时需要更改版本
这是我根据element-ui封装的一些组件,目前已封装了7个组件,
有兴趣的可以看看源码https://gitee.com/xiao-qingrong/qr-ui
这是预览链接 http://xiao-qingrong.gitee.io/qr-ui
网友评论