小程序实时直播_vue封装可复用组件confirm,并绑定在vue原型上的示例

  • 栏目:公司新闻 时间:2021-01-06 17:40 分享新闻到:
<返回列表

vue封装可复用组件confirm,并绑定在vue原型上的示例     o-O   今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

首先我们需要创建 confirm.vue , confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑

confirm.vue

 template 
 div v-if="isShow" 
 div 
 div 
 h6 {{text.type}} /h6 
 p {{text.msg}} /p 
 div 
 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: elli凡科抠图is;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 = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ' App/ '

helloworld.vue

 template 
 div 
 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 ponent only -- 
 style scoped 
span{font-size: 24px;}
 /style 

以上这篇vue封装可复用组件confirm,并绑定在vue原型上的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


分享新闻到:

更多阅读

小程序实时直播_vue封装可复用组件confi

公司新闻 2021-01-06
vue封裝可重复使用部件confirm,并关联在vue原形上的实例 o-O 今日网编就为大伙儿共享一篇...
查看全文

龙岗高端企业网站建设-泉州暴风网络技术

公司新闻 2021-01-06
上海市seo实例教程,企业,总计为数家公司出示互联网营销推广服务,遭受顾客的一致五星好...
查看全文

广州凡科互联网科技股份有限公司招聘销

公司新闻 2021-01-06
招聘人数:11职位信息1、公司系统提供精准有效的客户,无需找资源;2、通过各自渠道引导邀...
查看全文
返回全部新闻


区域站点: 南丰县主图制作软件   南宫市自动抠图   囊谦县图片加水印   南和县怎么p图   南华县主图制作软件   南江县自动抠图   南京市图片加水印   南靖县怎么p图   南康市主图制作软件   南乐县自动抠图   南陵县图片加水印   南宁市怎么p图   南平市主图制作软件   南皮县自动抠图   南市区图片加水印   南通市怎么p图   南投县主图制作软件   南雄市自动抠图   南溪县图片加水印   南阳市怎么p图   南漳县主图制作软件   南召县自动抠图   南郑县图片加水印   那坡县怎么p图   那曲县主图制作软件   纳雍县自动抠图   讷河市图片加水印   内黄县怎么p图   内江市主图制作软件   内丘县自动抠图   内乡县图片加水印   嫩江市怎么p图   聂荣县主图制作软件   尼玛县自动抠图   尼木县图片加水印   宁安市怎么p图   宁波市主图制作软件   宁城县自动抠图   宁德市图片加水印   宁都县怎么p图   宁国市主图制作软件   宁海县自动抠图   宁化县图片加水印   宁晋县怎么p图   宁陵县主图制作软件   宁明县自动抠图   宁南县图片加水印   宁强县怎么p图   宁陕县主图制作软件   宁武县自动抠图   宁乡市图片加水印   宁阳县怎么p图   宁远县主图制作软件   农安县自动抠图   磐安县图片加水印   盘锦市怎么p图   盘山县主图制作软件   磐石市自动抠图   盘州市图片加水印   蓬安县怎么p图   澎湖县主图制作软件   蓬莱市自动抠图   彭山县图片加水印   蓬溪县怎么p图   彭阳县主图制作软件   彭泽县自动抠图   彭州市图片加水印   偏关县怎么p图   平安县主图制作软件   平昌县自动抠图   平定县图片加水印   屏东县怎么p图   平度市主图制作软件   平果县自动抠图   平和县图片加水印   平湖市怎么p图   平江县主图制作软件   平乐县自动抠图   平凉市图片加水印   平利县怎么p图   平罗县主图制作软件   平陆县自动抠图   屏南县图片加水印   平泉市怎么p图   屏山县主图制作软件   平顺县自动抠图   平塘县图片加水印   平潭县怎么p图   平武县主图制作软件   萍乡市自动抠图   平乡县图片加水印   平阳县怎么p图   平遥县主图制作软件   平阴县自动抠图   平邑县图片加水印   平远县怎么p图   平舆县主图制作软件   皮山县自动抠图   普安县图片加水印   浦北县怎么p图   浦城县主图制作软件   普洱市自动抠图   普格县图片加水印   浦江县怎么p图   普兰县主图制作软件   普宁市自动抠图   莆田市图片加水印   迁安市怎么p图   乾安县主图制作软件   潜江市自动抠图   潜山市图片加水印  

友情链接: 一键抠图在线 在线ps抠图 在线ps抠图 免费做图

Copyright © 2002-2020 图片加水印_怎么p图_主图制作软件_自动抠图_抠图网址 版权所有 (网站地图) 备案号:粤ICP备10235580号