vue-wj-ui v0.1.2

下载

npm i 

Button按钮系列

wj-button-dimple

说明：涟漪动画效果按钮

使用：

<wj-button-dimple>button</wj-button-dimple>

参数：

wj-button-threeD

说明：3D涟漪动画按钮

使用：

<wj-button-threeD>button</wj-button-threeD>

参数：

wj-button-glass

说明：毛玻璃主题按钮

使用：

<wj-button-glass>button</wj-button-glass>

参数：

Car卡片系列

wj-car

说明：默认卡片

使用：

<wj-car title="嘿" subhead="我是副标题">
	输入内容
</wj-car>

参数：

wj-car-turn

说明：翻转卡片

使用：

<wj-car-turn>
	<template v-slot:fornt>
            正面内容
    </template>
    <template v-slot:back>
            反面内容
    </template>
</wj-car-turn>

参数：

wj-car-effect

说明：聚焦卡片队列，car-effect-item为item元素

使用：

<wj-car-effect>
	<car-effect-item title="自定义标题" content="自定义内容"/>
    <car-effect-item>
        您可以再此输入自定义内容，也可以使用car提供的模板修改title和content
    </car-effect-item>
</wj-car-effect>

参数：

car-effect-item参数：

后期会根据需求全局less变量配置car背景色等，待完善.....

wj-car-dir

说明：方向旋转卡片

使用：

<wj-car-dir>
    <car-dir-item>
        在此输入您的内容
    </car-dir-item>
</wj-car-dir>

参数：

car-effect-item参数：

wj-loading

说明：加载图标

使用：

<wj-loading></wj-loading>

参数：

wj-liquidAside

说明：液态侧边栏，暂时只支持一级menu

使用：

<wj-liquidAside>logo插槽（选填）</wj-liquidAside>

参数：

示例：

<template>	<wj-liquidAside :menuData="menuData">    	<div>            这里可以放Logo    	</div>    </wj-liquidAside></template><script>    data(){        return{            menuData: [                {                  title: "item",                  path: "/#",                  icon: "iconfont icon-index",                  clickMethod: (e) => {                    console.log(e);                  },                },                {                  title: "主页",                  path: "/#",                  icon: "iconfont icon-index",                  clickMethod: (e) => {                    console.log(e);                  },                },            ]        }    }</script>

wj-switch

说明：switch选择器

使用：

<template>	<wj-switch v-switchVal="flag"></wj-switch>	<button @click="showFlag">        查看绑定值变化    </button></template><script>	export default{        data(){            return{                flag:true            }        },        methods:{            showFlag(){                console.log(this.flag)            }        }    }</script>

参数：

wj-menu-effect

说明：菜单导航栏

使用：

menu-effect-item为item元素

//注意：外层需要一个容器<div class="menu">	<wj-menu-effect>		<menu-effect-item>首页</menu-effect-item>	</wj-menu-effect></div>

参数：无。

wj-nav

说明：侧边导航栏

使用：

nav-item为item元素

<wj-nav>	<nav-item>1</nav-item>	<nav-item>1</nav-item>	<nav-item>1</nav-item></wj-nav>

参数：

wj-dialog