时间:2021-05-26
如下所示:
首先我们需要创建 confirm.vue , confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑
confirm.vue
<template> <div class="confirm" v-if="isShow"> <div class="con_box" > <div class="context"> <h6>{{text.type}}</h6> <p>{{text.msg}}</p> <div class="btn"> <span @click="close()" v-if="text.btn.no">{{text.btn.no}}</span> <span @click="ok()" v-if="text.btn.ok">{{text.btn.ok}}</span> </div> </div> </div> </div></template><script>export default { data(){ return{ isShow:true, text:{ type:'提示', msg:'确定删除此条信息?', btn:{ ok:'确定', no:'取消' }, } } }, methods:{ close(){ console.log('关闭'); }, ok(){ console.log('确定') } }}</script><style scoped>.confirm{background-color:rgba(0, 0, 0, 0.6);width: 100%;height: 100%; position: fixed;top: 0;}.con_box{width: 75%;height: 22%;background-color: white;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius: 5px;}.context{padding: 10px;}.context h6{font-size: 24px;padding: 15px;}.context p{font-size: 20px;padding: 35px 15px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.btn{padding: 15px;text-align: right;}.btn span{padding: 10px 35px; color: white;border-radius: 5px;}.btn span:nth-child(1){background-color: #f1f1f1;color: rgb(106, 223, 223);}.btn span:nth-child(2){background-color: rgb(106, 223, 223);}</style>confirm.js
import Vue from 'vue';import confirm from './confirm.vue';let confirmConstructor = Vue.extend(confirm);let theConfirm = function (text) { return new Promise((res, rej) => { //promise封装,ok执行resolve,no执行rejectlet let confirmDom = new confirmConstructor({ el: document.createElement('div') }) document.body.appendChild(confirmDom.$el); //new一个对象,然后插入body里面 confirmDom.text = text; //为了使confirm的扩展性更强,这个采用对象的方式传入,所有的字段都可以根据需求自定义 confirmDom.ok = function () { res() confirmDom.isShow = false } confirmDom.close = function () { rej() confirmDom.isShow = false } }) } export default theConfirm; //暴露出去,别忘记挂载到vue的原型上 // => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js' // => 再挂载 Vue.prototype.$confirm = theConfirm; //在需要的地方直接用以下方法调用即可: // this.$confirm({ // type:'提示', // msg:'是否删除这条信息?', // btn:{ // ok:'yes', // no:'no' // } // }).then(() => { // console.log('ok') // }) // .catch(() => { // console.log('no') // })main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'//这里就是对组件的绑定import theConfirm from './components/confirm/confirm.js'Vue.prototype.$confirm = theConfirm;Vue.config.productionTip = falsenew Vue({ el: '#app', router, components: { App }, template: '<App/>'})helloworld.vue
<template> <div class="hello"> <span @click="handMe()">点击一下</span> </div></template><script>export default { name: 'HelloWorld', data () { return { } }, methods:{ handMe(){ this.$confirm({ type:'提示', msg:'是否删除这条信息?', btn:{ ok:'yes', no:'no' } }).then(() => { console.log('ok') }) .catch(() => { console.log('no') }) } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>span{font-size: 24px;}</style>以上这篇vue封装可复用组件confirm,并绑定在vue原型上的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
组件(Component)是Vue.js最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题。1.父组
基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面简介对于react-
1.使用vue.mixin全局混入混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有
本文介绍了详解vue模版组件的三种用法,分享给大家,具体如下:第一种//首先,别忘了引入vue.jsvarUser_01=Vue.extend({//创建可复用
组件在vue开发中是必不可少的一环,用好组件这把屠龙刀,就能解决不少问题。组件是什么官方的定义:组件是可复用的Vue实例,并且可带有一个名字。官方的定义已经非常