yelo-ui v0.0.3
🚀 yelo - ui
基于 Vue3 + TypeScript + Vite3 的组件库
对 tour(用户引导)、ecahrts、swiper、modal、button、textarea 组件实现封装
npm i yelo-ui
Github:https://github.com/xiaogua-bushigua/yelo-ui
npm:https://www.npmjs.com/package/yelo-ui
在线浏览:http://175.24.176.28:8002/#/home
🪡 使用方法
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import yeloUI from 'yelo-ui'
import 'yelo-ui/dist/style.css'
createApp(App).use(yeloUI).mount('#app')
组件页
<yeloTour :option="tourOptions" :show="true" />
🧩 Tour
const block1 = ref<Element>();
const block2 = ref<Element>();
const block3 = ref<Element>();
const block4 = ref<Element>();
const block5 = ref<Element>();
const tourOptions = [
{
target: block1,
content: '《荷塘月色》是中国现代文学家朱自清任教清华大学时创作的散文,因收入中学语文教材而广为人知,是现代抒情散文的名篇。',
position: ['bottom', 'right'],
},
{
target: block2,
content: '《背影》是现代作家朱自清(1898-1948)于1925年所写的一篇回忆性散文。这篇散文叙述的是作者离开南京到北京大学,父亲送他到浦口火车站,照料他上车,并替他买橘子的情形。',
position: ['bottom', 'right'],
},
{
target: block3,
content: '《故都的秋》是中国现代著名小说家、散文家、诗人、革命烈士郁达夫于1934年8月创作的散文。',
position: ['top', 'left'],
},
{
target: block4,
content: '《六国论》提出并论证了六国灭亡“弊在赂秦”的精辟论点,“借古讽今”,抨击宋王朝对辽和西夏的屈辱政策,告诫北宋统治者要吸取六国灭亡的教训,以免重蹈覆辙。',
position: ['bottom', 'left'],
},
{
target: block5,
content: '《赤壁赋》是北宋文学家苏轼创作的一篇赋,作于宋神宗元丰五年(1082年)作者贬谪黄州(今湖北黄冈)时。',
position: ['top', 'right'],
},
];
配置项
target
:ref
引用的元素
content
:提示框里的文本内容
position
:提示框相对于高亮元素的位置,['top/bottom', 'right/left']
show
:控制组件显示【可选参数】
<yelo-tour :option="tourOptions" :show="true"/>
实际使用时建议搭配 v-if 指令,以在组件外更好的控制:
onMounted(() => {
if (localStorage.getItem('doneTour') !== 'yes') useMainStore().tourShow = true;
else useMainStore().tourShow = false
});
<yeloTour :option="tourOptions" v-if="useMainStore().tourShow"/>
🧩 Echarts
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
const option1: EChartsOption = {
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7']
},
yAxis: {
type: 'value'
},
series: [
{
data: [
120,
{
value: 200,
itemStyle: {
color: '#a90000'
}
},
150,
80,
70,
110,
130
],
type: 'bar'
}
]
};
const option2: EChartsOption = {
xAxis: {
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
},
yAxis: {},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42]
]
}
]
};
let option = ref(option1)
更改尺寸
let height = ref("300") let width = ref("500") const handleChangeSize = () => { height.value = (300 + Math.floor(Math.random() * 100 - 100)) + '' width.value = (500 + Math.floor(Math.random() * 100 - 100)) + '' }
<yeloButton type="primary" @click="handleChangeHeight">自适应尺寸</yeloButton> <yeloEcharts :height="height" :width="width" :option="option"></yeloEcharts>
更换配置
let flag = true const handleChangeChart = () => { if (flag) { option.value = option2; flag = false } else { option.value = option1; flag = true } }
<yeloButton type="primary" @click="handleChangeChart">更改options</yeloButton> <yeloEcharts :height="height" :width="width" :option="option"></yeloEcharts>
🧩 Swiper 轮播
const imgsURL = ['/src/assets/swipers/1.jpeg', '/src/assets/swipers/2.jpeg', '/src/assets/swipers/3.jpeg']
const imgsURL1 = ['https://img2.baidu.com/it/u=2632730749,1389792745&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721', 'https://img2.baidu.com/it/u=452199401,3287833971&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1037', 'https://img1.baidu.com/it/u=3170338415,819326975&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=896']
定时切换
<yeloSwiper :imgsURL="imgsURL" setTime></yeloSwiper>
更改尺寸
<yeloSwiper :imgsURL="imgsURL1" setTime :height=240 :width=160></yeloSwiper>
侧边点击切换+定时
<yeloSwiper :imgsURL="imgsURL" sideClicked setTime></yeloSwiper>
下方点击切换+侧方点击切换+定时
<yeloSwiper :imgsURL="imgsURL" botClicked setTime sideClicked></yeloSwiper>
🧩 Button
default、primary、success、info、danger、warning 六种基本样式类型
<yelo-button>Default</yelo-button> <yelo-button type="primary">Primary</yelo-button> <yelo-button type="success">Success</yelo-button> <yelo-button type="info">Info</yelo-button> <yelo-button type="warning">Warning</yelo-button> <yelo-button type="danger">Danger</yelo-button>
圆角、plain、可设置禁用
<yelo-button type="primary" plain>Primary</yelo-button> <yelo-button type="primary" round>Primary</yelo-button> <yelo-button type="primary" disabled>Primary</yelo-button>
三种基本大小
<yelo-button type="primary" size="small">Small</yelo-button> <yelo-button type="primary">Middle</yelo-button> <yelo-button type="primary" size="large">Large</yelo-button>
设置 icon
使用 iconfont 阿里巴巴矢量图标,https://www.iconfont.cn/
在 iconfont 添加图标至自定义的项目,选择 Font Class 一栏,并下载至本地
将解压出来的文件放到 src\assets\iconfont
在 vue 项目的 index.html 中引入,
<link rel="stylesheet" href="./src/assets/iconfont/iconfont.css">
<yelo-button type="primary" prefixIcon="shoucang">收藏</yelo-button> <yelo-button type="primary" suffixIcon="dianzan">点赞</yelo-button> <yelo-button type="primary" prefixIcon="shoucang" suffixIcon="dianzan">双侧</yelo-button>
点击显示动态 icon
<yelo-button @btnClick="handleClick" type="primary" prefixIcon="shuyi_jiazai" suffixIcon="xiazai" :loading="loading">下载</yelo-button>
🧩 Textarea
const temp = ref("请输入内容")
const test = ref('A1高闪来一个,秋梨膏')
const handleInput = (tar: HTMLInputElement) => {
test.value = tar.value
}
const handleFocus = (tar: HTMLInputElement) => {
console.log('您已聚焦', tar.value)
}
const handleBlur = (tar: HTMLInputElement) => {
console.log('您已移出', tar.value)
}
基本使用
<yeloTextarea :text="test" @handleInputEmit="handleInput"></yeloTextarea>
设置禁用
<yeloTextarea :text="test" @handleInputEmit="handleInput" disabled></yeloTextarea>
设置只读
<yeloTextarea :text="test" @handleInputEmit="handleInput" readonly></yeloTextarea>
设置placeholder
<p>父组件绑定子组件内容:{{ test }}</p> <yeloTextarea :text="test" @handleInputEmit="handleInput" :placeholder="temp"></yeloTextarea>
设置聚焦/移出回调函数
<yeloTextarea :text="test" @handleInputEmit="handleInput" @handleFocusEmit="handleFocus" @handleBlurEmit="handleBlur"></yeloTextarea>
设置最大输入长度
<yeloTextarea :text="test" @handleInputEmit="handleInput" :rows=6 :cols="25" :maxLen=20></yeloTextarea>
开启resize
<yeloTextarea :text="test" @handleInputEmit="handleInput" resize></yeloTextarea>
🧩 Modal
let display = ref('none')
const handleOpen = () => {
display.value = 'block'
}
const handleClickYes = () => {
display.value = 'none'
console.log('你点击了确认');
}
const handleClickNo = () => {
display.value = 'none'
console.log('你点击了取消');
}
const handleClickBack = () => {
display.value = 'none'
console.log('你点击了遮罩');
}
普通模态框
<yeloButton type="primary" @click="handleOpen">删除</yeloButton> <yeloModal title="提示框" :display="display" @handleYesEmit="handleClickYes" @handleNoEmit="handleClickNo" @handleBackEmit="handleClickBack">您确认要删除吗?</yeloModal>
表单模态框
<yeloButton type="primary" @click="handleOpen1">添加人员</yeloButton> <yeloModal title="提示框" :display="display" @handleYesEmit="handleClickYes" @handleNoEmit="handleClickNo" @handleBackEmit="handleClickBack"> <div>姓名:<input type="text"/></div> <div>年龄:<input type="text"/></div> <div>身高:<input type="text"/></div> </yeloModal>