1.0.2 • Published 6 years ago

zxz-ui v1.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
6 years ago

起步

CDN 引入

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/zxz-ui@1.0.1/dist/zxz-ui.css">
<!-- import zxz-ui -->
<script src="https://unpkg.com/zxz-ui@1.0.1/dist/zxz-ui.js"></script>

NPM 安装

$ npm install zxz-ui --save
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import ZxzUi from "zxz-ui";
import "zxz-ui/dist/zxz-ui.css";

Vue.use(ZxzUi);

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

组件

旋转卡片

image

<template>
  <div>
    <rotate-card
      :cardsUrl="images"
      :radius="300"
      :cardWidth="200"
      :cardHeight="340"
      :clockwise="false"
      :cycle="30"
      :isDrag="true"
    ></rotate-card> 
  </div>
</template>

<script>
export default {
  name: "use-rotate-card",
  data() {
    return {
      images: [
        "https://s2.ax1x.com/2019/06/16/VToxQH.jpg",
        "https://s2.ax1x.com/2019/06/23/Z9z7DK.jpg",
        "https://s2.ax1x.com/2019/06/23/Z9zHHO.jpg",
        "https://s2.ax1x.com/2019/06/23/Z9zLUe.jpg",
        "https://s2.ax1x.com/2019/06/23/Z9zO4H.jpg",
        "https://s2.ax1x.com/2019/06/23/Z9zqED.jpg"
      ]
    };
  },
  components: {
  }
};
</script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <rotate-card :cards-url="images" :radius="300" :card-width="200" :card-height="340" :clockwise="false" :cycle="30" :is-spin="true" :is-drag="true" :card-click-event="(url,index)=>{window.open(url)}" />
  </div>
  <script src="https://vuejs.org/js/vue.min.js"></script>
  <script src="https://unpkg.com/zxz-ui@1.0.1/dist/zxz-ui.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/zxz-ui@1.0.1/dist/zxz-ui.css">
  <script>
    new Vue({
      el: "#app",
      data: {
      },
    });
  </script>
</body>

</html>
  • API
属性说明类型默认值
cards-url图片urlArray,,,,
radius半径(组件高为2倍radius,宽为3倍radius)Number200
card-width卡片宽Number120
card-height卡片高Number180
clockwise顺时针旋转Booleanfalse
cycle旋转一圈时间(秒)Number60
is-spin是否自旋Booleantrue
is-drag是否可拖动Booleanfalse
card-click-event卡片点击事件(参数一是图片url,参数二是序号)Function() => {}
1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago