anliny-ui

介绍

anliny-ui是一套简单轻便的UI库，anliny是作者网名。

anliny-ui只是测试版本，功能不全，请谨慎下载。

目前主要继承了按钮组件、对话框组件、字体图标组件和下拉菜单组件。

安装

推荐使用NPM来安装。享受生态圈和工具带来的便利。

命令：

$ npm install anliny-ui --save

如果您使用了 NPM 安装，并使用 webpack 作为构建工具，请继续阅读下面章节。

快速上手

推荐使用vue-cli脚手架

引入anliny-ui

一般在webPack入口页面main.js 中配置：

引入全部anliny-ui

import Vue from 'vue'
import App from './App'
import router from './router'

//引入全部ui组件
import Aui from 'anliny-ui'
Vue.use(Aui)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

按需引入anliny-ui

import Vue from 'vue'
import App from './App'
import router from './router'


//按需引入
import {Button, Modal, Icon, Select} from 'anliny-ui'
Vue.use(Buttom)
Vue.use(Modal)
Vue.use(Icon)
Vue.use(Select)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

基本按钮

按钮类型有：primary按钮、waring按钮、success按钮、default按钮、error按钮、info按钮

通过设置 type 为 primary waring success default error info 创建不同样式的按钮，不设置为default 按钮

示例代码

template>
	<div>
		<Button >default</Button>
		<Button type="primary">primary</Button>
		<Button type="warning">warning</Button>
		<Button type="success">success</Button>
		<Button type="error" >error</Button>
		<Button type="info" >info</Button>
		<Button type="error" loading>loading</Button>
		<Button type="error" icon="close" inline></Button>
	</div>
</template>
<script>
    export default {
        
    }
</script>

图标按钮

示例代码

template>
	<div>
		//loading按钮
		<Button loading>loading···</Button>

		//其他图标按钮
		<Button type="primary" icon="close" inline>close</Button>
		<Button type="primary" icon="coffee" inline>coffee</Button>
	</div>
</template>
<script>
    export default {
        
    }
</script>

对话框（模态框）

模态对话框，在浮层中显示，引导用户进行相关操作。

方法弹窗

简单弹窗---示例代码

<template>
	<Button type="text" @click="add">方法弹窗</Button>
</template>

<script>
export default {
	name:'app',
	data():{
		show: false
	}
	mounted:{
		add() {
			this.$modal({
				title:'对话框标题',
				content:"对话框内容，对话框内容。",
				okText:'确定（可自定义）',
				ok:function(){
					console.log('ok2')
					//return true;  //点击确定关闭对话框
				},
				//取消方法可省略
				cancel:function(){
					console.log('cancel1')
				}
			})
		}
	}
}
</script>

组件插入对话框

示例代码

<template>
	<Button type="text" @click="show=!show">方法弹窗</Button>
    <Modal title="对话框标题" v-model="show" @ok="ok" @cancel="cancel"  ok-text="ok" cancel-text="cancel">
        <div>组件插入对话框</div>
    </Modal>
</template>
<script>

export default {
  	name: 'App',
	data(){
        return {show: false}
    },
	methods: {
		ok(){
			console.log('ok')
			this.show = false;
		},
		cancel(){
			console.log('cancel')
		}
    },
}	

字体图标

anliny-ui的图标使用开源项目ionicons

使用组件 三个属性：

• name 图标名称，渲染过后即：样式的类 string
• :size 图标大小，number | string
• color 颜色 ， string

示例代码：

<Icon name="alert"> 
<Icon name="alert" :size="25" color="red"> 

渲染后

<i class="ion-alert"></i>
<i class="ion-alert" style="font-size: 22px; color: red;"></i>

下拉菜单

anliny-ui提供了一个简单的下拉菜单，提供测试 示例代码

<template>
	<div>
		<Select v-model="select">
			<Option 
				v-for="item in options" 
				:key="item" 
				:value="item"></Option>
		</Select>
	</div>
</template>
export default {
	name: 'App',
	data() {
		return {
			select:'江湖',  //默认值可以为空
			options: ['张三','李四','王麻子']
		}
	},
}