vue的确认d框加格式

vue的确认d框加格式

亦有五星光耀辰

1。自定义确认框和提示框

根据传入的type来判断是确认框或提示框

<template>

<transition name="confirm-fade">

<div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">

<div class="confirm-content-wrap" @click.stop>

<h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3>

<p class="my-confirm-content">{{ content }}</p>

<div class="my-operation">

<div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">

<p class="my-btn-text my-border-right">{{ cancelText }}</p>

</div>

<div class="confirm-btn" @click="clickFun('clickConfirm')">

<p class="my-btn-text">{{ confirmText }}</p>嫌拆

</div>

</div>

</div>

</div>

</transition>

</template>

<script type="text/ecmascript-6">

export default {

data () {

return {

isShowConfirm: false, // 用于控制整个窗口的显示/隐藏

titleText: ' *** 作提示', // 提示框标题

content: 'Say Something ...', // 提示框的内容

cancelText: '取消', // 取消按钮的文字

confirmText: '确认', // 确认按钮的文字

type: 'confirm', // 表明d框的类型：confirm - 确认d窗（有取消按钮）；alert - 通知察者嫌d框（没有取消按钮）

outerData: null // 用于记录外部传进来的数据，也可以给外部监听userBehavior，事件的函数提供判断到底是哪个事件触发的

}

},

methods: {

show (content, config) {

this.content = content || 'Say Something ...'

if (Object.prototype.toString.call(config) === '[object Object]') {

// 确保用户传递的是一个对象

this.titleText = config.titleText || ''

this.cancelText = config.cancelText || '取消'

this.confirmText = config.confirmText || '确认'

this.type = config.type || 'confirm'

this.outerData = config.data || null

}

this.isShowConfirm = true

},

hidden () {

this.isShowConfirm = false

this.titleText = ' *** 作提示'

this.cancelText = '取消'

this.confirmText = '确认'

this.type = 'confirm'

this.outerData = null

},

clickFun (type) {

this.$emit('userBehavior', type, this.outerData)

this.hidden()

}

}

}

</script>

<style scoped>

.my-confirm {

position: fixed

top: 0

left: 0

right: 0

bottom: 0

background-color: rgba(0, 0, 0, 0.5)

z-index: 998

/败手* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */

-webkit-text-size-adjust: 100%

-webkit-tap-highlight-color: rgba(0, 0, 0, 0)

}

/* 进入和出去的动画 */

.confirm-fade-enter-active {

animation: opacity 0.3s

}

.confirm-fade-enter-active .confirm-content-wrap {

animation: scale 0.3s

}

.confirm-fade-leave-active {

animation: outOpacity 0.2s

}

/* 包裹层容器样式 */

.confirm-content-wrap {

position: absolute

top: 28%

left: 0

right: 0

width: 280px

margin: 0 auto

background-color: #fff

border-radius: 5px

z-index: 999

user-select: none

}

/* 顶部标题部分 */

.my-confirm-title {

padding-top: 20px

text-align: center

font-size: 20px

font-weight: 500

color: #333

}

/* 中间内容部分 */

.my-confirm-content {

padding: 0 15px

padding-top: 20px

margin-bottom: 32px

text-align: center

font-size: 16px

color: #666

line-height: 1.5

}

/* 底部按钮样式 */

.my-operation {

display: flex

border-top: 1px solid #eee

}

.my-operation .my-cancel-btn, .confirm-btn {

flex: 1

}

.my-operation .confirm-btn {

color: #ffb000

}

.my-operation .my-btn-text {

text-align: center

font-size: 16px

margin: 8px 0

padding: 6px 0

}

/* 其他修饰样式 */

.my-border-right {

border-right: 1px solid #eee

}

/* 进来的动画 */

@keyframes opacity {

0% {

opacity: 0

}

100% {

opacity: 1

}

}

@keyframes scale {

0% {

transform: scale(0)

}

60% {

transform: scale(1.1)

}

100% {

transform: scale(1)

}

}

/* 出去的动画 */

@keyframes outOpacity {

0% {

opacity: 1

}

100% {

opacity: 0

}

}

</style>

调用：

（1）提示框的使用：

<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>

……

//提示框

this.$refs.myDialog.show(content, {

type: 'alert',

confirmText: 'OK',

cancelText: '取消',

titleText: '',

data: null

})

效果：

（2）确认框：

this.$refs.myDialog.show('要兑换这个商品么？', {

type: 'confirm',

confirmText: '立即兑换',

cancelText: '不用了',

titleText: '',

data: {shop: shop, operate: 'exchange'}

})

效果：

当为确认框时的按键处理：changeData

<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>

……

changeData (type, data) {

console.log('changeData',data)

if (type === 'clickConfirm') {

if (data.operate === 'exchange') {

// this.reduceEnergy(data.shop)

this.exchangeCoupon(data.shop)

} else if (data.operate === 'downLoad') {

window.location = data.url

} else if (data.operate === 'login') {

this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'})

this.isLogin = false

}

}

},

补充：

点击空白页，关闭d窗：

在最外层的div上，加上

@click.stop="clickFun('clickCancel')"

在它的内层div上加上

@click.stop

clickFun函数：

clickFun () {

// this.$emit('userBehavior', type, this.outerData)

this.hidden()

},

代码：

<template>

<transition name="confirm-fade">

<div v-if="isShowConfirm" class="my-confirm-notice1" @touchmove.prevent @click.stop="clickFun('clickCancel')">

<div class="confirm-content-wrap1" :style="{'width': osType=='ios'?'78%':'297px'}" @click.stop>

………………

</div>

</div>

</transition>

</template>

<script type="text/ecmascript-6">

export default {

name: "NoticeDialog",

data () {

return {

isShowConfirm: false, // 用于控制整个窗口的显示/隐藏

titleText: '天天收能量，福利享不停', // 提示框标题

content: 'Say Something ...', // 提示框的内容

outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior

}

},

methods: {

……

hidden () {

this.isShowConfirm = false

this.titleText = ' *** 作提示'

this.outerData = null

},

clickFun () {

this.hidden()

},

……

}

}

</script>

文章知识点与官方知识档案匹配

Vue入门技能树Node.js和npmNode安装与配置

22313 人正在系统学习中

打开CSDN，阅读体验更佳

Vue 自定义模态对话框d窗_mossbaoo的博客_vued出模态...

Vue 自定义模态对话框d窗 模态对话框d窗效果: 父组件(应用页面)主要代码: <template><viewclass="app-container"><modal-dialogshowText="确定要取消收藏吗?":isShowDialog="isDialog"@cancel="isDialog = false"@confirm="confir...

Vue3.0实现自定义Message提示框_林卤蛋的博客_vue3提示框

学习vue3.0的时候想到了,能不能自己写一个自定义的类似于element ui的this.$message的消息提示框,网上有很多是基于vue2.0的自定义提示框,那么我就来搞一个3.0版本的吧。 实现步骤 1. 创建MessageMain.vue <template><Transition name=...

vue-dialog:vue自定义d窗组件（含回调）

具体参考博客：

使用vue实现各类d出框组件

简单介绍一下vue中常用dialog组件的封装： 实现动态传入内容，实现取消，确认等回调函数。 首先写一个基本的d窗样式，如上图所示。 在需要用到d窗的地方中引入组件： import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, 点击一个按钮显示d窗，并保证关闭d窗后再次点击依旧显示 在d窗组件中定义一个value值：v-model="sendVal"，sendVal初始值为false。 在打开d窗的方法中赋值： openMask(){

ant-vue通知提醒框（ Notification ）实现自定义样式

需求：运用ant中通知提醒实现自定义的样式效果； 效果如下：点我之后点击上传按钮去看效果 组件自定义内容支持vueNode |function(h)，我自己是用function(h)来实现的，想用vueNode的 可以去vue 官网去查看 相应的编码规范，function（h）的其中核心有点像广度遍历似的，大家可以先将要实现的代码先写出来之后再用function(h) 来实现 更高效： 我不知道怎么绑定指令，问我的狗子 他也不知道，真希望有高人指点一番！！！ h( '页面标签

继续访问

vue封装带确定、取消按钮的d窗和提示组件，可用promise回调

vue封装带确定和取消的全局d窗组件，支持promise回调，任意组件之间调用方法

继续访问

vue2 确认框 MessageBox d框 删除确认取消

项目需要删除时d出确认框 需求是项目完成80%时提出的 再添加d出框的话 耗时耗力 所于是就有了封装好的d窗函数挂载到Vue的原型上 在项目里面可以直接 this. 调用 显著提升摸鱼时间 话不多说 看代码 第一步 在 utils 创建一个名叫 MessageBox.js 的文件 把代发复制进去 ↓↓↓ 代码 ↓↓↓ /** * ********************** * @MessageBox { true } : 引入element的d出框 * @confirmButtonTex

继续访问

Vue实现以按钮d框动态控制Table列展示

点击设置d出列数，并根据选择列进行展示： 点击勾选之后改变列表展示列 Html: <div id="app"><template><el-popover placement="right" width="800" trigger="click" style="margin-left:80%"><el-checkbox-group v-model="colOptions"><el-checkbox v-for

继续访问

vue项目自定义提示框

<!-- d框 --><template><div :visible="visible" ref="tipsBox" @update:visible="updateDialog" class="tipsBox"><div ref="showPopover" class="tipsClass animated"><...

继续访问

Vue中的确认提示框

d出确认框 this.$confirm("是否确认标记为作废?", "提示", { iconClass: "el-icon-question", //自定义图标样式 confirmButtonText: "确认", //确认按钮文字更换 cancelButtonText: "取消", //取消按钮文字更换 showClose: true, //是否显示右上角关闭按钮 type: "warning", //提示类型 succes

继续访问

vue自定义d窗

vue自定义d窗

继续访问

vue自定义组件+Dialog 对话框组件定制d出框教程（转载）

1、新建一个.vue页面，写一个Dialog组件、把d出框上想要展示的内容放进去。 <template><el-dialog title="新增标签" :visible.sync="centerDialogVisible" width="80%" center><div><!-- 这个div放置内容 --></div></el-dialog></templat

继续访问

Vue 自定义一个全局d框组件

前文：其实element ui有提供this.$mesage和this.$notifyd框组件可供使用，但是我们的ui设计的样式以及布局还是不完全一样的，为了达到100%的呈现效果，所以自己写了一个全局组件，然后在页面上直接this.$popupMessage()调用 首先，需要创建一个vue文件来写我们的d框样式，新建PopupMessage.vue <template><div class="popup-message warning"><div cl...

继续访问

vue实现按钮d框【d出图片、视频、表格、表单等】

vue实现d框【d视频、图片、表单、表格等】总之，你想d啥就d啥。一