ive-vue-mobile
ive-vue-mobile
介绍
ive-vue-mobile 基于vue3封装了一些简单手机端常用的组件和方法。
库的总大小为400kb+,推荐使用按需引入的方法,方便Tree-Sharking。更多组件还在完善中,敬请期待。
css处理器使用的是scss,请预先安装好scss环境。
目录
组件
组件名称 | 说明 | 详细用法 | 文档 |
---|---|---|---|
IveModal | 弹窗组件 | 查看 | 查看 |
IveDrager | 拖拽组件 | 查看 | 查看 |
IveLoading | 加载组件 | 查看 | 查看 |
IveCountdown | 倒计时组件 | 查看 | 查看 |
IvePullRefresh | 下拉刷新&&触底加载组件 |
查看下拉刷新示例 查看触底加载示例 查看下拉刷新和触底加载同时存在的示例 |
查看 |
方法
方法名称 | 说明 | 详细用法 | 文档 |
---|---|---|---|
copy | 复制方法 | 查看 | 查看 |
validate | 表单校验方法 | 查看 | 查看 |
安装
yarn install ive-vue-mobile --save
use in html 简单的介绍,以IveModal组件为例
<script src="vue3_path/vue.runtime.global.js"></script>
<script src="your_path/iveVueMobile.umd.js"></script>
<script>
iveVueMobile.IveModal.show({
title: "自定义模板",
content: '{{label}}<input v-modal="name">',
data: { name: "我和content模板中的值关联", label: 'exaxple'},
footer: [
{
type: 'delete',
text: '取消',
onClick: (data, close) => {
console.log(data);
alert("你取消了");
close();
},
},
{
type: 'primary',
text: '确定',
onClick: (data, close) => {
console.log(data);
if (data.name.length > 18) {
close();
} else {
alert("name的长度小于18");
}
},
},
]
});
</script>
use in es2015
全局注册
import { createApp } from 'vue';
import IveVueMobile from 'ive-vue-mobile';
const app = createApp(App);
app.use(IveVueMobile);
On-demand 按需引入
import { IveModal } from 'ive-vue-mobile';
IveModal.show({
title: "modalFormTemplate默认模板",
content: IveModal.modalFormTemplate,
data: { name: "name", label: 'modalFormTemplate的label'},
footer: [
{
onClick: (data, close) => {
console.log(data);
if (data.name.length > 10) {
close();
} else {
alert("name的长度小于10");
}
},
},
]
});
More examples
For more examples, please visit
Dependencies
Dependencies
@types/chai: ^4.2.11@types/mocha: ^5.2.4@typescript-eslint/eslint-plugin: ^2.33.0@typescript-eslint/parser: ^2.33.0@vue/cli-plugin-babel: ~4.5.0@vue/cli-plugin-eslint: ~4.5.0@vue/cli-plugin-pwa: ~4.5.0@vue/cli-plugin-router: ~4.5.0@vue/cli-plugin-typescript: ~4.5.0@vue/cli-plugin-unit-mocha: ~4.5.0@vue/cli-service: ~4.5.0@vue/compiler-sfc: ^3.0.0@vue/eslint-config-typescript: ^5.0.2@vue/test-utils: ^2.0.0-0ant-design-vue: ^2.0.0-rc.8axios: ^0.21.1babel-plugin-import: ^1.13.3babel-polyfill: ^6.26.0chai: ^4.1.2copy-webpack-plugin: ^5.0.0cross-env: ^7.0.3eslint: ^6.7.2eslint-plugin-vue: ^7.0.0-0file-loader: ^6.2.0node-emoji: ^1.10.0sass: ^1.26.5sass-loader: ^8.0.2style-resources-loader: ^1.3.2ts-loader: ^8.0.18typescript: ~3.9.3url-loader: ^4.1.1vue-cli-plugin-style-resources-loader: ~0.1.4vue-router: ^4.0.0-0webpack-cli: ^4.5.0