阿里云播放器Alipalayer官方的展示和配置详见:https://player.alicdn.com/aliplayer/presentation/index.html 官方的展示使用的并不是vue的写法,这边整理了了一下vue的写法,如果是配置方面的,可以把配置的代码复制过来直接时候,另外也考虑到了插件组件的使用,也是集成进去了。 示例中使用了2.9.20版本的js和css,使用了ali的CDN引用的,组件使用的是1.0.8的版本,这个是没有CDN的,需要直接从github上下载 https://github…

2022-05-16 0条评论 3点热度 0人点赞 admin 阅读全文

使用Vant做一个Field,点击Field的前面部分,触发catClicked,弹出Picker选择框;另外右侧使用插槽放置了一个按钮,也可以使用触发里面的addCatClicked方法。 代码如下: <van-field :value="cat" @click="catClicked" readonly placeholder="请选择分类" > <template #button> <van-button size="mini" icon="plus" type="info" @…

2022-05-12 0条评论 12点热度 0人点赞 admin 阅读全文

iView的Input输入框,希望用户点到输入框的时候,自动全选输入框里内容,方便用户直接输入新的文字内容。 可以使用@on-focus来实现,给on-focus绑定方法,$event.target.select()来全选内容,如下: <i-input v-model="cg.inSh" type="text" @on-focus="$event.target.select()" style="width: 250px;" :maxlength="50"> <span slot="prepend"…

2022-04-25 0条评论 30点热度 0人点赞 admin 阅读全文

iView中的Input输入框虽然可以限制type="number",限制只能输入数字(任能输入小数点、+/-号),但是不能满足如下需求: 仅限制输入数字(整数)或者不带小数点,等其他随意限制的情况;另外希望VueJS原生的input也能限制自定义的输入。 我们可以利用@on-keydown监听键盘输入的内容(keyCode),给需要能输入的内容加入白名单,不在白名单中的字符使用event.returnValue = false; 来达到不允许输入目的。 Html代码如下: <i-input v-model=…

2022-04-20 0条评论 22点热度 0人点赞 admin 阅读全文

VUE项目中,可能需要用到监听路由变化的场景,例如:在Header组件中,需要根据当前的路由,来动态改成Header中的图片或者其他内容。 我们知道vue中使用watch来监听data内容的变化,要如何监听route的变化呢?代码如下 watch: { $route (newRoute) { var path = newRoute.path; if(path === '/login') { this.backgroundImg = require('../assets/home_bg2.jpg'); } else …

2022-04-12 0条评论 25点热度 0人点赞 admin 阅读全文

iView的表格虽然有了很多定制化的功能,不过有一个需求,官方始终没有实现,那就是表格的分组功能,来看下这个需求,客户想要实现如图的分组功能: 根据时间的不同,按照『今天』,『昨天』,『一周内』,『一个月内』,『更早』,另外根据其他需求的不同,根据其他类别进行分组展示。 虽然官方没有提供现成的解决方案,不过iView表格文档的『特定样式』进行改造,来实现这部分效果。这部分网上查了没有相关的实现,是我自己想出来的,应该算是独家吧,哈哈。 如上图,分组显示的列其实也是普通的一行,只是使用列合并把整行都跨过去了。另外针对…

2022-03-12 0条评论 54点热度 0人点赞 admin 阅读全文

Vant里面日历,需要设置比如周末是不可选的,默认看文档说明是van-calendar有min-date和max-date两个属性,是分别设置可选的最早日期和最晚日期,不过还是不能满足设置特定的日期不可选这个功能。 经过一番搜索和研究,可以使用:formatter来实现,文档是有提到formatter不过没有具体的示例,来看一下。 <van-calendar :formatter="formatter" :show-confirm="false" v-model="showCalendar" @confirm…

2022-03-08 0条评论 46点热度 0人点赞 admin 阅读全文

RT Vant的Dialog对话框,有个需求,就是按确定的时候,我们可能是请求后端的API,但是后端可能返回不成功,这个时候,就不应该关闭对话框了。 Dialog有个属性是before-close可以在这里面阻止对话框的关闭。 例如: <van-dialog v-model="showIdCardDialog" :before-close="saveIdCardClicked" title="身份证号" show-cancel-button> <van-field v-model="idCard"…

2022-03-07 0条评论 63点热度 0人点赞 admin 阅读全文

微信公众号里的网页支付,网上很多说的是使用纯JS的方式(包括官方的例子,也是距离的纯JS的实现方式),如果我们使用的vue搭建的项目,也是类似的,下面给出我的实现方式。 package.json加入"weixin-js-sdk": "^1.6.0",如下: { "name": "test-wx", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service …

2022-02-28 0条评论 69点热度 0人点赞 admin 阅读全文

打开一个vue项目,里面有SASS语法,其中CSS里用到/deep/,发现编译报错,如下: ERROR Failed to compile with 1 errors 10:34:52 AM error in ./src/components/floatBtn.vue?vue&type=style&index=0&id=cacbdb20&lang=scss&scoped=true& Module build failed (from ./node_modules/sa…

2022-02-13 0条评论 563点热度 0人点赞 admin 阅读全文