vux experience

vux experience


  • The click event of the component in vux needs to be used @click.native="", especially <x-button>, it is the easiest to forget.

    In vue, you may want to listen to a native event directly on the root element of a component many times. At this point, you can use the v-on of .nativemodifiers.

  • Let input get focus when the page is initialized:

  • placeholder style:
    input::-webkit-input-placeholder {}
  • image
<img :src="require('@/assets/images/icon/icon-index.png')" alt="">

vue syntax


  • Copy a new array
var newList = JSON.parse(JSON.stringify(this.oldList));

vux pit

1. Call confirm in prompt form to report an error:Cannot read property 'type' of undefined

Manually initialize input-attrs~

Namely the type attribute of input, currently supports text, number, email, password, tel

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

Vux simple components

  • LoadMore, Spinner, InlineLoading components

<style lang="scss">

  <div class="test">
      <cell title=" id">
        <spinner type="ios-small" v-if="!id"></spinner>

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


  import { Spinner, Group, Cell } from 'vux'

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

  • Password box

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

    <!--   -->
import Fold from "../Fold.vue";
import Password from '../Password.vue'
  return !this.showPassword;

if (sessionStorage.getItem("successVideoPassword") == "true") {
  this.showPassword = false;
  this.params.moduleObject.displayAuthState==3?this.showPassword = true:this.showPassword = false;
receivePassword(res) {
  this.showPassword = res;