vue写一个界面按钮怎么调用另一个界面的弹窗_第2页回答

2021-05-10 15:29发布

站内问答 / Vue.js
5227 13 14
发送
13条回答
灰机带翅膀
2楼 · 2021-05-16 22:11

新建一个.vue文件 定义一个弹框的基本模板

style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个vue文件里，样式是用less写的，需要你的项目引入less

注意：我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径

{{title}}

{{content}}

确定

取消

3.定义一个js文件

import Vue from 'vue';

import Alert from '@/components/public/alertModal'; //引入刚才写的弹框组件

let AlertConstructor = Vue.extend(Alert); // 返回一个“扩展实例构造器”

let AlertModal = (o) => {

let alertDom = new AlertConstructor({

el: document.createElement('div'); //将Alert组件挂载到新创建的div上

})

document.body.appendChild(alertDom.$el); //把Alert组件的dom添加到body里

// 标题

alertDom.title = o.title || '信息';

// 单条内容

alertDom.content = o.content;

// 关闭按钮

alertDom.cancelBtn = o.cancelBtn;

// 弹框三个事件 右上角关闭 确定 取消

alertDom.a_close = o.close || null;

alertDom.a_confirm = o.confirm || null;

alertDom.a_cancel = o.cancel || null;

}

export default AlertModal;

4.mian.js

import alert from '@/common/alertModal' //这里引入的是js文件

Vue.prototype.$alert = alert;

5.在任意组件调用

点击调用弹框

取消按钮开启

调用之后是往body添加元素

5.通过window.alertIsShow，给window增加一个属性，来控制一个页面只会出现一个弹框

methods: {

operate () {

if (!window.alertIsShow) {

// 弹框模板有个 delete window.alertIsShow 是为了弹框关闭之后能再次显示

this.$alert({

title: '信息',

content: '登入成功！',

cancelBtn: true,

close () {

// 这里执行点击右上角需要做的事，默认执行关闭弹框

},

confirm () {

// 这里执行点击确定按钮需要做的事，默认执行关闭弹框

},

cancel () {

// 这里执行点击取消按钮需要做的事，默认执行关闭弹框

}

})

window.alertIsShow = true;

}

}

}

6.最后是弹框组件的less样式

补充知识：Vue注册全局组件-弹窗组件

在src目录下新建components文件夹

1.新建module文件夹，然后新建v-alert.vue

{{title}}

{{titleData}}

2.在nodule同级目录新建vue-component.js

import VAlert from './v-alert'; //弹窗

export default {

install(Vue) {

Vue.component('VAlert', VAlert);

}

};

3.在main.js中注册为全局组件

import vueComponent from "./components/vue-component";

Vue.use(vueComponent);

4.在其他组件可以直接用了,无需import



哈哈哈哈哈哈嗝
3楼 · 2021-05-20 13:47

1.实现效果图




2.第一步，新建一个.vue文件 定义一个弹框的基本模板


style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个vue文件里，样式是用less写的，需要你的项目引入less


注意：我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径


{{title}}




{{content}}


确定


取消


export default {

data() {

return {

show: true, // 通过这个属性，控制是否移除dom元素


title:'', // 顶部标题


content:'', // 内容


cancelBtn: false // 取消按钮


};


},


methods: {

close() {

// 右上角关闭


this.a_close && this.a_close();


this.show = false;


// 删除判断增加的window属性


delete window.alertIsShow;


},


confirm() {

// 确定


this.a_confirm && this.a_confirm();


this.show = false;


// 删除判断增加的window属性


delete window.alertIsShow;


},


cancel() {

// 取消


this.a_cancel && this.a_cancel();


this.show = false;


// 删除判断增加的window属性


delete window.alertIsShow;


}


},


watch: {

show(cur, old) {

// 通过监控data里的show属性 弹框有三个事件(右上角取消 确定按钮 取消按钮)


// 每个事件写了 this.show = false


// 当弹框出现的时候 点击任何一个事件 都会触发这里的监控事件 将页面上的弹框Dom移除


if (cur === false) {

let tip_alert = document.getElementById('tip_alertModal');


tip_alert[removed].removeChild(tip_alert);


}


}


}


}


3.定义一个js文件


import Vue from 'vue';


import Alert from '@/components/public/alertModal'; //引入刚才写的弹框组件


let AlertConstructor = Vue.extend(Alert); // 返回一个“扩展实例构造器”


let AlertModal = (o) => {

let alertDom = new AlertConstructor({

el: document.createElement('div'); //将Alert组件挂载到新创建的div上


})


document.body.appendChild(alertDom.$el); //把Alert组件的dom添加到body里


// 标题


alertDom.title = o.title || '信息';


// 单条内容


alertDom.content = o.content;


// 关闭按钮


alertDom.cancelBtn = o.cancelBtn;


// 弹框三个事件 右上角关闭 确定 取消


alertDom.a_close = o.close || null;


alertDom.a_confirm = o.confirm || null;


alertDom.a_cancel = o.cancel || null;


}


export default AlertModal;


4.mian.js


import alert from '@/common/alertModal' //这里引入的是js文件


Vue.prototype.$alert = alert;


5.在任意组件调用


点击调用弹框


export default {

methods: {

operate() {

this.$alert({

title: '信息',


content: '登入成功！',


cancelBtn: true, //这个是启用取消按钮，


close() {

// 这里执行点击右上角需要做的事，默认执行关闭弹框


},


confirm() {

// 这里执行点击确定按钮需要做的事，默认执行关闭弹框


},


cancel() {

// 这里执行点击取消按钮需要做的事，默认执行关闭弹框


}


})


}


}


}


取消按钮开启




调用之后是往body添加元素




5.通过window.alertIsShow，给window增加一个属性，来控制一个页面只会出现一个弹框


methods: {

operate () {

if (!window.alertIsShow) {

// 弹框模板有个 delete window.alertIsShow 是为了弹框关闭之后能再次显示


this.$alert({

title: '信息',


content: '登入成功！',


cancelBtn: true,


close () {

// 这里执行点击右上角需要做的事，默认执行关闭弹框


},


confirm () {

// 这里执行点击确定按钮需要做的事，默认执行关闭弹框


},


cancel () {

// 这里执行点击取消按钮需要做的事，默认执行关闭弹框


}


})


window.alertIsShow = true;


}


}


}


6.最后是弹框组件的less样式


#tip_alertModal {

position: fixed;


left: 0;


top: 0;


z-index: 100;


width: 100%;


height: 100%;


.t-alert-mask {

position: absolute;


top: 0;


left: 0;


width: 100%;


height: 100%;


background-color: rgba(0, 0, 0, .3);


}


.t-alert-container {

position: absolute;


top: 50%;


left: 50%;


min-width: 240px;


max-width: 400px;


height: auto;


background-color: #fff;


transform: translate(-50%, -50%);


border-radius: 4px;


.t-alert-title {

position: relative;


width: 100%;


height: 40px;


line-height: 40px;


background-color: rgba(115, 134, 255, 1);


border-radius: 4px 4px 0px 0px;


span {

position: absolute;


top: 50%;


left: 10px;


font-weight: 500;


font-size: 16px;


color: #fff;


transform: translate(0, -50%);


}


img {

position: absolute;


top: 50%;


right: 10px;


transform: translate(0, -50%);


cursor: pointer;


}


}


.t-alert-content {

text-align: center;


span {

font-family: PingFangSC-Regular;


font-weight: 400;


font-size: 14px;


color: rgba(51,51,51,1);


}


span.content-text {

display: inline-block;


width: 100%;


height: auto;


font-weight: 400;


font-size: 14px;


color: #333;


padding: 20px 18px;


}


.t-content-list {

min-width: 320px;


height: auto;


text-align: left;


.list-title {

position: relative;


padding: 10px 0 10px 10px;


img {

display: inline-block;


position: absolute;


width: 20px;


margin-right: 10px;


}


span {

display: inline-block;


vertical-align: middle;


padding-left: 31px;


}


}


.list-content {

width: 100%;


height: auto;


ul {

padding-bottom: 10px;


li {

width: 100%;


height: auto;


padding-bottom: 10px;


span {

vertical-align: top;


}


span.title {

display: inline-block;


padding-left: 41px;


padding-right: 3px;


text-align: left;


}


}


}


}


}


}


.t-alert-confirm {

width: 100%;


padding-bottom: 17px;


text-align: center;


button {

display: inline-block;


width: 80px;


height: 36px;


border: none;


background: rgba(115, 134, 255, 1);


font-weight: 400;


font-size: 16px;


color: #fff;


border-radius: 4px;


outline: none;


cursor: pointer;


}


.cancel-btn {

margin-left:20px;


background:rgba(151,193,234,1);


font-family: PingFangSC-Regular;


font-weight: 400;


font-size: 16px;


color: rgba(255,255,255,1);


}


}


}


}


如果本篇文章对你有帮助的话，很高兴能够帮助上你。


补充知识：Vue注册全局组件-弹窗组件


在src目录下新建components文件夹


1.新建module文件夹，然后新建v-alert.vue


class="v-alert g-center"


:style="{zIndex}">


class="v-cont"


:class="{shadow:!hideCont}"


:style="[innerWidth]">


v-if="title.trim()"


:style="[{backgroundColor:bgColorTit,color:cancelCol},titleStyle]"


class="title g-font18">


{{title}}


{{titleData}}


v-if="isCancel"


class="v-cancel">


class="cancel-icon"


:style="{color:cancelCol}"


@click="cancel">



v-if="!hideCont"


:style="styles"


class="content">


class="g-fixed alert-wrap"


@click="$emit('cancel')"


:style="{backgroundColor:bgWrapColor}">


export default {

name: "v-alert",


props: {

title: {default: ""},


// titFontSize:{default: '16'},


bgColorTit: {default: "#40404C"},


bgColor: {default: "#fff"}, // 背景色


bgWrapColor: {default: "rgba(42, 47, 59, 0.6)"}, //外套背景色


cancelCol: {default: "#fff"}, //按钮颜色


width: {required: true, type: Number}, //宽度


minWidth: {type: Number, default: 0},


isCancel: {type: Boolean, default: true}, //是否显示关闭按钮


titleData: {default: ""},


hideCont: {type: Boolean, default: false}, //是否隐藏cont


zIndex: {default: 2000},


styles: {

default() {

return {};


},


type: Object


},


titleStyle: {

default() {

return {};


},


type: Object


},


},


components: {},


computed: {

innerWidth() {

let dfu = {

backgroundColor: this.bgColor


};


this.minWidth > 0


? dfu.minWidth = `${this.minWidth}px`


: dfu.width = `${this.width}px`;


return dfu;


}


},


methods: {

cancel() {

this.$emit("cancel");


}


},


mounted() {

document.addEventListener(


"keydown",


event => {

let keyCode = this.$_lib.getKeycode(event);


if (keyCode === 'Escape' || keyCode === 27) this.$emit("cancel");


},


false


);


}


};


scoped>


.v-alert {

position: fixed;


top: 0;


left: 0;


width: 100%;


height: 100%;


z-index: 2000;


.alert-wrap {

top: 0;


left: 0;


width: 100%;


height: 100%;


/*z-index: 2000;*/


}


.v-cont {

min-width: 100px;


min-height: 100px;


background-color: #ffffff;


position: relative;


border-radius: 2px;


.shadow {

box-shadow: 0 2px 30px rgba(42, 47, 59, 0.2);


}


z-index: 2001;


.title {

width: 100%;


line-height: 70px;


color: #ffffff;


padding-left: 30px;


}


.title-data {

color: #f8e19a;


}


.content {

padding: 40px;


/*padding: 60px 40px 50px 40px;*/


word-wrap: break-word;


text-align: left;


}


}


.v-cancel {

position: absolute;


top: 0;


right: 0;


width: 100%;


height: 70px;


}


.cancel-icon {

position: absolute;


text-align: center;


width: 20px;


height: 20px;


line-height: 20px;


right: 20px;


top: 50%;


margin-top: -10px;


color: #ffffff;


cursor: pointer;


transition: 200ms;


&:hover {

-webkit-transform: rotate(90deg);


-moz-transform: rotate(90deg);


-ms-transform: rotate(90deg);


-o-transform: rotate(90deg);


transform: rotate(90deg);


}


}


}


2.在nodule同级目录新建vue-component.js


import VAlert from './v-alert'; //弹窗


export default {

install(Vue) {

Vue.component('VAlert', VAlert);


}


};


3.在main.js中注册为全局组件


import vueComponent from "./components/vue-component";


Vue.use(vueComponent);


4.在其他组件可以直接用了,无需import


v-if="is_alert"


@cancel="is_alert=false"


bg-color-tit="#40404C"


cancel-col="#fff"


:title="提示"


:width="680">


任@先生
4楼 · 2021-05-21 17:50

需要引入另一个界面，然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。

寂静的枫林
5楼 · 2021-05-30 18:06

首先你需要引入另一个界面，然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。

注意需要另一个页面渲染完成后才能用【$refs.refName】


zgzbs
6楼 · 2021-11-24 10:13

App.vue
...
// 里面主要内容就是一个路由视图
...

MenuItems.vue: 侧边菜单栏

[removed]

上一页 1 2

相关问题推荐

  • vue3.0和vue2.0的区别有哪些，优点是什么2021-02-03 10:13
    回答 14

    1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：•可直接监听数组类型的数据变化•监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升•可拦截apply、ownKeys、has等13种方法，而Object.define...

  • 怎么实现vue 跳转页面返回后回到原来的位置2021-04-16 13:39
    回答 12

    vue页面跳转后返回原页面初始位置        vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly...

  • MVVM和MVM的不同？2020-05-09 15:51
    回答 9

    这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。（1）首先说下MVC    MVC全名是Model View Controller，是模型（model）－视图（view）－控制器（controller）的缩写。MVC开始是存在于桌面程序中，使用MVC的目的是将M和V的实现代码分离。从图里可以看...

  • 使用vue后怎么针对搜索引擎做SEO优化？搜索引擎 Vue.js 2020-05-26 16:30
    回答 13

    目前，对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求，那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目，而你的网站内容不需要AJAX去获取内容和展示内容，那么可以试试 prerender-spa-plugin 这个插件，这个插件是...

  • vue和bootstrap的区别2021-10-14 11:13
    回答 19

    Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库，而且Bootstrap大部分组件是依赖css的，依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等

  • 前端vue是不是现在比较常用的2020-09-27 20:50
    回答 16

    是的，前端不会Vue根本就没必要再聊下去了

  • vue大屏项目的适配问题2021-01-15 10:32
    回答 7

    这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708

  • 在vue框架下，如何调整echarts图表在移动端HTML5移动框架 2022-03-15 16:11
    回答 5

    内部图表大小是与div容器大小位置相关的，如果想调整图表大小位置，调整div的属性就可以。如果是想调整图表与div间上下左右留白，则设置grid属性就可以。

  • 在使用vue框架时，如何改变组件的大小？HTML5移动框架 2022-02-25 15:25
    回答 7

    使用 /deep/ 注意：使用 cass 和 less 只能使用 /deep/ 这个方法

  • vue中外部引入svg如何使用scss给svg添加2021-06-03 14:05
    回答 4

    创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容：        [removed]  import '@/icons'  export default {    name: 'svg-icon',    props: {      iconClass: {      ...

  • java小白求教为什么在data定义变量在方法使用Vue.js 2021-05-23 16:27
    回答 3

    引用数据类型数组的元素是对象引用,没有实际的值，需要给它实例。例如date days = new date[5];days[0]  = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。

  • vue计算属性遇到的问题2021-05-23 13:28
    回答 5

    计算属性与响应式并不冲突对立的存在，计算属性往往是用于数据的聚合或者离散，数据响应式的话就是视图响应数据变动（先容我装个逼）在vue中就是通过watcher调用一次实例对象中data的数据（当然这层数据也会做一层映射，映射到实例的属性中）在数据的defineOb...

  • 用实例来展示 Vue 的过渡是如何实现的2021-04-26 15:37
    回答 3

    Vue中有一个自带的transition组件，就是用来实现过渡效果的，具体怎么使用呢，很简单，其实就两个步骤：①用transition组件，把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单，比把大象装冰箱还简单。然而，并没有，在这两个步骤中，我们要...

没有解决我的问题，去提问