zxz-ui
v1.0.2
Published
组件库
Downloads
20
Readme
起步
CDN 引入
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/zxz-ui.css">
<!-- import zxz-ui -->
<script src="https://unpkg.com/[email protected]/dist/zxz-ui.js"></script>NPM 安装
$ npm install zxz-ui --saveimport 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");组件
旋转卡片
- vue示例: https://39zzw.csb.app/#/rotate-card
<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>
- html示例: https://codepen.io/pma934/pen/YmGJOe
<!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/[email protected]/dist/zxz-ui.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/zxz-ui.css">
<script>
new Vue({
el: "#app",
data: {
},
});
</script>
</body>
</html>- API
属性|说明|类型|默认值 ---|---|---|--- cards-url|图片url|Array|[,,,,] radius|半径(组件高为2倍radius，宽为3倍radius)|Number|200 card-width|卡片宽|Number|120 card-height|卡片高|Number|180 clockwise|顺时针旋转|Boolean|false cycle|旋转一圈时间(秒)|Number|60 is-spin|是否自旋|Boolean|true is-drag|是否可拖动|Boolean|false card-click-event|卡片点击事件(参数一是图片url，参数二是序号)|Function|() => {}