Vue.js

Vue.js似乎成了一种潮流。 UI框架element-ui也跟着成了一种潮流，不过得承认，至少我个人还是非常认可的，element-ui做的是真不错。 用到element-ui，那么在dialog中搭配form就必不可少。 <el-dialog :visible.sync="visible" title="弹窗" :before-close="beforeClose" @open="openDialog" width="480px" > <el-form :model="form" :rules="rules" ref="form" > <el-form-item label="操作人" prop="operator" > <el-input placeholder="请输入操作人" v-model.trim="form.operator" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer" > <el-button @click="submit" type="primary" class="btn-custom" > <span>确 定</span> </el-button> </div> </el-dialog> 弹窗内有form表单，而且这个表单需要校验

方法一： < a :href= "'tel:' + 110">call me </ a> 方法二： < a @ click= "callPhone">联系商家 </ a> callPhone(){ window.location.href = 'tel://110' }, 来源： oschina 链接： https://my.oschina.net/u/4321106/blog/3528313

前言 据广大用户的需求，需要把我们anyRTC的SDK，封装到uni-app来使用，并且实现音视频通话。这边文章图文讲解一下怎么封装原生插件，并且在下一章uni-app实现音视频通话。 anyRTC开发者中心 1.uni-app是什么？ 一个使用Vue.js开发所有前端应用框架,开发者编写一套代码,可发布到ios、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 如果你还没有了解uni-app是什么： 点击这里：这篇文章举例说明。 2.uni-app的特点 1、跨平台更多 真正做到“一套代码、多端发行”！ 条件编译：优雅的在一个项目里调用不同平台的特色功能！ 2、运行体验好 组件、api与微信小程序一致 兼容weex原生渲染 3、通过技术栈，学习成本低 vue的语法、微信小程序的api 内嵌mpvue 4、开放生态，组件更丰富 5、支持通过npm安装第三方包 6、支持微信小程序自定义组件及SDK 7、兼容mpvue组件及项目 8、App端支持和原生混合编码 9、DCloud将发布插件市场 3.uni-app封装原生插件 3.1 Android离线SDK下载： 点击下载 ，两个SDK均可。 下载完成，解压备用： 3.2 新建Android项目 打开Android Studio，建立一个No Activity项目。在菜单栏选择 File>New

这篇文章主要介绍了Vue 实现拨打电话操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 我就废话不多说了，大家还是直接看操作吧~ < p > 联系电话： < a : href = "'tel:' + item.phone" rel = "external nofollow" > { { item . phone } } < / a > < / p > 补充知识 ：vue移动项目中如何设置点击手机号码就唤起拨号功能 1、在vue项目的index.html中添加如下代码： < meta name = "format-detection" content = "telephone=yes" / > 2、在需要调起手机拨号功能的页面，写如下函数： // 调用拨号功能 callPhone ( phoneNumber ) { window . location . href = 'tel://' + phoneNumber } 3、在需要调用的地方，调用此函数，传入对应的手机号码。 另外，还可以通过android 调用Intent来实现，百度有很多，就不举例了。 end! 以上这篇Vue 实现拨打电话操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我。 来源： oschina 链接： https://my.oschina.net/u

Vue+iView通过a标签 绑定事件 导出文件 使用a标签绑定事件: <a @click.prevent="downloadItem(downUrl)" :href="downUrl" >下载模板</a> 定义下载方法会使用到axios: import Axios from ' axios ' methods: { downloadItem (url) { Axios. get (url, { responseType: ' blob ' }) .then(({ data }) => { // 为了简单起见这里blob的mime类型 固定写死了 let blob = new Blob([data], { type: ' application/vnd.ms-excel ' }) let link = document.createElement( ' a ' ) link.href = window.URL.createObjectURL(blob) link.download = url.split( ' / ' ).pop() link.click() . catch (error => { console.error(error) }) }) } } Vue+iView通过a标签 属性 导出文件 a标签绑定属性 <a href= " url " download=

最近做项目用到vue+iview Switch 开关，遇到两个问题 问题1：直接引用开关组件 组件在页面中显示不出来 如： <Switch v-model="switch1" @on-change="change" /> 解决： < i-switch v-model= "switch1" @ on-change= "change" /> 这样就可以了 问题2：从后台获取数据回显的时候报错 如： Value should be trueValue or falseValue 解决： <template> <i- switch v-model="data.switchShow" size="large" true -value="true" false -value="false"> <span slot="open">开启</span> <span slot="close">禁用</span> </i-switch> </template> <script> export default { data() { return { data: { switchShow: false , }, } }, mounted() { axs.get('').then(res => { this.data= { //重新赋值switchShow属性 因为请求之后 switchShow属性会被清空，

简介 之前的技术路线本来是angular的，后来经过一段时间的开发还是打算选择vue，原因是vue简单丰富，尽管angular规范强大，但是组件库都不太符合国人风格。看到GitHub上Vue Element Admin这么高的人气后就毫不犹豫的选择了这个后台管理框架。作为一个后端开发，刚刚下载Vue Element Admin框架时确实无从下手，但是一番研究之后也就适应了，今天就介绍下改造Vue Element Admin登录并对接vNext授权服务。vNext授权服务使用的是ids4框架，所以使用ids4框架授权的服务都可以参考该登录。 代码分析 根据Vue Element Admin作者的介绍，该框架登录需要两步，获取token和获取userinfo（用户信息）。作者公司的后端设计应该是用户信息中包括用户权限，所以Vue Element Admin（后称Admin）登录只需调两次接口。 在view路径的login中可以看到login的click事件： handleLogin() { this .$refs.loginForm.validate(valid => { if (valid) { this .loading = true this .$store.dispatch("user/userLogin", this .loginForm).then(()=> { this

一、路由拦截 登录拦截逻辑 第一步：路由拦截 首先在定义路由的时候就需要多添加一个自定义字段 requireAuth ，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const routes = [ { path: '/' , name: '/' , component: Index }, { path: '/repository' , name: 'repository' , meta: { requireAuth: true , // 添加该字段，表示进入这个路由是需要登录的 }, component: Repository }, { path: '/login' , name: 'login' , component: Login } ]; 定义完路由后，我们主要是利用 vue-router 提供的钩子函数 beforeEach() 对路由进行判断。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 router.beforeEach((to, from , next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.state

一、路由拦截 登录拦截逻辑 第一步：路由拦截 首先在定义路由的时候就需要多添加一个自定义字段 requireAuth ，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const routes = [ { path: '/' , name: '/' , component: Index }, { path: '/repository' , name: 'repository' , meta: { requireAuth: true , // 添加该字段，表示进入这个路由是需要登录的 }, component: Repository }, { path: '/login' , name: 'login' , component: Login } ]; 定义完路由后，我们主要是利用 vue-router 提供的钩子函数 beforeEach() 对路由进行判断。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 router.beforeEach((to, from , next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.state

　　一个被渲染组件同样可以包含自己的嵌套 <router-view>。同样要有vue-router的三个要素：路由map 、路由视图、路由导航。 　　举个在"/apple" 下再嵌套路由的例子。 要素一：路由map 　　子路由需要在 VRouter 的参数中使用 children 配置： let router= new VRouter({ mode: 'history' , routes:[ { path: '/apple/:color' , component:Apple, name: 'applename' , children:[ { path: 'red-apple' , component:RedApple }, { path: 'green-apple' , component:GreenApple } ] }, { path: '/banana' , name: 'banananame' , component:Banana } ] }); 要素二：路由视图 　　在上级路由匹配组件里添加路由视图，本例中在 Apple 组件的模板添加 <router-view> < template > < div > < p > apple </ p > < router-view ></ router-view > </ div > </ template > 要素三：路由导航