2. 程式人生 > >Vue 自定義一個可以高度自由化的模態框元件

Vue 自定義一個可以高度自由化的模態框元件

阿新 • • 發佈：2019-02-04
export default { name: "PromptModal", data : function(){ return { modal_show : false, title : '', body : '', btn_name_left : '取消', // 左側按鈕的顯示的文字, btn_name_right : '確定', // 左側按鈕的顯示的文字, btn_class_left : 'btn btn-secondary'
, // 左側按鈕的類 btn_class_right : 'btn btn-secondary btn-primary', // 右側按鈕的類 btn_url_left : '', // 左側按鈕跳轉的url btn_url_right : '', // 右側按鈕跳轉的url } }, methods : { // 初始化引數 open: function(params){ this
.title = !! params.title ? params.title : this.title; this.body = !! params.body ? params.body : this.body; this.btn_name_left = !!params.btn_name_left ? params.btn_name_left : this.btn_name_left; this.btn_name_right = !!params.btn_name_right ? params.btn_name_right : this
.btn_name_right; this.btn_class_left = !!params.btn_class_left ? params.btn_class_left : this.btn_class_left; this.btn_class_right = !!params.btn_class_right ? params.btn_class_right : this.btn_class_right; this.btn_url_left = !!params.btn_url_left ? params.btn_url_left : this.btn_url_left; this.btn_url_right = !!params.btn_url_right ? params.btn_url_right : this.btn_url_right; $('#modal-prompt').modal('toggle'); }, // 按鈕點選事件 redirectUrl : function(source){ switch (source) { case 'left': if (!!this.btn_url_left) { window.location.href = this.btn_url_left; } break; case 'right': if (!!this.btn_url_right) { window.location.href = this.btn_url_right; } break; } } } }

相關推薦

Vue 自定義一個可以高度自由化的模態框元件

export default { name: "PromptModal", data : function(){ return { modal_show : false, titl

Vue 自定義一個外掛的用法及案例

1.開發外掛 install有兩個引數，第一個是Vue構造器，第二個引數是一個可選的選項物件   MyPlugin.install = function (Vue, options) {   // 1. 新增全域

iOS開發之自定義TabBarController-present（模態）出控制器

如上圖這種點選TabBar中間Button時present（模態）出控制器，而點選TabBar其它的Button則是蘋果預設的直接切換檢視的方式，現在很多APP都在使用，特別是直播APP，基本都把直播端模組放在這，最近在仿喵播時正好做到這，就想在網上找

flutter - 點選事件(一) - 自定義一個方便的點選控制元件

android中,所有View都可以直接setOnClickListener, RN中也有TouchableHightlight這樣的控制元件可以直接套在外面,ios中也可以有UIControl 這樣的控制元件可以直接新增點選事件. 那麼flutter中有嗎? 答案自然是有. Ges

bootstrap 中關於模態框位置的自定義設定（在不改變原始碼的前提下）

        用過bootstrap的童鞋們在使用模態框的時候一定見過這幾個class ：modal fade  modal-dialog modal-body ，至於這些class都有什麼作用，大家去bootstrap官網去查一下就知道了。

AngularJS - $uibModal - 自定義模態框大小

文件參考 Modal(ui.bootstrap.modal)的使用：https://www.jianshu.com/p/2cbf835509b1 自定義模態框大小 controller中新增 windowClass:‘modal-class’ 用來增加額外樣式，增加 si

微信小程式自定義模態框滾動禁止且可以在video元件上方

<video id="myVideo" class='demo' page-gesture="true" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f02016904025348

【微信小程式】自定義模態框例項

原文連結：https://mp.weixin.qq.com/s/23wPVFUGY-lsTiQBtUdhXA1概述由於官方API提供的顯示模態彈窗，只能簡單地顯示文字內容，不能對對話方塊內容進行自定義，欠缺靈活性，所以自己從模態彈窗的原理角度來實現了自定義的模態對話方塊。今天

微信小程式——自定義個性化模態框（附程式碼）

微信小程式官方提供的模態框主要有以下幾種，這幾種方法都只能簡單的顯示文字內容，不能達到設計要求。最後只能通過自定義實現可以靈活設計的彈框。 主要原理： 和普通的css相同，利用 z-index實現不同層的顯示，以實現彈框效果。 先附上最終效果圖：

vue自定義事件 子組件把數據傳出去

orm currency prop targe 保留 eth counter href mat 每個 Vue 實例都實現了事件接口(Events interface)，即： 使用 $on(eventName) 監聽事件 使用 $emit(eventName) 觸發事件

自定義一個更好用的SwipeRefreshLayout（彈力拉伸效果詳解）（轉載）

dsc drag 常數 lane swipe loading 數據改變 高中數學 tca 轉自： 自定義一個更好用的SwipeRefreshLayout（彈力拉伸效果詳解） 前言 熟悉SwipeRefreshLayout的同學一定知道，SwipeRefreshLayout是

2.Border Layout 自定義一個Layout來完成布局。

log 自定義 min int size ger 官方文檔 implement for 目標： 　　　　　　　　 1.每一個被添加到布局裏的控件都是QLayoutItem，我們根據方位添加。 2.定義一個結構體 ItemWrapper。裏面包含QLayoutItem

用vue實現模態框組件

dispatch cast out cancel 升級 -m 接收 方法 eno 基本上每個項目都需要用到模態框組件，由於在最近的項目中，alert組件和confirm是兩套完全不一樣的設計，所以我將他們分成了兩個組件，本文主要討論的是confirm組件的實現。 組件結構

自定義一個校驗器--------------------------完成用戶註冊時候，對username是否符合規則以及時候已經存在於數據庫的校驗

實例 check ajax -- value ava .cn java 數據 實例： <!-- 自定義校驗表單--> $.validator.addMethod( "checkusername", //校驗規則名稱，類似於required

c++primer，自定義一個復數類

opera 指針 隨著 per call 拷貝構造函數 會銷 局部變量 eal 1 #include<iostream> 2 #include<string> 3 #include<vector> 4 #include<a

Vue 自定義指令練習

otto inpu function pin alert check 自定義 asc rip Vue.directive(id,definition)註冊一個全局自定義指令，接收兩個參數，指令ID以及定義對象 取值： <div v-demo="{ color: ‘

vue自定義過濾器格式化時間為年、月、日、小時、分鐘、剛剛

color 進行 ges time log 格式化時間 lte seconds gets 首先需要在需要過濾的時間裏面添加一個過濾器 我這裏需要過濾的是item.time 然後需要在item.time後面添加自定義過濾的名稱 date 接下來就是需要定

vue自定義指令的創建和使用

clas 參數 -h 操作 this text 等於 指定 function 一、自定義指令的創建和使用 Vue自帶的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...但是

vue自定義全局組件並通過全局方法 Vue.use() 使用該組件

install ren 自己 com 檢測 目錄 ldr children sta 簡介 Vue.use( plugin )：安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。install

vue自定義指令

自定義指令 vue bind <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定義指令</ti