vue 封装dialog_GitHub - 1014156094/vue-mobile-dialog: Vue移动端基础组件

Vue 移动端弹框组件

由于公司项目多、设计的多样性，比如右上角要有关闭按钮，弹窗要有2个按钮或3个按钮或封面或图标等等需求设计，像Van、Vux之类使用人数多UI库，是可以满足，但是要自己在它的对话框组件上再封装一层来复用右上角关闭按钮或底部按钮或其它样式，显得太繁琐，所以干脆自己写个定制性强的基础组件出来，用来应复多样性的项目，如果有新的外包项目、新的需求或设计，在这组件代码基础上增删改即可。

效果演示

快速开始

显示对话框

v-model="showDialog"

title="标题"

message="内容"

:show-cancel-button="true"

:show-close-button="true"

import BaseDialog from '@/components/base-dialog'

export default {

components: {

BaseDialog

data () {

return {

showDialog: false

}

二次封装示例

v-model="show"

title="温馨提示"

cancelButtonText="再考虑下"

:beforeClose="beforeCloseExchange">

placeholder="请填写收货地址"

v-model="exchangeAddress" />

import BaseDialog from '@/components/base-dialog'

export default {

mixins: [BaseDialog],

data () {

return {

exchangeAddress: '' // 兑换地址

}

watch: {

show (newVal) {

this.$emit('change', this.show)

}

methods: {

beforeCloseExchange (action, done) {

if (action === 'confirm') {

if (!this.exchangeAddress.trim() || !this.exchangeAddress) {

this.$toast('请填写兑换地址！')

return

}

this.$emit('confirmSuccess', {

exchangeAddress: this.exchangeAddress

})

}

done()

}

注意

组件CSS使用 less 预编译语言

插槽

参数

说明

默认

对话框主体

title

标题

message

消息

buttons

按钮

Props

参数

说明

类型

默认值

v-model

是否显示对话框

Boolean

false

title

标题

String

message

消息

String

show-close-button

是否显示关闭按钮

Boolean

true

show-cancel-button

是否显示取消按钮

Boolean

false

show-confirm-button

是否显示确定按钮

Boolean

true

cancel-button-text

取消按钮文案

String

确定

confirm-button-text

确定按钮文案

String

取消

close-on-click-overlay

是否在点击蒙层后关闭

Boolean

false

before-close

关闭前的回调函数

调用 done() 后关闭弹窗

调用 done(false) 阻止弹窗关闭

(action, done) => void

vue 封装dialog_GitHub - 1014156094/vue-mobile-dialog: Vue移动端基础组件 - 对话框相关推荐

vue封装自己的组件库 02.封装dialog组件
link: https://blog.csdn.net/weixiaowei_2016/article/details/104702793 四.封装一个element-ui风格的dialog组件前置 ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
vue 封装组件供全局使用_vue 封装组件的基本操作
/**1.封装组件局部封装**/ // 1.创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> </div>` }) ...
vue 封装调用 wangeditor v4.0富文本编辑框组件 v-model
背景本机的环境使用的vue的脚手架,用到了富文本编辑框,所以选择将wangeditor封装为组件调用 wangeditor官网:https://www.wangeditor.com/ 在vue的项目 ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
vue封装websocket_有关WebSocket必须了解的知识
一.前言最近之前时间正好在学习java知识,所以自个想找个小项目练练手,由于之前的ssm系统已经跑了也有大半年了,虽然稀烂,但是功能还是勉强做到了,所以这次准备重构ssm系统,改名为postCode ...
普歌-Vue 封装防刷新考试倒计时组
date.vue  <template><div class=""><p>{{ count }}< ...
用vue封装分页器，让你的页面简单而不失优雅
前言当我们在开发 web 应用时,经常需要对大量数据进行分页展示,这时候用到的就是分页器.element 是一款流行的前端 ui 框架,它提供了许多有用的工具和组件,其中就包括分页器组件.在本文中, ...
vue-03-4：vue封装方法到工具类
vue-03-4:vue封装方法到工具类参考博客:咸鱼最牛逼地址:https://blog.csdn.net/panchang199266?utm_source=feed 一.步骤 1.src目录 ...
vue封装自定义数字键盘组件
最近在公司做一个项目,简单来说就是web端微信公众号上的一个申请表单页面,随便如个图环境: vue框架 + vant组件库 + 其它(这里用不上的,不说) 具体如图: 都知道,input输入框如果不 ...

vue 封装dialog_GitHub - 1014156094/vue-mobile-dialog: Vue移动端基础组件 - 对话框

vue 封装dialog_GitHub - 1014156094/vue-mobile-dialog: Vue移动端基础组件 - 对话框相关推荐

最新文章

热门文章