vux · 经验

html+css

  • vux中组件的点击事件要用@click.native="",尤其是<x-button>,最容易忘。

    vue中,你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on 的 .native 修饰符。

  • 页面初始化时让input获取焦点:

    this.$refs.inputName.focus();
复制代码
  • placeholder样式:
    input::-webkit-input-placeholder {}
复制代码
  • 图片
<img :src="require('@/assets/images/icon/icon-index.png')" alt="">
复制代码

vue语法

方法

  • 复制一个新的数组
var newList = JSON.parse(JSON.stringify(this.oldList));
复制代码

vux 采坑

1. prompt形式调用confirm报错 :Cannot read property 'type' of undefined

手动初始化input-attrs即可~

即input的type属性,目前支持 text,number,email,password,tel

this.$vux.confirm.prompt('placeholder', {
  title: 'title',
  inputAttrs: {
    type: 'text'
  },
  onCancel () {},
  onConfirm (msg) {
    console.log('msg->', msg);
  }
});
复制代码

vux简单的组件

  • LoadMore,Spinner ,InlineLoading组件

<style lang="scss">
</style>

<template>
  <div class="test">
    <group>
      <cell title="当前id">
        <spinner type="ios-small" v-if="!id"></spinner>
        <span>{{id}}</span>
      </cell>
    </group>

    <p style="text-align: center;padding: 10px 0;" v-if="!id">
      <spinner type="ios"></spinner>
    </p>

  </div>
</template>

<script>
  import { Spinner, Group, Cell } from 'vux'

  export default {
    name: "test",
    components: { Spinner, Group, Cell },
    data() {
      return {
        id: "",
      }
    },
    mounted() {
      setTimeout(() => {
        this.id = '007'
      }, 2000)
    }
  };
</script>

复制代码
  • 密码框

<div v-if="showModule"></div>

    <!-- 输入密码查看 -->
    <Password
      v-if="showPassword"
      v-bind:module-type="type"
      v-bind:module-id="params.moduleId"
      v-on:returnPassword="receivePassword"
    ></Password>
    
import Fold from "../Fold.vue";
import Password from '../Password.vue'
  
    showPassword:"",
    
showModule(){
  return !this.showPassword;
}

if (sessionStorage.getItem("successVideoPassword") == "true") {
  this.showPassword = false;
}else{
  this.params.moduleObject.displayAuthState==3?this.showPassword = true:this.showPassword = false;
}
  
//接受Password组件传来的信息
receivePassword(res) {
  this.showPassword = res;
}
复制代码
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值