标签分类 技术文章:
当前位置:首页 > vue.js技术文章 > vue里面使用mui的弹出日期选择插件实例

vue使用mui的弹出日期选择插件实例详解

  • 发布时间:
  • 作者:码农之家原创
  • 点击:65

这篇文章主要知识点是关于vue、mui、日期选择插件、VUE中使用MUI方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF出版:人民邮电出版社作者:纪尧姆·周
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

vue里面使用mui的弹出日期选择插件实例

如下所示:

comm.loadjs("js/mui.picker.min.js","js/mui.poppicker.js")

因为是点击才弹出的,所以就不用在index.html里面写<script src=""></script>这样的方式来引入js了。因为index.html这个页面是每个组件即.vue都会引用的,所以你如果在这里面引入太多js肯定会影响网页的加载速度的。

对于页面加载以后需要引入的js你可以使用上面的方式引入。注意这个comm是comm.js里面有个load它是封装好的一个方法。

它里面有

loadjs(...paths) {
  for (var i in paths) {
   var p = paths[i];
   if (key_loadjs[p]) continue;
   let script = document.createElement("SCRIPT");
   script.src = p;
   document.body.appendChild(script);
   key_loadjs[p] = true;
  }
 },

<li class="mui-table-view-cell" @tap="editwx">
     <a >我的微信号<span class="mui-pull-right mui-navigate-right">{{db2.wx_number}}</span></a>
 </li>

editwx(){
   mui.prompt("请输入您的微信号",this.db2.wx_number,({index,value})=>{
     if(index!=1||value=='')return;
    this.$api("Member/editinfo",{wx_number:value}).then(db=>{
     this.db2.wx_number=value;
    })
   })
  },

以上这篇vue里面使用mui的弹出日期选择插件实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

VUE中使用MUI方法

VUE中如何使用MUI

1、第一步:下载MUI

百度搜索MUI进入其官网点击右上角github地址,下载MUI文件 

VUE中使用MUI方法

2、第二步:拷贝文件

拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 。

若引入的mui.css报错,可能是mui中url会指向一些图片,将图片地址的单引号改为双引号就可以了。

VUE中使用MUI方法

3、第三步:引入MUI的样式

在main.js文件中,引入mui的样式

import 'mui.css文件的相对路径';

如 import '../mui/css/mui.css';

VUE中使用MUI方法

4、第四步:选择需求样式效果

运行mui-master\examples\hello-mui\index.html文件

右键 > 查看网页源代码 > 复制相应代码(这个相应代码是你需要的样式的代码)

接下来以使用MUI的 卡片视图的第三个卡片(有图片有文字的那个) 为例

VUE中使用MUI方法

VUE中使用MUI方法

5、第五步:复制需求样式源码

点击卡片视图后,进入视图页面

右键鼠标 > 点击查看网页源代码 > 复制自己所要应用的代码 >将复制的代码粘贴到你所要使用的那个页面中

第三个卡片视图源码: 

<div class="mui-card">

<div class="mui-card-header mui-card-media" ></div>

<div class="mui-card-content">

<div class="mui-card-content-inner">

<p>Posted on January 18, 2016</p>

<p >这里显示文章摘要,让读者对文章内容有个粗略的概念...</p>

</div>

</div>

<div class="mui-card-footer">

<a class="mui-card-link">Like</a>

<a class="mui-card-link">Read more</a>

</div>

</div> 

VUE中使用MUI方法

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到Vue动态创建注册component的、 Vue2.0使用过程常见的问题、 vue项目刷新当前页面的方、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue:src文件路径错误问题及解决方案

下一篇:在vue项目中使用layui框架的方法及采坑总结

展开 +

收起 -

学习笔记
网友NO.329064

Vue+mui实现图片的本地缓存示例代码

下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = products; for(let i = 0; i state.products.length; i++){ if(state.products[i]['image'] != null){ // state.products[i]['image'] = state.GLOBAL_CONFIG['base64Header'] + state.products[i]['image']; //下载图片到本地 this.commit('imgCache',state.products[i]); }else{ //添加默认图片 state.products[i]['image'] = require("../assets/file.png"); } } }, imgCache: function (state,imgObj) { mui.plusReady(function(){ // 1. 转换网络图片地址为本地缓存图片路径,判断该图片是否存在本地缓存 // http://...jpg - md5 // 缓存目录 _downloads/image/(md5).jpg let image_url = imgObj.image; let image_md5 = md5(image_url); // 缓存本地图片url let local_image_url = '_downloads/image/'+image_md5+'.jpg'; // 平台绝对路径 let absolute_image_path = plus.io.convertLocalFileSystemURL(local_image_url); console.log(absolute_image_path); // 判断本地是否存在该文件,存在就就直接使用,否则就下载 plus.io.resolveLocalFileSystemURL( absolute_image_path, function( entry ) { if(entry){ imgObj.image = plus.io.convertLocalFileSystemURL(local_image_url); }else{ download_img(); } }, function ( e ) { console.log("Resolve file URL failed: "); download_img(); } ); function downl……

网友NO.866131

VUE中使用MUI方法

VUE中如何使用MUI 1、第一步:下载MUI 百度搜索MUI进入其官网点击右上角github地址,下载MUI文件 2、第二步:拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 。 若引入的mui.css报错 ,可能是mui中url会指向一些图片,将图片地址的 单引号 改为 双引号 就可以了。 3、第三步:引入MUI的样式 在main.js文件中,引入mui的样式 i mport ' mui.css文件的相对路径 '; 如 import '../mui/css/mui.css'; 4、第四步:选择需求样式效果 运行mui-master\examples\hello-mui\index.html文件 右键 查看网页源代码 复制相应代码(这个相应代码是你需要的样式的代码) 接下来以使用MUI的卡片视图的第三个卡片(有图片有文字的那个)为例 5、第五步:复制需求样式源码 点击卡片视图后,进入视图页面 右键鼠标 点击查看网页源代码 复制自己所要应用的代码 将复制的代码粘贴到你所要使用的那个页面中 第三个卡片视图源码: div class="mui-card"div class="mui-card-header mui-card-media" /divdiv class="mui-card-content"div class="mui-card-content-inner"pPosted on January 18, 2016/pp 这里显示文章摘要,让读者对文章内容有个粗略的概念.../p/div/divdiv class="mui-card-footer"a class="mui-card-link"Like/aa class="mui-card-link"Read more/a/div/div ……

网友NO.831524

详解vuex中mutation/action的传参方式

前言 在vuex中提交 mutation 是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到 action 里面。对于mutation/action,有一个常见的操作就是传参,也就是官网上说的“提交载荷”。 这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设置分割成不同模块的方法。其中,state模块中配置如下 //vuex中的stateconst state = { count: 0}export default state; mutation传参 朴实无华的方式 mutation.js //vuex中的mutationconst mutations = { increment: (state,n) = { //n是从组件中传来的参数 state.count += n; }}export default mutations; vue组件中(省去其他代码) methods: { add(){ //传参 this.$store.commit('increment',5); }} 对象风格提交参数 mutation.js //vuex中的mutationconst mutations = { decrementa: (state,payload) = { state.count -= payload.amount; }}export default mutations; vue组件 methods: { reducea(){ //对象风格传参 this.$store.commit({ type: 'decrementa', amount: 5 }); },} action传参 朴实无华 action.js /vuex中的actionconst actions = { increment(context,args){ context.commit('increment',args); }}export default actions; mutation.js //vuex中的mutationconst mutations = { increment: (state,n) = { state.count += n; }}export default mutations; vue组件 methods: { adda(){ //触发action this.$store.dispatch('increment',5); }} 对象风格 action.js //vuex中的actionconst actions = { decrementa(context,payload){ cont……

网友NO.726660

浅谈vuex actions和mutation的异曲同工

vuex说明: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 包含的内容: state:驱动应用的数据源; view:以生命方式将state映射到视图; actions:响应在view上的用户输入导致的状态变化; 流程示意图 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。 对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。 对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。 因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为! 另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。 适用于型单页应用 安装vuex npm i vuex 新建文件夹store,建议目录 Actions 和 mutation mutation:(必须是同步函数)……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明