jung1e-components v0.0.6

cli-components

Project setup

npm install jung1e-components

Compiles and hot-reloads for development

npm run serve

Customize configuration

See Configuration Reference. See My Github.

Examples

Button examples

<div class="PageButton">
  <my-button></my-button>
  <h1>This is an PageButton page</h1>
  <my-button>点个赞再走吧</my-button>
  <br>
  <br>

  <my-button animated = "vertical" >
    <template #hidden>$10000</template>
    <template #visible><i class="shop icon"></i>不要错过哈</template>
  </my-button>

  <my-button animated="fade" >
    <template #hidden>$10000</template>
    <template #visible><i class="shop icon"></i>不要错过哈</template>
  </my-button>

  <br>
  <br>
  <my-button size="mini">Mini小按钮</my-button>
  <br>
  <br>
  <my-button size="large">Large大按钮</my-button>
  <br>
  <br>
  <my-button size="huge">Huge 大按钮</my-button>
  <br>
  <br>
  <my-button disabled icon="bug">带图标的按钮</my-button>
  <br>
  <br>
  <my-button loading icon="child">正在加载的按钮Loading</my-button>
  <br>
  <br>
  <my-button @click="hClick(123)" icon="warning circle">带图标的按钮</my-button>
</div>

export default {
  name: 'PageButton',
  methods: {
    hClick (a) {
      console.log(a)
    }
  }
}

Divider examples

<div id="PageDivider">
  <my-divider icon="handicap">W</my-divider>
  <my-divider icon="handicap">D</my-divider>
  <my-divider icon="handicap">N</my-divider>
  <my-divider icon="handicap">M</my-divider>
  <my-divider icon="child">D</my-divider>
</div>

Slider examples

<div id="PageSlider">
  <my-slider style="width:960px;hight:600px;"
  :auto="auto"
  :curIdx="curIdx"
  :list="list"
  @click="hClick"></my-slider>
</div>

export default {
  name: 'PageSlider',
  data () {
    return {
      curIdx: 0,
      list: [{ url: require('../assets/./img/1.jpg'), alt: '1.GW2' },
        { url: require('../assets/./img/2.jpg'), alt: '2.GW2' },
        { url: require('../assets/./img/3.jpg'), alt: '3.GW2' },
        { url: require('../assets/./img/4.jpg'), alt: '4.GW2' },
        { url: require('../assets/./img/5.jpg'), alt: '5.GW2' }
      ],
      auto: 2000
    }
  },
  methods: {
    hClick (idx) {
      console.log(idx)
    }
  }
}