云迈博客

您现在的位置是:首页 > 前端技术 > 正文

前端技术

vue和uniapp的使用经验

suqin2021-12-31前端技术127
1.子组件的Prop限制在一定类型中的选择在使用prop时,可能会有时候需要判断该prop是否在我们规定的范围内(或者说规定的值内),此时可以使用prop定义中的validator选项

1.子组件的Prop限制在一定类型中的选择

在使用 prop 时,可能会有时候需要判断该 prop 是否在我们规定的范围内(或者说规定的值内),此时可以使用 prop 定义中的 validator 选项,将一个 prop 类型限制在一组特定的值中。

   export default {
      name: 'Test',
      props: {
        name: {
          type: String,
        },
        size: {
          type: String,
          validator: s => ['small', 'middle'].includes(s)
        }
      }
    };

这个验证函数接受一个 prop,如果 prop 有效或无效,则返回 true 或 false。

将局部和全局的 style 混合在一起

通常情况下,在处理样式时,我们希望它们只在当前组件内起作用,如果需要的话,也可以添加一个非作用域样式块来添加全局样式,
示例:uniapp APP端要设置page整个页面的背景颜色,不能在局部里面写

<style>
  /* 全局 */
  .content p {
    font-size: 12px;
  }
</style>

<style scoped>
  /* 在该组件内有效 */
  .content {
    background: green;
  }
</style>

样式的覆盖

如果某个全局class设置了一个背景颜色,但是某个页面不需要,在less和scss的编译模式下,可以使用/deep/

<style lang="less" scoped>
/deep/ .child-component {
  font-size: 16px;//重新覆盖的样式
}
</style>

uniapp 的单选框圆圈太大了,缩小一些

transform:scale(0.7)

transform:scale(0.7)

uniapp 返回上一页并传递参数

let pages = getCurrentPages();             //获取所有页面栈实例列表
let nowPage = pages[ pages.length - 1];    //当前页页面实例
let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
prevPage.$vm.couponNumber = value;         //修改上一页面的 couponNumber 参数值为 value
prevPage.$vm.couid = vid;                  //修改上一页面的 couid 参数值为 vid
uni.navigateBack({                         //uni.navigateTo跳转的返回,默认1为返回上一级
    delta: 1
});

unapp视频获取第一帧

我没在代码里面实验过,网上找的一个方法,记录一下

<video :src="item.sp_url" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video>
//图片也可以用
<image class="zu_logo" :src="item.sp_url+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""></image>

//只需要在地址后面加这一段代码就可以了
'?x-oss-process=video/snapshot,t_0,f_jpg' 

如果使用this.$refs.del.open()没有起效

可以看先是否有两个ref= del的属性,这种情况一般是写在了for循环里面,也可以通过下面这种方式获得,0可以替换成下标

this.$refs.del[0].open();

vue数组切换某些属性名

 this.options = res.data.map(item=>{
     item.value = item.id;
    item.label = item.cate_name;
 });

vue 里面js文件跳转路由的方法

import router from '@/router/index.js'

router.push('/')
router.back()

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~