2. 程式人生 > >vue-layer-mobile 【vue中整合 layer外掛】

vue-layer-mobile 【vue中整合 layer外掛】

阿新 • • 發佈：2019-02-01

原文地址：https://www.npmjs.com/package/vue-layer-mobile

#vue-layer-mobile vue彈出層外掛,包含toast loading dialog等浮層控制元件

demo地址:http://jianghai.wao021.cn/app/layer.html

#安裝方法

// 當前最新版本 1.2.0npm install vue-layer-mobile// 如新版遇到問題可回退舊版本npm install vue-layer-[email protected]1.0.0

#使用方法

import 'vue-layer-mobile/need/layer.css'import layer
 from 'vue-layer-mobile'Vue.use(layer)

toast: 文字和圖示:

this.$layer.toast({  icon: 'icon-check', // 圖示clssName 如果為空 toast位置位於下方,否則居中  content: '提示文字',  time: 2000 // 自動消失時間 toast型別預設消失時間為2000毫秒})

loading:

this.$layer.loading('載入中...')

dialog:

this.$layer.dialog({  title: ['這是標題', 'background:red;'], // 第一個是標題內容  第二個是標題欄的style(可以為空)
  content: '這是內容',  contentClass: 'className',  btn: ['確定']  time: 2000})// 如果有btn.then(function (res){  // res為0時是使用者點選了左邊  為1時使用者點選了右邊  let position = res === 0 ? 'left' : 'right'   console.log(position) })

footer:

this.$layer.footer({  content: '這是內容',  btn: ['取消', '選項1', '選項2']})// 如果有btn.then(function (res)
{  var text = res==0 ? '取消' : '選項'+res  console.log(text)})

相關推薦

vue-layer-mobile 【vue中整合 layer外掛】

原文地址：https://www.npmjs.com/package/vue-layer-mobile#vue-layer-mobile vue彈出層外掛,包含toast loading dialog等浮層控制元件demo地址:http://jianghai.wao021.c

vue-split-table【表格合併和編輯外掛】

前言 vue-split-table應用的效果圖 vue-split-table開源地址,歡迎star,現在已經開源和同步到npm上輕鬆搞定表格拆分或者合併,編輯,再也不怕被產品懟啦 1.核心原始碼分析 <td>裡面巢狀<table>實現表格拆分; 原生實現

【python中的編碼問題】

網絡 文件操作 指定 enc 引號 pytho ascii碼 磁盤 encode 1、首先要在開頭說明編碼方式為：utf-8 例如：-*- coding: utf-8 -*- 2、如果遇到字符串，立刻轉化為unicode，不要使用str()，直接使用unicode() un

【Eclipse中使用Git之一】把遠程倉庫的項目，clone到eclipse裏面

margin 提交 reference mark 們的 sha url地址 png fig 【Eclipse中使用Git之一】把遠程倉庫的項目，clone到eclipse裏面

linux常用軟體安裝整理【整理中。。。】

0、軟體安裝容易出現的問題。 a、報錯 http://ppa.launchpad.net/***/**/ubuntu bionic Release 404 Not Found 原因：ppa:***/** 沒有18.04版本的源 解決方法：修改/etc/ap

linux命令整理彙總【整理中。。。】

1、增 a、拷貝目錄 sudo cp -r 要拷貝的檔名 目標路徑 b、遞迴拷貝目錄： sudo cp -r 要拷貝的檔名 目標路徑 c、建立多級目錄 sudo mkdir -p /firstLevel/secondLevel/thirdLevel 2、刪 a、刪除目

【Eclipse中使用Git之一】把遠端倉庫的專案，clone到eclipse裡面

最新版的Eclipse上已經集成了Git外掛。所以在Eclipse中可以很方便的使用Git的功能。 在使用Git功能之前，需要先進行下簡單的設定。 設定一：設定我們的使用者名稱和郵箱。 進入>&

【Qt中的定時器】

Qt中定時器問題還是比較簡單的，分為2種： （1）QObject類中的定時器 （2）QTimer類中的 一、QObject類的定時器 QObject是所有Qt物件的基類，這裡面有一個基本的定時器。 什麼是定時器呢？ 就是這

Kotlin入門：eclipse開發環境中整合kotlin外掛失敗問題

這兩天沒事想看看kotlin玩，官方給出的kotlin開發環境如下圖四種方式 kotlin官網：http://kotlinlang.org/ kotlin語言中文站：https://www.kotlincn.net/ 　　現在主流的肯定是Intelli

【WebStorm常用指南】【包含設定+快捷鍵+外掛】

目錄 關於WebStorm WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智慧的JavaScript IDE”等

vue-layer，在vue中的layer外掛

vue-layerinstallnpm install vue-layerQuick Start在程式入口新增 importVue from 'vue';import layer from 'vue-layer'Vue.prototype.$layer = layer(V

使用 vue-layer-mobile元件實現toast，loading效果

安裝vue-layer-mobile // 當前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到問題可回退舊版本 npm install [email protected] 此版本安裝

Vue SPA應用中使用Layer的iframe 彈出層,並且傳值

lis app type The 問題 color class 喜歡 checklist 問題來源: BOOS 竟然說喜歡有可移動可最大化的彈出層,這!!! SPA 模式下就是這種引入Vue.js的寫法 layer.open({

【vue開發問題-解決方法】（四）vue Element UI使用中.$scopedSlots.default is not a function 報錯

判斷 元素 技術分享 error: class 解決 nbsp AR peer 當使用elementUI中v-if來判斷顯示元素時，會報錯。 vue.js:600 [Vue warn]: Error in render: "TypeError: l.$scopedSl

【VUE中模板筆記】vue中flexible+padding撐開容器高讓子元素固定比例+echarts模板

1、vue中flexible 2、padding撐開容器高讓子元素固定比例，實現高度自適應。圖片的高度可以根據width自適應，padding也可以，所以做一個盒子用padding撐開高度，裡面的元素width和height都是100%即可 3、echarts模板  <t

對vue中 預設的 config/index.js:配置的詳細理解 -【以及webpack配置的理解】-config配置的目的都是為了服務webpack的配置

複製於：https://www.cnblogs.com/whkl-m/p/6627864.html   當我們需要和後臺分離部署的時候，必須配置config/index.js:   用vue-cli 自動構建的目錄裡面  （環境變數及其基本變數的配置）

【vue】element 中 table 的 預設排序 、後臺排序 、列值的格式化展示

1.預設排序很簡單   在el-table標籤中加入預設屬性 :default-sort ="{prop:'date',order:'descending'}" 然後在單獨一列中     <el-table-column

【vue】vuikit的使用(uikit已經在vuikit內部整合)

vuikit基本上支援uikit的所有語法，所以無論是你想用uikit還是vuikit，都可以只裝這一個 而且整合的時候，要遠遠比單獨去整合uikit簡單的多，因為很多事情都已經被vuikit做完了   一、首先用npm 安裝三方包 npm install vuikit

webpack中‘vant’全域性引入和按需引入【vue-cli】

一、安裝 npm i vant -S   二、引入 1.全域性引入 import Vue from 'vue' import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant)   2.按

vue 從頁面中按鈕事件跳轉選單中的頁面，【父元件到子元件】【跳轉新的頁面】

說明：            在用vue做專案時，有事需要跳轉新的頁面，有時候也需要複用已經寫好的頁面。             實際專案開發中： 在vue後臺管理系統中，